Magali Contensin [email protected] Industrialisaon de JavaScript Réseau régional ProDev ! 21-22 janvier 2016 Action Nationale JavaScript – Marseille Industrialisation de JavaScript 2 ¨ Nombreux outils disponibles pour créer une usine logicielle JS ¨ Automatisation des tâches récurrentes ¤ Gain de temps ¤ Diminution des erreurs dues à la gestion de tâches répétitives Plan 3 ¨ Coder ¨ Gérer les dépendances du projet ¨ Déboguer ¨ Optimiser ¨ Tester ¨ Générer la documentation ¨ Mesurer la qualité du code ¨ Automatiser et déployer Coder Utiliser un Environnement de Développement Intégré 4 ¨ Arborescence du projet ¨ Editeur de code source ¤ Coloration syntaxique ¤ Mise en évidence des erreurs ¤ Recherche / remplacement avancés (expressions régulières, refactoring) Enide ¤ Visualisation simultanée de plusieurs fichiers JSDT Studio ¤ Indentation automatique ¤ Correspondance parenthèses, accolades ouvrantes/fermantes ¤ Conventions de codage et de nommage ¨ Complétion de code ¨ Génération de documentation d’API ¨ Gestion de version ¨ Débogage Coder Ecrire du code lisible et maintenable 5 ¨ Bonnes pratiques de programmation ¤ Utiliser le mode strict ¤ Déclarer les variables et fonctions avant de les utiliser ¤ Accolades pour les if/for qui n’ont qu’une instruction ¨ Conventions de codage ¤ Indentation : pas de tabulation, utiliser 4 espaces ¤ Longueur de ligne : 80 caractères ¤ Noms de variables : caractères : alphabet, nombres et _ ¤ Noms de fonctions : camelCase ¤ Mettre l’accolade ouvrante du bloc sur la même ligne que if, for, function, ... ¤ Mettre un caractère espace entre if, while, for, ... et ( ¤ Utiliser === et !== plutôt que == et != ⇒ Configurer l’EDI ⇒ Utiliser des outils d’analyse statique Coder Ecrire du code lisible et maintenable 6 Configurer l’EDI définir le formatage Coder Ecrire du code lisible et maintenable 7 Configurer l’EDI définir les indications d’alertes et erreurs Coder Ecrire du code lisible et maintenable 8 Configurer l’EDI Partager les règles entres développeurs d’une même équipe et entre EDI http://editorconfig.org/ .editorconfig Coder Utiliser des outils d’analyse statique du code 9 ¨ Vérifier que le code suit les bonnes pratiques de programmation ¨ Vérifier que le code suit des conventions de codage et des règles de nommage ¨ Détecter les problèmes potentiels ¤ Affectation dans if if (a = b) ¤ Oubli de déclaration de variable ¤ Code jamais exécuté (return avant le code) ¨ Détecter ce qui n’est pas utilisé (variables) ¨ Détecter les erreurs de syntaxe var x = 5 /* …. var y = 4; var z; /* ... */ if(x = y) ... */ statut = 'egal'; else statut= 'different'; Coder Utiliser des outils d’analyse statique du code 10 JSLint, support jQuery, plugin Eclipse, Netbeans, … Douglas Crockford http://www.jslint.com/ var x = 5 var y = 4; var z; if(x = y) statut = 'egal'; else statut= 'different'; Coder Utiliser des outils d’analyse statique du code 11 http://www.jshint.com/ Support jQuery et Node.JS Configurable Plugin pour Eclipse, NetBeans NB : JSHint se recentre vers la détection de problèmes dans le code, la prochaine version majeure ne vérifiera plus le style Coder Utiliser des outils d’analyse statique du code 12 JavaScript code style checker : http://jscs.info/ Plusieurs jeux de règles disponibles Configuration d’un jeu de règles jscs --preset=crockford test.js L’option -x corrige le fichier jscs --preset=crockford -x test.js => correction automatique de 146 erreurs Coder Utiliser des outils d’analyse statique du code 13 Intégration dans les IDE Coder Utiliser des outils d’analyse statique du code 14 Intégration dans les IDE Coder Ecrire du code JavaScript discret 15 ¤ Séparation comportement / structure comportement style Le fichier HTML ne contient que des JS CSS liens vers des fichiers JS et CSS Utilisation du DOM pour l’accès aux HTML éléments structure <form acCon='test.php' onsubmit="return confirm('envoyer?')"> id="formtest" <div> <input type="text" name="nb" onchange="verifNb(this)"> id="nb" <input type="submit" value="envoyer"> </div> </form> Coder Ecrire du code JavaScript discret 16 ¤ Accessibilité : contenu accessible et navigation possible sans JS ou avec un support partiel de JavaScript avec JS (jQuery UI) sans JS Coder Ecrire du code JavaScript discret 17 ¤ Echec silencieux, si JS non activé ou fonctionne partiellement - pas de message d’erreur - détection des fonctionnalités avant utilisation https://modernizr.com/ Coder Ecrire du code JavaScript discret 18 ¤ Indépendance vis à vis du périphérique par rapport aux événements X mouseover Coder Ecrire du code JavaScript discret 19 ¤ Code sans effet de bord Contexte global Contexte local ? NON var tab = ['a', 'b', 'c', 'd']; funcCon test() { i = 4; for (var i = 0; i < tab.length; i++) { } console.log('for : i = ', i); test(); } funcCon test() { console.log('end : i = ', i); i = 0; } Coder Ecrire du code JavaScript discret 20 ¤ Code sans effet de bord Toujours déclarer les variables avec var Contexte global Contexte local ? OUI var tab = ['a', 'b', 'c', 'd']; funcCon test() { var i = 4; for (var i = 0; i < tab.length; i++) { } console.log('for : i = ', i); test(); } funcCon test() { console.log('end : i = ', i); var i = 0; } Coder Ecrire du code JavaScript discret 21 ¤ Code sans effet de bord Visibilité publique pour les propriétés et méthodes var compteur = { cpt : 0, next : funcon() { compteur.next(); this.cpt++; compteur.next(); }, console.log( compteur.getCpt() ); reset : funcon() { compteur.reset(); this.cpt = 0; console.log( compteur.getCpt() ); }, compteur.cpt = 5; getCpt : funcon() { console.log( compteur.getCpt() ); return this.cpt; } } Coder Ecrire du code JavaScript discret 22 ¤ Code sans effet de bord Créer des modules (ES5) fonction anonyme var compteur = ( funcCon () { var cpt = 0; compteur.inc(); funcon next() { cpt++; }; compteur.inc(); funcon reset() { cpt = 0; }; cpt = 5; funcon getCpt () { return cpt; }; compteur.cpt = 5; console.log( compteur.val() ); return { inc : next, compteur.reset(); val : getCpt } })(); compteur est un objet comportant 2 méthodes inc et val Coder Ecrire du code JavaScript discret 23 ¤ Code sans effet de bord Créer des modules • ES 6 • 2 formats de modules utilisés avec ECMAScript 5 • Asynchronous Module Definition (AMD) • CommonJS (CJS) Coder Ecrire moins de code ou du code mieux structuré 24 ¨ Utiliser des bibliothèques https://jquery.com/ http://underscorejs.org/ function display(val){ console.log(val); } // crée une liste de nombres de 0 à 30 par pas de 5 var tab = _.range(0, 30, 5); // exécute la fonction display pour chaque élément de tab _.each(tab, display); Coder Ecrire moins de code ou du code mieux structuré 25 ¨ Utiliser des frameworks MV* Coder Ecrire moins de code ou du code mieux structuré 26 ¨ Utiliser des outils de templating : mustache, handlebars {{ }} template Résultat HTML Objet JSON Source http://handlebarsjs.com/ Coder Ecrire moins de code ou du code mieux structuré 27 ¨ Transpiler ou compiler JavaScript JavaScript ECMA 6 tsc test.ts coffee --compile src/*.coffee dart2js --out=test.js test.dart ES5 JavaScript test.js Coder Ecrire moins de code ou du code mieux structuré 28 Sur-ensemble de JavaScript. Ajoute : types, classes, modules, interfaces JS http://www.typescriptlang.org/Playground/ Coder Ecrire moins de code ou du code mieux structuré 29 Plus concis. Blocs marqués par l’indentation. Ajout de classes, sucres syntaxiques (@ pour this) JS http://coffeescript.org/ Coder Ecrire moins de code ou du code mieux structuré 30 https://dartpad.dartlang.org/ Coder Choisir une bibliothèque, une technologie 31 ¨ Critères ¤ Fonctionnalités offertes ¤ Licence ¤ Facilité de prise en main pour le développeur ¤ Pérennité n Support des normes n Documentation n Forge logicielle n Communauté active n Tendances ? Coder Choisir une bibliothèque, une technologie 32 http://www.google.fr/trends/ Coder Choisir une bibliothèque, une technologie 33 http://www.google.fr/trends/ Coder Choisir une bibliothèque, une technologie 34 http://www.indeed.com/jobtrends/ Coder Choisir une bibliothèque, une technologie 35 http://libscore.com Plan 36 ¨ Coder ¨ Gérer les dépendances du projet ¨ Déboguer ¨ Optimiser ¨ Tester ¨ Générer la documentation ¨ Mesurer la qualité du code ¨ Automatiser et déployer Gérer les dépendances du projet 37 Installation et mise à jour de paquets et bibliothèques http://bower.io/ https://www.npmjs.com/ { "name": "mon_projet", "dependencies": { "html5shiv": "latest", "modernizr": "latest", bower.json "jquery": "1.12.0" } } Gérer les dépendances du projet 38 Chargement dynamique asynchrone de bibliothèques http://requirejs.org/ https://github.com/systemjs <input type='date' name='d' required> if (!Modernizr.inputtypes.date){ requirejs(["jquery.min.js", "jquery-ui/jquery-ui.min.js"], function() { $('input[type=date]').datepicker(); }); } Gérer les dépendances du projet 39 http://browserify.org/ http://webpack.github.io/ Plan 40 ¨ Coder ¨ Gérer les dépendances du projet ¨ Déboguer ¨ Optimiser ¨ Tester ¨ Générer la documentation ¨ Mesurer la qualité du code ¨ Automatiser et déployer Déboguer 41 Inspecteur du document : débogueur Déboguer 42 Inspecteur du document : échanges HTTP AJAX URL et paramètres envoyés Format réponse Statut par GET Paramètres GET et POST Corps de la réponse Plan 43 ¨ Coder ¨ Gérer les dépendances du projet ¨ Déboguer ¨ Optimiser ¨ Tester ¨ Générer la documentation ¨ Mesurer la qualité du code ¨ Automatiser et déployer Optimiser 44 ¨ Placer les inclusions de scripts en fin de page pour ne pas bloquer les téléchargements parallèles <script src="…"></script> Optimiser