De NoJS à MEAN, par où commencer ? Part I : Javascript

Les contextes d’entreprises peuvent parfois vous pousser vers d’autres technologies. Peut-être que la majorité de l’équipe en a décidé ainsi, ou peut-être qu’il s’agit d’une contrainte du client.

Peut-être que vous n’avez jamais programmé en Javascript, où seulement de manière succincte en manipulant un peu le DOM. Peut-être que cet aspect était délégué à un intégrateur ou un webmaster alors que vous vous concentriez sur le backend. Aujourd’hui, un véritable développeur est de plus en plus nécessaire en frontend, avec l’apparition de librairies et de frameworks qui introduisent des notions N-Tiers du côté client, c’est notamment le cas d’AngularJS.

Je vais donc essayer de quickstarter votre démarrage sur Javascript, en introduisant des concepts de bases, des bonnes pratiques sur NodeJS et AngularJS (structure de fichier et usage des design patterns) et des outils sympas (yeoman, grunt, gulp, etc…).

Afin de ne pas créer de confusion, je me baserai sur l’usage ES5 (EcmaScript, la norme JS). J’évoquerai néanmoins quelques ajouts qu’a subit JS avec l’arrivé d’ES6.

J’écris ces articles en m’appuyant sur les bonnes pratiques que j’ai pu assimiler au cours de mon expérience, je ne prétend pas qu’il s’agit des meilleures pratiques, et je ne suis pas à l’abri d’une erreur. Si tel est le cas, n’hésitez pas à m’en notifier dans les commentaires.

Si au cours de cette lecture vous souhaitez tester des choses, vous pouvez utiliser la console de votre navigateur (F12) ou Plunker. Mieux encore, Node, si vous l’avez sur votre machine.

Je diviserai ce guide en plusieurs posts.

Javascript c’est quoi ?

Orienté prototype

Un langage de programmation orienté prototype. Quelle différence avec un langage orienté objet comme JAVA ou PHP ? L’orienté prototype inclut l’orienté objet, à la différence que Javascript n’utilise pas de classes. Le mot clé class a été introduit en ES6, cependant il s’agit d’un sucre syntaxique et pas de class au sens où vous pouvez y être habitué. class en JS n’est rien d’autre qu’une fonction un peu spéciale. La notions de classe est délaissée au profit des modules et des fonctions. Je reviendrais sur ce qu’offre l’orienté prototype en terme de fonctionnalité, notamment en terme d’héritage dans un de mes futur post.

Interprété, mais pas compilé

Javascript est interprété et n’est pas compilé ! Et c’est là une erreur que ceux qui confondent Java et Javascript font souvent, donc qu’on soit clair : Java et Javascript ne sont pas du tout le même langage. Javascript n’est pas compilé. A ce titre, JS fonctionne un peu comme PHP. Afin d’exécuter du JS, vos navigateurs sont équipés d’un interpréteur, et afin d’interpréter du JS “côté serveur”, directement à partir d’un OS, vous aurez besoin de Node. Node est un binaire construit à partir de l’interpréteur de Google Chrome : V8. NodeJS n’est pas un langage, c’est un runtime (Node) et une floppé de librairies qui vous permettront de faire ce que tout les langages serveurs peuvent faire : Manipuler le Filesystem, lire/écrire/exécuter des fichiers/commandes, construire une API, écrire un proxy, etc…

Non-typé, avec un typage dynamique

Javascript n’est pas typé et le typage est dynamique. Les variables sont toutes déclarées à l’aide du mot-clé “var”. EcmaScript6 a introduit la notion de constante, et donc, renforcé la notion de variable, à l’aide des mot-clés “const” et “let”. Respectivement const désigne une variable dont la valeur ne changera pas (pas de ré-assignation) et let, l’inverse. Une variable (var, ou let en ES6) qui à un instant T est un booléen pourra devenir une chaîne, un entier ou un objet à un autre moment, sans avoir besoin d’être redéclarée.

3 spécificités à ne pas oublier en Javascript

Lorsque j’ai commencé sérieusement à coder en JS il y a 4 ans, mes mentors (big up à eux) ont attiré mon attention sur différentes spécificité du langage. Je n’ai personnellement pas eu trop de difficultés à m’y faire, dans la mesure ou j’avais fait du Java ET du PHP avant. Même si en tant que débutant il faut toujours les garder à l’esprit et que ça m’a joué des tours.

Scope

Une image vaut mieux que milles mots :

modulescope

Chaque couleur représente un scope différent, plus la teinte est foncée, plus le scope est réduit et plus il a hérité des scopes au dessus de lui.

Altération d’objet par référence

(function(){
 var obj = {foo: "bar"};
 var ref = obj;
function A(){
 ref.foo = "lorem";
}
 A();
 console.log("foo: ",obj.foo);
 console.log("obj == ref ? ",obj == ref);
})();

Que vaut obj.foo ? Est-ce que obj == ref ?

lorem, true

Pourquoi ? Car obj a été altéré par référence, ref et obj sont une seul et même instance d’un objet.

Donc quel est le résultat de :

(function(){
 var obj = {foo: "bar"};
 var ref = {foo: "bar"};
 console.log("obj == ref ? ",obj == ref);
})();

?

False, car il s’agit certes d’objets qui contiennent la même propriété avec la même valeur, mais il s’agit deux instances d’objets différentes.

Asynchronisme

Je vais maintenant rendre notre fameuse fonction A asynchrone.

(function () {
 var one = 1;
 function A(param, cb) {
    // setTimeout 1er param: une fonction
    // 2e param, le nombre de ms à attendre AVANT d'exécuter cette fonction 
    setTimeout(function () {
     cb(param - 1);
    }, 1);
    console.log(2);
 }
 console.log(3);
 A(one, function (res) {
    console.log(res);
 });
 console.log(one);
}) ();

Dans quel ordre vont sortir les chiffres d’après vous ?

Réponse: 3,2,1,0

La logique derrière cette fonction asynchrone est simple : Une fonction n’est exécutée que lorsqu’elle est appelée. La spécificité de Javascript c’est que lorsqu’il est face à un appel asynchrone, il continuera de travailler en attendant la réponse de la fonction asynchrone, et lorsqu’il aura cette réponse, il exécutera une autre fonction, appelé callback (cb()), qui aura été appelé à l’intérieur de la fonction asynchrone pour signifier qu’elle a terminé (l’appel = la réponse). Cependant, l’appel de cette callback ne met pas fin à l’exécution de la fonction asynchrone s’il ne s’agit pas de la dernière instruction, ou qu’elle n’est pas appelée accompagnée d’un return.

La moral de l’histoire c’est que le code n’est pas exécuté dans le sens où on le lit.

Dans mon prochain post j’aborderai certaines bonnes pratiques à adopter en Javascript, comme l’usage de “use strict” et d’une self-invoking closure pour limiter le scope.

 

Advertisements

One thought on “De NoJS à MEAN, par où commencer ? Part I : Javascript

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s