JavaScript as a first programming
language
votre IC prête pour la révolution
Julien Roche
Frédéric Dubois
Frédéric Bouquet...
Julien Roche - @rochejul
•Ingénieur d’étude Java, Web, Web Mobile / hybride chez
Objet Direct depuis 6 ans
•Formateur / co...
Frédéric Bouquet - @bouquetf
Curieux
Bidouilleur
Open source
Bonitasoft
Objet Direct
www.espacedefouille.org
Frédéric Dubois - @fduboisca
http://www.devoxx.com/display/FR12/Pour+un+developpement+du
rable
12 ans d’expérience
Et tu d...
TDDXP
IC Coding rules check
Sonar
Refactoring
Le drame
La mort annoncée de Flash et
autres
Metro style browsing and plug-in free HTML5.
…
Many of the 62% of these sites that cur...
JavaScript ?!!!?!!!?
C’est pas un langage orienté
Objet…Prototype tu dis ?
Pas de typage fort
Pas de complétion, WTF!
Les ...
Expectative…
puis finalement…
0 tests, 0 normes !!!
• Le fantôme, le zombie et testacular, panorama des
outils de tests pour application web moderne
• AngularJS, ou le futur ...
@YourTwitterHandle#DVXFR14{session hashtag}
Et bah moi en Java…
Et ils veulent me faire changer pour
ça?
IDE =
Debug =
Profiling =
Test =
Quality =
Build =
= Continuous
Integration
Javascript as a 1st language
Un environnement de développement
performant
De l’outillage, ne pas réinventer la roue
Ecrire...
Pendant ces 2h1/2, nous allons
Présenter une usine logicielle Javascript complète
Autour d’une projet Web
Il y aura, du co...
@YourTwitterHandle#DVXFR14{session hashtag}
Des outils
• Concevoir, développer, tester
• Sauvegarder/Archiver/Versioner
• Gérer les dépendances
• Compiler
• Exécuter ...
Big Picture dans le monde Java
Produit Géré par
Articulé autour de
Testé avec
Versione avec
Peut utiliser
Big Picture dans le monde Web
Produit Géré par
Articulé autour de
Testé avec
Versione avec
Peut utiliser
??
?
?
@YourTwitterHandle#DVXFR14{session hashtag}
Un développeur sans IDE
•C’est un peu comme MacGyver sans son couteau suisse
Et pourtant !
•Le développeur Web a longtemps été seul
•Souvent, un simple Notepad++ était son meilleur outil
Mais cela a changé !
•Nous avons désormais un ensemble d’IDE à notre
disposition pour nous aider !
Webstorm
•Produit par Jetbrains
•Spécialisé pour répondre au large panel de nouvelles
technologies du Web
@YourTwitterHandle
Javascript as a 1st language
Un environnement de développement
performant
De l’outillage, ne pas réinventer la roue
Ecrire...
@YourTwitterHandle#DVXFR14{session hashtag}
Autrefois …
• Si nous voulions gérer un projet pur JavaScript, nous étions seul au monde
• … encore …
NodeJs – Et la force est avec nous ?
• NodeJs est un outils écrit en C qui utilise JavaScript comme langage de
script
• Il...
Un exemple de serveur (1)
var sys = require('sys'),
httpServer = require('http');
httpServer.createServer(function(request...
Un exemple de serveur (2)
var express = require('express'),
app = express(),
restPrefix = '/api',
port = process.env.PORT ...
NodeJs – En tant qu’outils (1)
• La simplicité et le choix de JavaScript a permis à de nombreux
frameworks JavaScripts de ...
NodeJs – En tant qu’outils (2)
• Une pléthore de plugins sont alors apparus !
• Sans compter les très nombreux modules Nod...
Son repository
• https://www.npmjs.org
Et ce n'est pas que pour les POCs
• http://nodejs.org/industry
@YourTwitterHandle
Javascript as a 1st language
Un environnement de développement
performant
De l’outillage, ne pas réinventer la roue
Ecrire...
@YourTwitterHandle#DVXFR14{session hashtag}
@YourTwitterHandle#DVXFR14{session hashtag}
Sommaire
• Marre du "alert('...');"
• Initialiser un projet
• Et pour mon jQuery ?
• Organiser mon code
• He’s alive ! ALI...
@YourTwitterHandle#DVXFR14{session hashtag}
Autrefois …
•Le déboggage d’une application Web était plutôt
compliqué …
•Nous devions souvent mettre des instructions « a...
Néanmoins …
•Des outils ont émergés pour essayer de nous aider
•Firebug pour Firefox
•Dynatrace Ajax edition
•Log4JavaScri...
ChromeDevTools à l’aide
•C’est un outils intégré dans Chrome
•Il a pour but d’intégrer un large panel de fonctionnalités
p...
Aperçu configurations
Aperçu pour la partie HTML
Aperçu pour la partie JavaScript
Pour le réseau, nous pouvons …
•Connaître toutes les réseaux chargés
•Avec le temps de chargement
•Avec le statut réseau
•...
Et bien d’autres choses !
•Timeline pour voir les événements capturés et le temps
de traitement chacun
•Timeline pour conn...
Aperçu …
Aperçu …
Aperçu …
@YourTwitterHandle
@YourTwitterHandle#DVXFR14{session hashtag}
Que fait un gestionnaire de projet ?
• Il a pour but de donner des informations sur le projet
• Nom, auteur, version …
• I...
Et pour cela ?
@YourTwitterHandle
@YourTwitterHandle#DVXFR14{session hashtag}
Le gestionnaire de dépendances
• Il a pour but de télécharger des modules / frameworks pour
• Soit mieux gérer l’applicati...
Bienvenue à Bower !
• Bower est un module NodeJs qui est orienté pour les solutions clientes
• Comme Maven,
• Il a une ges...
Son repository
• Il a son propre repository: http://bower.io/search
Que devons-nous faire ?
• Il va falloir déclarer dans notre projet NodeJs que nous avons besoin de
Bower
• Nous allons avo...
@YourTwitterHandle
@YourTwitterHandle#DVXFR14{session hashtag}
Pallier un syndrôme bien connu
• Souvent nous avons ça:
• Autrement, nous avons une liste impressionnante de JavaScript à ...
Ce qui nous amène à la question …
• Comment devons-nous charger nos fichiers JavaScripts
?
• Dans la balise HEAD ?
• En ba...
Et si on allait plus loin ?
• Ne pourrions-nous pas avoir un framework qui fasse du chargement
asynchrone
• Chargement opt...
RequireJS
• Github: https://github.com/jrburke/requirejs
• Documentation: http://requirejs.org/
• Compatible sur la quasi-...
Un aperçu …
define(
["mypreviousmodule", "myanotherpreviousmodule"],
function(a, b){
// Do something
// Return something
r...
Optimisation
• RequireJS a un plugin NodeJS permettant
• De concaténer et de minifier les fichiers JavaScripts
• Et cela e...
@YourTwitterHandle
@YourTwitterHandle#DVXFR14{session hashtag}
Votre projet vit
• Un gestionnaire de projet propose en générale un cycle de vie
• Pour télécharger les dépendances
• Pour...
Jetons un œil chez Maven 3.2.1
Et chez Gradle ?
Et chez NodeJs
• Nous allons un petit cycle de vie que nous définissons dans le
package.json et qui a pour but de lancer d...
Exemple:
Néanmoins …
• Ce cycle de vie n’est pas toujours très adapté
• Quelles solutions aurions-nous ?
• Utiliser des solutions c...
Solution: GruntJs
• GruntJs est un module NodeJs qui propose un peu comme
Ant d’exécuter des « tâches »
• Une tâche étant ...
GruntJs et son API
GruntJs et ses plugins officiels
• grunt-contrib: pour avoir tous les plugins officiels
• grunt-contrib-clean
• grunt-cont...
@YourTwitterHandle
@YourTwitterHandle#DVXFR14{session hashtag}
Parent / enfant
• Nous avons la notion de projets parent / enfants
• Où un enfant est un sous-ensemble
• Où le parent regr...
On obtient une transversalité !
• Un même technologie partout
Et pour ce faire
• Si nous voulons étendre un module backend: utilisation de NodeJs
• Si nous voulons étendre un module fr...
@YourTwitterHandle
Javascript as a 1st language
Un environnement de développement
performant
De l’outillage, ne pas réinventer la roue
Ecrire...
@YourTwitterHandle#DVXFR14{session hashtag}
Nos exigences qualités
• En règle générale, nous aimons bien avoir:
• Des rapports sur nos tests
• Des rapports sur la cou...
Dans le monde Java
• Cela se traduit par:
• Des rapports Junit
• Des rapports Cobertura
• De la JavaDoc / Oxygen
• Des rap...
Dans le monde du Web
• Autant dans le monde Java, nous validons du Java
• Autant dans le monde du Web, nous validons:
• De...
@YourTwitterHandle#DVXFR14{session hashtag}
Ce que nous voulons faire
Des TUs Des TFs
Ecrire
Les exécuter
Dans un
navigateur
headless
Pour
produire <XML/
>
Et aliment...
Ecrire des tests
Jasmine pour les tests unitaires
• Syntaxe BDD, assertions et mock
• Intégration avec les tests runner fr...
Karma à la rescousse
Son objectif: exécuter les tests dans un navigateur
Avantages
• Gère plusieurs frameworks de tests (J...
PhantomJs
• Nous utilisons souvent Karma avec PhantomJs
• Basé sur Webkit
NAVIGATEUR HEADLESS
=
! AUTOMATISATION!
@YourTwitterHandle
@YourTwitterHandle#DVXFR14{session hashtag}
Elle est où la doc ?
JSDoc 3
Oui mais Web = JS + HTML, CSS, etc
Normes de développement ?
• Nous avions JsLint (initié par Douglas Crokford) qui permet...
Reporting
• Et en règle générale, un générateur de rapport se disant « Lint » ou
« Hint » génère souvent un fichier de typ...
@YourTwitterHandle
Javascript as a 1st language
Un environnement de développement
performant
De l’outillage, ne pas réinventer la roue
Ecrire...
@YourTwitterHandle#DVXFR14{session hashtag}
Nous voulons… valider
JSDoc 3
2- compiler
3 -analyser 4- documenter
Checkstyle
reports
1- Mettre à jour les dépendances
5-...
Nous voulons… produire un livrable
• Minification
• Optimisation
• Obfuscation
• Manifest HTML5
Intégration dans Jenkins
• Comme pour Maven / Gradle / Ant, nous allons créer un job qui va lancer
une commande !
Lance le...
Aperçu
En bref
• Notre projet pourra s’intégrer assez facilement dans les différentes
intégration continue
@YourTwitterHandle
Javascript as a 1st language
Un environnement de développement
performant
De l’outillage, ne pas réinventer la roue
Ecrire...
@YourTwitterHandle
Tout ça a dû vous faire peur …
Ou pire …
Néanmoins, il y a Yeoman
• Soutenu par les grands du monde Web
• Addy Osmany
• Paul Irish
• Sindre Sorhus
• …
• Il a pour ...
Créer son projet en un « click »
• Tout d’abord, il faut l’installer
• Ensuite, il faut installer un template
• Par exempl...
Ce qui nous donne
Et les templates sont légions
Pourquoi l’évoquer que maintenant
?
• Tout simplement pour ne pas brûler les étapes !
• Il y a beaucoup de nouvelles techn...
En bref
• L’utilisation de Yeoman est à préconiser:
• Quand vous avez des bonnes notions
• Personnellement, je passe plus ...
@YourTwitterHandle#DVXFR14{session hashtag}
Maven/Gradle
Commandes shell pour exécuter node.js
Maven : pl.allegro:grunt-maven-plugin
Gradle : com.moowork.gradle:gradl...
Et ailleurs ?
• Java 8 : Nashorn/nodyn
• Microsoft: du node partout, mais surtout dans azure !
• Python : encore du node
•...
Des outils
• Concevoir, développer, tester
• Sauvegarder/Archiver/Versioner
• Gérer les dépendances
• Compiler
• Exécuter ...
@YourTwitterHandle#DVXFR14{session hashtag}
En une phrase pour commencer
Période plutôt existante …
• Nous sommes dans une période charnière !
• De nombreuses technologies Web
• La révolution dan...
… où on pourra dire …
• Qu’il y a eu un avant et un après
2004 2014
Avec des bonnes nouvelles !!
En une phrase pour finir
@YourTwitterHandle#DVXFR14{session hashtag}
Ceux que nous n'avons pas cités
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !
Upcoming SlideShare
Loading in …5
×

Javascript as a first programming language : votre IC prête pour la révolution !

933 views
826 views

Published on

NodeJs, GruntJs, Bower, Karma, ... des buzzwords dont nous entendons parler, que nous voyons passer dans les blogs/articles. Mais à quoi servent-ils ?

Comment industrialiser nos développements Javascript ? Mettre en place des tests unitaires dans une application Web ? Générer de la documentation ? Des métriques qualités ? La couverture de code ? Comme avec Maven ? Nous verrons concrètement comment articuler tous ces outils autour d'une application école, pour démystifier tout ça.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
933
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Javascript as a first programming language : votre IC prête pour la révolution !

  1. 1. JavaScript as a first programming language votre IC prête pour la révolution Julien Roche Frédéric Dubois Frédéric Bouquet From Objet Direct
  2. 2. Julien Roche - @rochejul •Ingénieur d’étude Java, Web, Web Mobile / hybride chez Objet Direct depuis 6 ans •Formateur / consultant sur ces technologies
  3. 3. Frédéric Bouquet - @bouquetf Curieux Bidouilleur Open source Bonitasoft Objet Direct www.espacedefouille.org
  4. 4. Frédéric Dubois - @fduboisca http://www.devoxx.com/display/FR12/Pour+un+developpement+du rable 12 ans d’expérience Et tu développes encore ? So what !!?!!?! Qualité Agilité
  5. 5. TDDXP IC Coding rules check Sonar Refactoring
  6. 6. Le drame
  7. 7. La mort annoncée de Flash et autres Metro style browsing and plug-in free HTML5. … Many of the 62% of these sites that currently use Adobe Flash already fall back to HTML5 video in the absence of plug-in support Building Windows 8, avril 2011 Flash was created during the PC era – for PCs and mice. Flash is a successful business for Adobe, and we can understand why they want to push it beyond PCs. But the mobile era is about low power devices, touch interfaces and open web standards – all areas where Flash falls short. Steve Jobs, avril 2010
  8. 8. JavaScript ?!!!?!!!? C’est pas un langage orienté Objet…Prototype tu dis ? Pas de typage fort Pas de complétion, WTF! Les scripts c’est pour faire des moulinettes pas des applications!!
  9. 9. Expectative… puis finalement… 0 tests, 0 normes !!!
  10. 10. • Le fantôme, le zombie et testacular, panorama des outils de tests pour application web moderne • AngularJS, ou le futur du développement Web • Frontend Live Coding : Tour d'horizon de l'outillage et des technos web d'aujourd'hui • Developing Modern Web Apps With Backbone.js • Space Chatons: Bleeding Edge HTML5 • Live coding avec Yeoman & AngularJS • Du Javascript propre ? Challenge Accepted • Animez vos pages HTML5: un tour d'horizon complet des techniques d'animation en HTML5 • Creating Games with WebGL and Three.js
  11. 11. @YourTwitterHandle#DVXFR14{session hashtag}
  12. 12. Et bah moi en Java…
  13. 13. Et ils veulent me faire changer pour ça? IDE = Debug = Profiling = Test = Quality = Build = = Continuous Integration
  14. 14. Javascript as a 1st language Un environnement de développement performant De l’outillage, ne pas réinventer la roue Ecrire un backend Ecrire un frontend De qualité Avec des indicateurs remontés dans une IC
  15. 15. Pendant ces 2h1/2, nous allons Présenter une usine logicielle Javascript complète Autour d’une projet Web Il y aura, du code De la conf Des fantômes, des oiseaux, des phacochères, des
  16. 16. @YourTwitterHandle#DVXFR14{session hashtag}
  17. 17. Des outils • Concevoir, développer, tester • Sauvegarder/Archiver/Versioner • Gérer les dépendances • Compiler • Exécuter les tests • Vérifier la qualité du code produit • Documenter • Produire un livrable A chaque version
  18. 18. Big Picture dans le monde Java Produit Géré par Articulé autour de Testé avec Versione avec Peut utiliser
  19. 19. Big Picture dans le monde Web Produit Géré par Articulé autour de Testé avec Versione avec Peut utiliser ?? ? ?
  20. 20. @YourTwitterHandle#DVXFR14{session hashtag}
  21. 21. Un développeur sans IDE •C’est un peu comme MacGyver sans son couteau suisse
  22. 22. Et pourtant ! •Le développeur Web a longtemps été seul •Souvent, un simple Notepad++ était son meilleur outil
  23. 23. Mais cela a changé ! •Nous avons désormais un ensemble d’IDE à notre disposition pour nous aider !
  24. 24. Webstorm •Produit par Jetbrains •Spécialisé pour répondre au large panel de nouvelles technologies du Web
  25. 25. @YourTwitterHandle
  26. 26. Javascript as a 1st language Un environnement de développement performant De l’outillage, ne pas réinventer la roue Ecrire un backend Ecrire un frontend De qualité Avec des indicateurs remontés dans une IC
  27. 27. @YourTwitterHandle#DVXFR14{session hashtag}
  28. 28. Autrefois … • Si nous voulions gérer un projet pur JavaScript, nous étions seul au monde • … encore …
  29. 29. NodeJs – Et la force est avec nous ? • NodeJs est un outils écrit en C qui utilise JavaScript comme langage de script • Il offre une API importante pour gérer les streams, fichiers, … • Nous pouvons nous en servir en tant que serveur, mais aussi en tant qu’outils • Il est à la fois puissant et scalable • De nombreuses entreprises aux Etats-Unis l’utilisent en tant que serveur d’entreprise comme PayPal
  30. 30. Un exemple de serveur (1) var sys = require('sys'), httpServer = require('http'); httpServer.createServer(function(request,response){ response.writeHeader(200, { 'Content-Type': 'text/plain '}); response.write('Hello World'); response.end(); }); httpServer.listen(8080); sys.puts('Server Running on 8080');
  31. 31. Un exemple de serveur (2) var express = require('express'), app = express(), restPrefix = '/api', port = process.env.PORT || 9000; app.configure(function () { app.use(express.bodyParser()); app.use(express.static(__dirname)); // Our server is the local directory '.' }); app.get(restPrefix + '/users', function(req, res) { console.log('A request is done on /users on GET'); res.json([ { 'id': 1, 'firstName': 'John', 'lastName': 'Doe', 'age': 25 } ]); }); app.listen(port); console.log('Server started on port ' + port);
  32. 32. NodeJs – En tant qu’outils (1) • La simplicité et le choix de JavaScript a permis à de nombreux frameworks JavaScripts de proposer des outils • Evitant d’écrire des scripts Shell
  33. 33. NodeJs – En tant qu’outils (2) • Une pléthore de plugins sont alors apparus ! • Sans compter les très nombreux modules NodeJs qui sont là pour nous aider à concevoir d’autres modules NodeJs
  34. 34. Son repository • https://www.npmjs.org
  35. 35. Et ce n'est pas que pour les POCs • http://nodejs.org/industry
  36. 36. @YourTwitterHandle
  37. 37. Javascript as a 1st language Un environnement de développement performant De l’outillage, ne pas réinventer la roue Ecrire un backend Ecrire un frontend De qualité Avec des indicateurs remontés dans une IC
  38. 38. @YourTwitterHandle#DVXFR14{session hashtag}
  39. 39. @YourTwitterHandle#DVXFR14{session hashtag}
  40. 40. Sommaire • Marre du "alert('...');" • Initialiser un projet • Et pour mon jQuery ? • Organiser mon code • He’s alive ! ALIVE ! • Les tests et les rapports de qualités • Un petit coup de pouce ? • L’intégration dans une IC • One more thing
  41. 41. @YourTwitterHandle#DVXFR14{session hashtag}
  42. 42. Autrefois … •Le déboggage d’une application Web était plutôt compliqué … •Nous devions souvent mettre des instructions « alert » dans notre code pour voir le cheminement •Les erreurs remontées étaient souvent ardues à comprendre, ou alors n’indiquaient pas le bon emplacement
  43. 43. Néanmoins … •Des outils ont émergés pour essayer de nous aider •Firebug pour Firefox •Dynatrace Ajax edition •Log4JavaScript •Mais ils n’étaient pas suffisant
  44. 44. ChromeDevTools à l’aide •C’est un outils intégré dans Chrome •Il a pour but d’intégrer un large panel de fonctionnalités pour: •Débugger le JavaScript, HTML, CSS •Faire du monitoring réseau, mémoire •Simuler un environnement
  45. 45. Aperçu configurations
  46. 46. Aperçu pour la partie HTML
  47. 47. Aperçu pour la partie JavaScript
  48. 48. Pour le réseau, nous pouvons … •Connaître toutes les réseaux chargés •Avec le temps de chargement •Avec le statut réseau •Avec les entêtes et le corps de la requête •Avec les entêtes et le corps de la réponse
  49. 49. Et bien d’autres choses ! •Timeline pour voir les événements capturés et le temps de traitement chacun •Timeline pour connaître le temps d’affichage de la page •Timeline pour connaître la mémoire consommé •Profiling JavaScript •Profiling Canvas •Audit de son site Web •Console
  50. 50. Aperçu …
  51. 51. Aperçu …
  52. 52. Aperçu …
  53. 53. @YourTwitterHandle
  54. 54. @YourTwitterHandle#DVXFR14{session hashtag}
  55. 55. Que fait un gestionnaire de projet ? • Il a pour but de donner des informations sur le projet • Nom, auteur, version … • Il a pour but de gérer les dépendances • Pour mieux gérer le projet • Pour le projet lui-même • Il a pour but de lancer les tests unitaires • Il a pour but de déployer des versions
  56. 56. Et pour cela ?
  57. 57. @YourTwitterHandle
  58. 58. @YourTwitterHandle#DVXFR14{session hashtag}
  59. 59. Le gestionnaire de dépendances • Il a pour but de télécharger des modules / frameworks pour • Soit mieux gérer l’application • Soit pour l’application lui-même • Dans le cas où nous écrivons une application serveur, NodeJs suffit • Via NPM • Mais dans le cas d’une application cliente, comment faire ?
  60. 60. Bienvenue à Bower ! • Bower est un module NodeJs qui est orienté pour les solutions clientes • Comme Maven, • Il a une gestion de version • Il a gestion des dépendances • Ex: Si j’ai besoin de Backone.Marionette, je ne déclare que lui, et Bower ira télécharger la bonne version de Backbone et d’Underscore
  61. 61. Son repository • Il a son propre repository: http://bower.io/search
  62. 62. Que devons-nous faire ? • Il va falloir déclarer dans notre projet NodeJs que nous avons besoin de Bower • Nous allons avoir une nouvelle commande dans notre shell « bower » • Nous pourrons faire • « bower init » pour créer le fichier de description Bower • « bower install » pour déclarer / télécharger une dépendance à notre projet, modifier le fichier de description
  63. 63. @YourTwitterHandle
  64. 64. @YourTwitterHandle#DVXFR14{session hashtag}
  65. 65. Pallier un syndrôme bien connu • Souvent nous avons ça: • Autrement, nous avons une liste impressionnante de JavaScript à déclarer dans le bon ordre pour notre application ! <head> <title>Devoxx Application</title> <meta charset="utf-8" /> <script type="text/javascript" defer="defer" src="./frameworks/jquery.js"></script> <script type="text/javascript" defer="defer" src="./models/users.js"></script> <script type="text/javascript" defer="defer" src="./models/groups.js"></script> <script type="text/javascript" defer="defer" src="./models/commands.js"></script> <!-- To infinity ... and beyhond ! --> <script type="text/javascript" defer="defer" src="./main.js"></script> </head>
  66. 66. Ce qui nous amène à la question … • Comment devons-nous charger nos fichiers JavaScripts ? • Dans la balise HEAD ? • En bas de la balise BODY ? • En utilisant les attributs async (HTML5) ou defer ? • Via JavaScript, en injectant un nœud ? • Via JavaScript, en injectant un nœud, au moment de l’événement « Load », en utilisant « defer » ?
  67. 67. Et si on allait plus loin ? • Ne pourrions-nous pas avoir un framework qui fasse du chargement asynchrone • Chargement optimisé • Mais également • Une gestion de dépendances ? • Un chargement des templates ? • Une gestion de l’internalisation ? • Et qui soit léger ? • Une solution: RequireJS
  68. 68. RequireJS • Github: https://github.com/jrburke/requirejs • Documentation: http://requirejs.org/ • Compatible sur la quasi-totalité des navigateurs • IE6+, Firefox 2+, Safari 3.2+, Chrome 3+, Opera 10+ • Repose sur l’AMD: • Asynchronous Module Definition: https://github.com/amdjs/amdjs- api/wiki/AMD • Repose sur deux méthodes: Define et Require
  69. 69. Un aperçu … define( ["mypreviousmodule", "myanotherpreviousmodule"], function(a, b){ // Do something // Return something return { "a": "a" }; } ); • Et il existe un grand nombre de plugins • Pour charger des templates, les compiler avec Underscore • Pour gérer l’internalisation • Pour charger une image • Pour charger des API Google • …
  70. 70. Optimisation • RequireJS a un plugin NodeJS permettant • De concaténer et de minifier les fichiers JavaScripts • Et cela en respectant l’ordre de chargement des modules et de leurs dépendances • Il suffit alors de l’installer • Et de le lancer ! > npm install -g requirejs > node r.js -o baseUrl=. paths.requireLib=../require name=main include=requireLib out=main-built.js
  71. 71. @YourTwitterHandle
  72. 72. @YourTwitterHandle#DVXFR14{session hashtag}
  73. 73. Votre projet vit • Un gestionnaire de projet propose en générale un cycle de vie • Pour télécharger les dépendances • Pour nettoyer son projet • Pour lancer les tests • Pour lancer les rapports de qualités • Pour générer la documentation • Pour compiler votre application • Pour le développement ou la production • Pour distribuer l’application
  74. 74. Jetons un œil chez Maven 3.2.1
  75. 75. Et chez Gradle ?
  76. 76. Et chez NodeJs • Nous allons un petit cycle de vie que nous définissons dans le package.json et qui a pour but de lancer des commandes: • prepublish, publish • presintall, install, postinstall • preuninstall, uninstall, postuninstall • pretest, test, posttest • …
  77. 77. Exemple:
  78. 78. Néanmoins … • Ce cycle de vie n’est pas toujours très adapté • Quelles solutions aurions-nous ? • Utiliser des solutions comme Maven, Gradle, Ant ? • Pas très adapté car plutôt pour le monde Java • Ou alors existe-t-il une solution dans le monde NodeJs
  79. 79. Solution: GruntJs • GruntJs est un module NodeJs qui propose un peu comme Ant d’exécuter des « tâches » • Une tâche étant soit un script JavaScript, soit un plugin GruntJs • Pour ce faire, GruntJs vous propose une API assez riche pour créer vos propres plugins • Beaucoup de modules NodeJs possède leur propre plugin GruntJs • Less, JsHint, RequireJs, Bower, Karma …
  80. 80. GruntJs et son API
  81. 81. GruntJs et ses plugins officiels • grunt-contrib: pour avoir tous les plugins officiels • grunt-contrib-clean • grunt-contrib-compress • grunt-contrib-concat • grunt-contrib-copy • grunt-contrib-cssmin • grunt-contrib-csslint • grunt-contrib-htmlmin • grunt-contrib-imagemin • grunt-contrib-jshint • …
  82. 82. @YourTwitterHandle
  83. 83. @YourTwitterHandle#DVXFR14{session hashtag}
  84. 84. Parent / enfant • Nous avons la notion de projets parent / enfants • Où un enfant est un sous-ensemble • Où le parent regroupe ses enfants • Avec le monde NodeJs, sera tout à fait possible • Et cela assez simplement
  85. 85. On obtient une transversalité ! • Un même technologie partout
  86. 86. Et pour ce faire • Si nous voulons étendre un module backend: utilisation de NodeJs • Si nous voulons étendre un module frontend: utilisation de Bower
  87. 87. @YourTwitterHandle
  88. 88. Javascript as a 1st language Un environnement de développement performant De l’outillage, ne pas réinventer la roue Ecrire un backend Ecrire un frontend De qualité Avec des indicateurs remontés dans une IC
  89. 89. @YourTwitterHandle#DVXFR14{session hashtag}
  90. 90. Nos exigences qualités • En règle générale, nous aimons bien avoir: • Des rapports sur nos tests • Des rapports sur la couverture de code • De la génération de documentation • Des rapports sur la qualité du code et le bon respect des conventions • …
  91. 91. Dans le monde Java • Cela se traduit par: • Des rapports Junit • Des rapports Cobertura • De la JavaDoc / Oxygen • Des rapports Checktyle, PMD, …
  92. 92. Dans le monde du Web • Autant dans le monde Java, nous validons du Java • Autant dans le monde du Web, nous validons: • De l’HTML • Du CSS / Less / Compass • Du JavaScript / CoffeeScript / TypeScript / Dart • … • Ce qui demande un outillage plus important
  93. 93. @YourTwitterHandle#DVXFR14{session hashtag}
  94. 94. Ce que nous voulons faire Des TUs Des TFs Ecrire Les exécuter Dans un navigateur headless Pour produire <XML/ > Et alimenter
  95. 95. Ecrire des tests Jasmine pour les tests unitaires • Syntaxe BDD, assertions et mock • Intégration avec les tests runner frontend et backend (On aurait pu aussi utiliser qunit, mocha, chai, nodeunit, etc.) CasperJS • Navigation sur une application web • Evaluation dans le contexte du navigateur (On aurait pu aussi utiliser ZombieJS, WebDriverJS, Protractor ou Selenium)
  96. 96. Karma à la rescousse Son objectif: exécuter les tests dans un navigateur Avantages • Gère plusieurs frameworks de tests (Jasmine, Mocka …) • Permet l’exécution dans plusieurs navigateurs (PhantomJs , Chrome, Firefox…) • Supporte les principaux frameworks (RequireJs, Angular, …) • Génère des rapports • Compatible xunit pour les tests • Compatible Cobertura pour la couverture de code
  97. 97. PhantomJs • Nous utilisons souvent Karma avec PhantomJs • Basé sur Webkit NAVIGATEUR HEADLESS = ! AUTOMATISATION!
  98. 98. @YourTwitterHandle
  99. 99. @YourTwitterHandle#DVXFR14{session hashtag}
  100. 100. Elle est où la doc ? JSDoc 3
  101. 101. Oui mais Web = JS + HTML, CSS, etc Normes de développement ? • Nous avions JsLint (initié par Douglas Crokford) qui permettait de faire la qualité de code sur le JavaScript • Remplacé par JsHint qui va plus loin Pour les autres technologies, nous avons souvent un équivalent de XLint / XHint: … Batch + intégration IDE
  102. 102. Reporting • Et en règle générale, un générateur de rapport se disant « Lint » ou « Hint » génère souvent un fichier de type Checkstyle • Dans le cas de notre usine, il nous suffit de trouver ceux ayant un plugin grunt • grunt-contrib-jshint • grunt-htmlhint • grunt-contrib-csslint • grunt-lesshint • grunt-coffeehint • …
  103. 103. @YourTwitterHandle
  104. 104. Javascript as a 1st language Un environnement de développement performant De l’outillage, ne pas réinventer la roue Ecrire un backend Ecrire un frontend De qualité Avec des indicateurs remontés dans une IC
  105. 105. @YourTwitterHandle#DVXFR14{session hashtag}
  106. 106. Nous voulons… valider JSDoc 3 2- compiler 3 -analyser 4- documenter Checkstyle reports 1- Mettre à jour les dépendances 5- tester Junit & cobertura reports
  107. 107. Nous voulons… produire un livrable • Minification • Optimisation • Obfuscation • Manifest HTML5
  108. 108. Intégration dans Jenkins • Comme pour Maven / Gradle / Ant, nous allons créer un job qui va lancer une commande ! Lance les tests avec Récupère le code avec récupère les dépendances projets et de l’application avec Publie les rapports de tests, qualités Produit la documentation Tag l’application …
  109. 109. Aperçu
  110. 110. En bref • Notre projet pourra s’intégrer assez facilement dans les différentes intégration continue
  111. 111. @YourTwitterHandle
  112. 112. Javascript as a 1st language Un environnement de développement performant De l’outillage, ne pas réinventer la roue Ecrire un backend Ecrire un frontend De qualité Avec des indicateurs remontés dans une IC
  113. 113. @YourTwitterHandle
  114. 114. Tout ça a dû vous faire peur …
  115. 115. Ou pire …
  116. 116. Néanmoins, il y a Yeoman • Soutenu par les grands du monde Web • Addy Osmany • Paul Irish • Sindre Sorhus • … • Il a pour objectif de vous faciliter la vie • En vous proposant un moteur de génération basé sur des templates • En vous permettant de créer des templates !
  117. 117. Créer son projet en un « click » • Tout d’abord, il faut l’installer • Ensuite, il faut installer un template • Par exemple un pour créer des sites Web • Nous allons pouvoir alors demander de créer un template de type « webapp » npm install -g yo npm install -g generator-webapp yo webapp
  118. 118. Ce qui nous donne
  119. 119. Et les templates sont légions
  120. 120. Pourquoi l’évoquer que maintenant ? • Tout simplement pour ne pas brûler les étapes ! • Il y a beaucoup de nouvelles technologies • Il y a beaucoup de finesses et de notions à connaître • Si nous allons directement à Yeoman • Nous serons un peu perdu sur comment modifier les fichiers • Nous ne saurons pas quoi faire en cas de « bug » • Nous ne saurons pas à quoi corresponde tel ou tel chose
  121. 121. En bref • L’utilisation de Yeoman est à préconiser: • Quand vous avez des bonnes notions • Personnellement, je passe plus de temps à déconfigurer ce qu’ils proposent, du coup, je l’utilise rarement  • Quand vous souhaitez créer vos propres templates pour vos projets
  122. 122. @YourTwitterHandle#DVXFR14{session hashtag}
  123. 123. Maven/Gradle Commandes shell pour exécuter node.js Maven : pl.allegro:grunt-maven-plugin Gradle : com.moowork.gradle:gradle-grunt-plugin Cycles de vie ! Packaging
  124. 124. Et ailleurs ? • Java 8 : Nashorn/nodyn • Microsoft: du node partout, mais surtout dans azure ! • Python : encore du node • Rails/Grails/… : des tags et des plugins
  125. 125. Des outils • Concevoir, développer, tester • Sauvegarder/Archiver/Versioner • Gérer les dépendances • Compiler • Exécuter les tests • Vérifier la qualité du code produit • Documenter • Produire un livrable A chaque version
  126. 126. @YourTwitterHandle#DVXFR14{session hashtag}
  127. 127. En une phrase pour commencer
  128. 128. Période plutôt existante … • Nous sommes dans une période charnière ! • De nombreuses technologies Web • La révolution dans le navigateur • La guerre des navigateurs • Le JavaScript qui évolue lentement mais sûrement dans le bon sens • Adoption de Ecmacscript 6 en cours • Définition de Ecmascript 7
  129. 129. … où on pourra dire … • Qu’il y a eu un avant et un après 2004 2014
  130. 130. Avec des bonnes nouvelles !!
  131. 131. En une phrase pour finir
  132. 132. @YourTwitterHandle#DVXFR14{session hashtag}
  133. 133. Ceux que nous n'avons pas cités

×