Utiliser NPM Script Au Lieu De Gulp Pour Builder

On entends sur le net beaucoup à propos de Grunt ou de Gulp, ces outils vous permettent de compiler du sass en css, de minifier les script css et javascript, de rassembler en un seul fichier etc.

Cependant, il vous est tout à fait possible de faire ce que fait Gulp par exemple rien qu'en utilisant ce qui est disponible avec NPM script.

NPM est le gestionnaire de package sous nodeJS. Il vous permet de télécharger les dépendances nécessaire au fonctionnement de votre application web et du développement de ce dernier.

Voyons voir comment on peut compiler du Sass en CSS en utilisant NPM script.

les scripts NPM sont logés dans le fichier package.json, dans la propriété scripts.

C'est un objet json qui contient des paire clé-valeurs. La clé étant le nom d'un script, et la valeur est la commande NPM que vous auriez tapé en ligne de commande.

 Bon assez parlé on y va !

Compiler du Sass en css

c'est la tâche que l'on aura le plus souvent à faire.

Donc je suppose que vous avez déjà installé nodeJS, donc que vous pouvez utiliser NPM.

> npm install node-sass

Ensuite dans l'objet scripts qu'il y a dans le fichier package.json, créez une entrée comme ceici:

  "scripts": {
    "scss-build": "node-sass --include-path src/scss src/scss/style.scss public/css/style.css",
    "watch-scss": "node-sass -w src/scss/ -o public/css/"
  },

 

les chemins sont relatifs à l'emplacement du fichier package.json

le premier script "scss-build" va dire à node de compiler le fichier style.scss en style.scss

  1. src/scss est le répertoire source
  2. src/scss/style.scss est le fichier sass à compiler
  3. public/css/style.css est le fhicer cible

Rien qu'avec ce premier script (n'ajoutez pas le second script watch-scss pour l'instant), faite ceci:

> npm run scss-build

 et voilà !

PAssons au second script, comme avez à modifier un grand nombre de fois le fichier sass, vous aurez envie que la compilation se fasse à chaque fois que vous sauvez le fichier sass,

le "watch-scss" va surveiller toute modification du ficheir et va le compiler.

Il suffit donc de lancer non pas le premier script, mais le second script seul.

> npm run watch-scss

 

et voilà !

Il y a plus dans les npm scripts que la compilation. On aura envie de minifier le css,minifier le javascript, linter le javascript (linter veut dire vérifier que le code soit aux normes),autopréfixer les propriétés css, et même compresser les images (ce qui est très intéressant !). Le top du top est de pouvoir travailler avec Browsersync quand vous développez en cross browser.

 

 

2016-04-15 02:04:50 0 Commentaires

Creer Un Projet Avec NPM Proprement

Pour un projet web en php pour le backend, et javascript pour le front(en fait vous n'avez pas d'autres choix que le javascript pour le front car c'est le seul langage côté navigateur à l'heure actuelle),

je vais vous montrer comment initier un projet avec NPM.

 

Créez votre répertoire web, entrez-y, et commencez par:

>npm init

Vous aurez une suite de question pour configurer votre application, les paramètres globaux de la solution sera sauvée dans un fichier package.json.

A ce niveau votre fichier json ne contient pas de dépendance vers une quelconque bibliothèque javascript.

On va installer Angular (la dernière version):

> npm install --save angular

L'argument save a pour but de sauver la ligne d'installation du module Angular dans el fichier package.json.

Vous faites de même avec les autres librairie (sass, gulp etc), pour savoir ce qu'il faut taper exactement, allez sur le site officiel de NPM, maintenant on va faire une installation d'une autre catégorie de librairies, les dev dependencies. Ce sont les librairies qui sont utilisée seulement en développement mais ne figureront pas dans la version production.

Par exemple je vais installer la librairie de test unitaire Karma, qui est un orchestrateur de tests, et Jasmine qui est la librairie de test unitaire proprement dite.

>npm install --save-dev karma


Voilà ce que vous aurez comme fichier package.json

{

 "name": "monprojet",
  "version": "1.0.0",
  "description": "monprojet",
  "main": "index.php",
  "dependencies": {
    "angular": "^1.5.8"
  },
  "devDependencies": {
    "karma": "^1.1.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Yvon Huynh",
  "license": "ISC"

}

Si vous versionnez avec GIT par exemple, vous n'allez pas versionner le répertoire node_modules (le répertoire dans lequel sont entreposés les dépendances). Mais vous allez par contre versionner le fichier package.json. C'est lui qui contient toutes les informations sur les dépendances, si un collègue ou un contributeur désire cloner le projet chez lui, il fera un :

> npm update

pour lancer le processus de chargement des modules npm. Npm va lire le package.json et réinstaller les modules. Comme ça pas de repository Github surchargé par du code non en liaison directement avec votre application.

2016-01-08 08:01:45 0 Commentaires

Getting Started With NodeJS

NodeJs allow you to write server side javascript. If you've been a webdevelopper with javascript  and javascript libraries like Jquery, and working mostly in classic web agencies, this short article will get you throught the crucial first steps to installing and running a nodeJS application.

 

NodeJS is a program based on the Google Chrome web browser embarked javascript Engine. Until now, you mostly see javascript on browser and not on desktop application for example.

Some smart folk had the idea to use the javascript engine of Google Chrome ( called V8) as a standalone program to run javascript.

Now you can use Node to run a webserver (Yes it replaces Apache or IIS), or to run javascript programs on Windows or Linux. Github.com has written an IDE that runs on nodeJS. It is called Atom. More and more website are run on nodeJS server, it has a smaller memory usage than Apache, so it is very lightweight.

In the field of Internet of Things, we start to see people run Iot device in javascript where we traditionally use C language program.

But enough said, i am going to show you how to install NodeJs and start to run scripts.

 

 

Then nodeJs comes with a package manager npm which the central component for writing your server side javascript project.

NodeJs by itself is a small program, and the folks that maintain it use a modular approach to loading libraries.

There are so many libraries you just can't download on your computer. Pne more reason this approach is chosen is because the libraries are rarely frozen, there are regular updates. So this modular approcah will ensure you have the latest version of a library any time, and you don't have to download them manually, npm does it for you with a simple command.

Install nodeJS

First you must install the nodeJs program, you can download it on the official website.

After you installed nodeJS, you are ready to write your firs serverside javascript !

Create a folder, and a file test.js and put inside console.log('Hello World');

Save it and open a terminal, go to the folder and type:

$  node test.js

You'll see :

Hello World!

That's it ! you've written your first nodejs file !

Now let's go a step further, nodeJS is most reknowned for being a webserver. In our cas we want to run nodejs and set it to listen to http request.

 

Your first local node server

 Rename your test.js to server.js

put this code inside

var http =require('http');
var fs =require('fs');
var url =require('url');
// Create a server

http
.createServer(function(request, response){
// Parse the request containing file name

var
pathname = url.parse(request.url).pathname;
// Print the name of the file for which request is made.
console
.log("Request for "+ pathname +" received.");
// Read the requested file content from file system

fs
.readFile(pathname.substr(1),function(err, data){if(err){ console.log(err);
// HTTP Status: 404 : NOT FOUND
// Content Type: text/plain
response
.writeHead(404,{'Content-Type':'text/html'});}else{
//Page found
// HTTP Status: 200 : OK

// Content Type: text/plain

response
.writeHead(200,{'Content-Type':'text/html'});
// Write the content of the file to response body

response
.write(data.toString());}
// Send the response body

response
.end();});}).listen(3000);
// Console will print the message

console
.log('Server running at http://127.0.0.1:3000/');


Create an index.html file with the hello world string inside the same directory.

Now run the node server again :

$ node server.js

navigate on your browser to 127.0.0.1:3000 and there you go !

 

We've seen that we can create a minimalistic website with nodeJS. But you may have heard of ExpressJS. ExpressJS is a minimalistic framework to perform all thing relative to http.

  1. It has a routing system to map url to page content
  2. It allows a dynamic web page rendering similar to MVC parameterized url
  3. Allows to setup middleware to respond to http request

 In a next chapter i will introduce you to ExpressJS

2015-12-05 17:12:45 0 Commentaires

Dumping Results With PDO

With PDO, there is a native method to dump the result of a query.

$stmt->execute();

$stmt->debugDumpParams();

This can compliment the debug method in Twig itself :

{{ dump(result) }}

 

In Symfony2, you can use Doctrine to dump also:

\Doctrine\Common\Util\Debug::dump($products);

2015-01-27 14:01:57 0 Commentaires

Debugging With Twig

Rendering HTML in twig template with Twig

By default whenever you try to pass an HTML string to Twig, it applies a function like html_entities(),
opening bracket < will be displayed as
&lt; , so if you want to render the HTML you should use the raw filter like this:

{{ html_string| raw }}

Echoing an array

{{  dump(products) }}

 

2015-01-21 00:00:00 0 Commentaires

Improve Your OOP Skills With Symfony

If you've been programming in php for several years, chances are you've come across OOP programming because your application has grown in complexity.

Coding in OOP is a very good move (but not that easy at the beginning). And at the end you'd feel the benefit of code reusing.

What is code reuse?


If you develop more than 2 web applications, you will find code reusing time saving.

There shoudl be common stuff to share like user login, form validation to name a few.

But the difficulty is that you may work in two different environment and you will need to modify the first code in the second application. Unless you are comfortable with high level OOP programming (abstract class, interface, polymorphism, dependency injection, namespace, class autoloading), it is inevitable that you will alter the code.

In fact writing reusable code is not that easy, it needs knowledge of advanced OOP concept.

The best way to start is to download a well known API such as FOSUserBundle and see under the hood. It uses lots of abstraction.

Abstraction is the keyword, this mechanism allows you to write generic methods to be used consistently in different frameworks.

Before you can write reusable code (that you can share as open source), first try to master the key concept of OOP programming such as interface, polypmorphism and design pattern.

Key OOP concept to work on

Here is what i'm working on to master OOP:

Interface and abstract classes

Those two have similarities, abstract classes can only be inherited, but can contain non abstract method, while interfaces are 100% abstract classes. Interface are quite bizarre at first, because they define method ans their signature, but there is no code in the method ! They tell you that using interface can allow you to function in different environment, for example using interface allow you to connect to Mysql as well as PostGrest, or SQLite. Okay, how?

 

Polymorphism

In Java, which is a strongly typed language, (a string is a string, a number is a number and not a string), the polymorphism mechanism allow you to manipulate different type of object.

Design pattern

Design pattern are recipes to solve a problem. For example the singleton design pattern, makes it impossible to instantiate more than once a class. Why? if you don't want to mess up with lots of object and manage memory well then use it. Factory is another one that'll be useful, it is a method of object instantiation without using the constructor of a class, in fact you delegate the instantiation of a class to another class, why? if you one day rename the class or change the class, then you'll only need to do it in the factory class, that will save you time !

2014-12-24 16:12:31 0 Commentaires