SlideShare une entreprise Scribd logo
Du JavaScript propre ?
 Challenge Accepted!


    10h40 - 11h30 - La Seine B
propre ?
        Challenge
        Accepted!


  Julien          Romain Linsolas
Jakubowski          Société Générale
OCTO Technology
                    @romaintaz         27 au 29 mars 2013
Romain Linsolas
 Développeur Java & Web
 Architecte Technique


 @romaintaz
Julien Jakubowski
 Développeur Java & Web depuis 10 ans

 @jak78
Nous ne sommes pas…
     Des gourous JavaScript

     John Resig - jQuery


     Douglas Crockford – JSLint,
        "JavaScript, The Good Parts"
Parlons de JavaScript entre
Javaïstes




JavaScript is to Java as Hamster is to Ham
http://coding.smashingmagazine.com/2009/07/29/misunderstanding-
  markup-xhtml-2-comic-strip/
Nous allons aussi parler de…




  Darth Vader   Bière   Maroilles
Pourquoi cette
présentation ?
En 2003
Le JavaScript est partout !

Runtime le plus distribué
Mobilité
Même côté serveur
(        , …)
Les grands du web
Les grands du web
Nouveaux besoins
Les utilisateurs veulent des applications
 vivantes, réactives et dynamiques !

Enjeu de qualité
Volume de code important


 Fini de jouer !
100,000 lignes de code
JavaScript ?




                 Young man hidden behind table - © 2011 Richard Hernández Arrondo
Pourquoi ça fait peur ?


Le JavaScript
c'est
   surprenant
   SALE
WAT ?
 > [] + []
  ""
 > [] + {}
  [object Object]
 > {} + []
  0
 > {} + {}
  NaN
 > ++[[]][+[]]+[+[]] === "10"
  true
W A
             T???
Gary Bernhardt
http://codemash.org
https://www.destroyallsoftware.com/talks/wat
Darth Vader   Bière   Maroilles
Autre problème JavaScript



             A T
           W
            ? ??
Pollution de l'espace de nommage
Scope global par défaut
Tout est public par défaut
Darth Vader   Bière   Maroilles
Et ce n'est pas tout !

Le mot clé this (plus surprenant
que sale)
Ordre de déclaration de var
Etc.
Mais le plus sale

Pollution de l'espace de
nommage
Tout est global par défaut
Code non testé
Oui mais…
JavaScript Devoxx France 2013
Nous allons aussi parler de…




  Darth Vader   Bière   Maroilles
Comment coder
 proprement
100,000 lignes
en JavaScript ?
On pourrait éviter le
JavaScript…
 Déléguer
• GWT
• JSF
• Vaadin
• Etc.
On peut aussi "améliorer"
JavaScript


Langage web orienté objet pour Un JavaScript à l’écriture
combler les lacunes de         simplifiée
JavaScript
Exemple de CoffeeScript
JavaScript
Architectures MV*
Architecture MVC classique
                     <html>
                       +
                       JS


  Client                   Asynchrone
  Serveur
                    Controller


            Model                View
Mes besoins aujourd'hui

Temps de réponse instantané
Gestion de réseaux lents
(mobiles…)
Mode déconnecté
Architecture MV* en
JavaScript
            View           Controller


                   Model

  Client
  Serveur
                    …
Question implémentation




Frameworks optionnels, mais aident beaucoup
Pas encore de standard
Modulariser
Qu'est-ce qu'un module ?

Représente un ensemble de
code
Isolation – faible couplage
Présente une interface
Un module basique -
Présentation
Un module basique
Un module basique
Un module basique
Un module basique
Un module basique
Un module basique
Espace de nommage
Diviser en plusieurs fichiers
.js ?




     Temps de chargement
     Pas de gestion des dépendances
AMD, Asynchronous Module
Definition
Définition de dépendances



            jQuery
                     beers.j
                       s
           Mustac
            he
AMD, Asynchronous Module
Definition
Chargements parallèles, à la demande


          jQuery Mustac beers. sodas.j
                  he      js     s

          jQuery
                   beers.j
          Mustac     s
           he
Eviter les parties sales




                   http://www.gettyimages.fr/detail/photo/hands-of-a-blacksmith-in-his-studio-image-libre-de-droits/10988929
JsLint

Détection des ugly parts
Equivalent à PMD / Checkstyle /
FindBugs pour JS
Intégration dans les IDE
Intégration dans Eclipse
Expressivité




               http://www.gettyimages.fr/detail/photo/detail-of-sheet-music-image-libre-de-droits/AA00480
Qu'est-ce qu'un code expressif
?

C'est un code simple,
           concis,
          lisible
Mauvais exemple




Pollution
     , mauvaise lisibilité
                    => SALE
Avec




Pas de pollution
Lisibilité accrue
Code propre
jQuery, c'est surtout :
• Lisibilité du code, expressivité
• Simplification de ce qui est utile : manipulation du
DOM, Ajax…


Mais aussi :
• Structuration du code en plugins
• Nombreux plugins existants
Templates
A la main
Avec template (Mustache.js)
Outils de templating


    Mustache
Tests automatisés
Tests d'IHM



     Selenium        Windmill
    Conditions réelles
    Pas vraiment adapté au TDD
TDD pour JavaScript
  En Java     En JavaScript



   TestNG
Tests avec Jasmine
Ecosystème




University « Le fantôme, le zombie et Testacular… »
Jean-Laurent De Morlhon et Pierre Gayvallet
TDD en JavaScript
Automatisation
Détecter et alerter

 Quand un test échoue
                              Jasmine
 Quand une partie sale est    JsLint
 utilisée
                              Google Closure
 S'il y a une erreur de
                             Compiler
 syntaxe
 Intégration dans Maven, Jenkins ou Sonar
Intégration continue avec
Jenkins

           http://localhost:8080/job/Test%20Jasmine/1/consol
Analyse qualité avec Sonar
D'autres outils utiles
100,000 lignes de
JavaScript ?

     MV*         Modules    Parties sales
                              évitées



  Expressivité    Tests    Automatisation
Le monde des bisounours ?
Le monde des bisounours ?
Oui mais non !

                Intégration
                Pérennité
                Apprentissage
Businessman sitting at desk with feet up - Paul Bradbury
Références
                  Eloquent JavaScript
      http://eloquentjavascript.net/contents.html

                   JavaScript Garden
    http://bonsaiden.github.com/JavaScript-Garden/

       Learning Advanced JavaScript - J. Resig
              http://ejohn.org/apps/learn/

        JavaScript: the Good Parts - D. Crockford
Questions ?




@jak78        @romaintaz

Contenu connexe

Tendances

NodeJs in real life
NodeJs in real lifeNodeJs in real life
NodeJs in real life
Willy Leloutre
 
Intégration Continue et PHP
Intégration Continue et PHPIntégration Continue et PHP
Intégration Continue et PHP
Oswald De Riemaecker ☁
 
Backday xebia - Chercher la performance efficacement
Backday xebia - Chercher la performance efficacement Backday xebia - Chercher la performance efficacement
Backday xebia - Chercher la performance efficacement
Publicis Sapient Engineering
 
Lbv Dev Meetup #2
 Lbv Dev Meetup #2 Lbv Dev Meetup #2
Lbv Dev Meetup #2
LbvDev
 
Petit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIs
Petit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIsPetit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIs
Petit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIs
OCTO Technology
 
Enib cours c.a.i. web - séance #6 : introduction à node js
Enib   cours c.a.i. web - séance #6 : introduction à node jsEnib   cours c.a.i. web - séance #6 : introduction à node js
Enib cours c.a.i. web - séance #6 : introduction à node js
Horacio Gonzalez
 
Introduction àJava
Introduction àJavaIntroduction àJava
Introduction àJava
Christophe Vaudry
 
EcmaScript
EcmaScriptEcmaScript
EcmaScript
Dagbouj Hatem
 
Outillage pour Windows 8 XAML
Outillage pour Windows 8 XAMLOutillage pour Windows 8 XAML
Outillage pour Windows 8 XAML
Microsoft
 

Tendances (9)

NodeJs in real life
NodeJs in real lifeNodeJs in real life
NodeJs in real life
 
Intégration Continue et PHP
Intégration Continue et PHPIntégration Continue et PHP
Intégration Continue et PHP
 
Backday xebia - Chercher la performance efficacement
Backday xebia - Chercher la performance efficacement Backday xebia - Chercher la performance efficacement
Backday xebia - Chercher la performance efficacement
 
Lbv Dev Meetup #2
 Lbv Dev Meetup #2 Lbv Dev Meetup #2
Lbv Dev Meetup #2
 
Petit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIs
Petit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIsPetit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIs
Petit déjeuner OCTO Technology - Nouvelles Architectures Web Front-End et APIs
 
Enib cours c.a.i. web - séance #6 : introduction à node js
Enib   cours c.a.i. web - séance #6 : introduction à node jsEnib   cours c.a.i. web - séance #6 : introduction à node js
Enib cours c.a.i. web - séance #6 : introduction à node js
 
Introduction àJava
Introduction àJavaIntroduction àJava
Introduction àJava
 
EcmaScript
EcmaScriptEcmaScript
EcmaScript
 
Outillage pour Windows 8 XAML
Outillage pour Windows 8 XAMLOutillage pour Windows 8 XAML
Outillage pour Windows 8 XAML
 

En vedette

Proyecto uno
Proyecto unoProyecto uno
Proyecto uno
Gabii
 
Freinet
FreinetFreinet
Freinet
NazaretAG
 
Sylvie noguer rcmq 12 mai 2011
Sylvie noguer rcmq 12 mai 2011Sylvie noguer rcmq 12 mai 2011
Sylvie noguer rcmq 12 mai 2011
Cariatis Inc.
 
Expo garfos
Expo garfosExpo garfos
Avenged Sevenfold
Avenged SevenfoldAvenged Sevenfold
Avenged Sevenfold
Cau_A7x
 
Dispositivo pedagogico didactico
Dispositivo pedagogico didacticoDispositivo pedagogico didactico
Dispositivo pedagogico didactico
Maraflorencia
 
Presentación1
Presentación1Presentación1
Presentación1
tolocu
 
100m borbo henrique
100m borbo henrique100m borbo henrique
100m borbo henrique
manekomoraes
 
Malou
MalouMalou
A mis amigos
A mis amigosA mis amigos
A mis amigos
Dann ArCel
 
Un Sans Abrismar
Un Sans AbrismarUn Sans Abrismar
Un Sans Abrismar
guest2f8f1e
 
Curso rni-tel-unmsm-sept- 2010 - dia 2-sesion-2
Curso  rni-tel-unmsm-sept- 2010 - dia 2-sesion-2Curso  rni-tel-unmsm-sept- 2010 - dia 2-sesion-2
Curso rni-tel-unmsm-sept- 2010 - dia 2-sesion-2
ceiiee
 
ALEJANDRA LONGA- 6-China
ALEJANDRA LONGA- 6-ChinaALEJANDRA LONGA- 6-China
ALEJANDRA LONGA- 6-China
alelonga
 
Uriarte 2419 - Brochure
Uriarte 2419 - BrochureUriarte 2419 - Brochure
Uriarte 2419 - Brochure
Adrian Silberman
 
DotNetNuke aux TechDays 2012
DotNetNuke aux TechDays 2012DotNetNuke aux TechDays 2012
DotNetNuke aux TechDays 2012
Cyril P
 
Presentacin1 mario benedetti
Presentacin1 mario benedettiPresentacin1 mario benedetti
Presentacin1 mario benedetti
karla santos
 
El que hacer filosofico
El que hacer filosoficoEl que hacer filosofico
El que hacer filosofico
Yuli Vanessa Gallego Galindo
 

En vedette (20)

Proyecto uno
Proyecto unoProyecto uno
Proyecto uno
 
Freinet
FreinetFreinet
Freinet
 
Sylvie noguer rcmq 12 mai 2011
Sylvie noguer rcmq 12 mai 2011Sylvie noguer rcmq 12 mai 2011
Sylvie noguer rcmq 12 mai 2011
 
Expo garfos
Expo garfosExpo garfos
Expo garfos
 
Avenged Sevenfold
Avenged SevenfoldAvenged Sevenfold
Avenged Sevenfold
 
Dispositivo pedagogico didactico
Dispositivo pedagogico didacticoDispositivo pedagogico didactico
Dispositivo pedagogico didactico
 
Presentación1
Presentación1Presentación1
Presentación1
 
100m borbo henrique
100m borbo henrique100m borbo henrique
100m borbo henrique
 
Juanto-Coslada
Juanto-CosladaJuanto-Coslada
Juanto-Coslada
 
Habits1
Habits1Habits1
Habits1
 
Malou
MalouMalou
Malou
 
A mis amigos
A mis amigosA mis amigos
A mis amigos
 
Un Sans Abrismar
Un Sans AbrismarUn Sans Abrismar
Un Sans Abrismar
 
Curso rni-tel-unmsm-sept- 2010 - dia 2-sesion-2
Curso  rni-tel-unmsm-sept- 2010 - dia 2-sesion-2Curso  rni-tel-unmsm-sept- 2010 - dia 2-sesion-2
Curso rni-tel-unmsm-sept- 2010 - dia 2-sesion-2
 
ALEJANDRA LONGA- 6-China
ALEJANDRA LONGA- 6-ChinaALEJANDRA LONGA- 6-China
ALEJANDRA LONGA- 6-China
 
Sondage ETF - Août 2011
Sondage ETF - Août 2011Sondage ETF - Août 2011
Sondage ETF - Août 2011
 
Uriarte 2419 - Brochure
Uriarte 2419 - BrochureUriarte 2419 - Brochure
Uriarte 2419 - Brochure
 
DotNetNuke aux TechDays 2012
DotNetNuke aux TechDays 2012DotNetNuke aux TechDays 2012
DotNetNuke aux TechDays 2012
 
Presentacin1 mario benedetti
Presentacin1 mario benedettiPresentacin1 mario benedetti
Presentacin1 mario benedetti
 
El que hacer filosofico
El que hacer filosoficoEl que hacer filosofico
El que hacer filosofico
 

Similaire à JavaScript Devoxx France 2013

Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
OCTO Technology
 
Octo RefCard test front-end
Octo RefCard test front-endOcto RefCard test front-end
Octo RefCard test front-end
Clément Dubois
 
Octo Technology - Refcard Tests Web front-end
Octo Technology - Refcard Tests Web front-endOcto Technology - Refcard Tests Web front-end
Octo Technology - Refcard Tests Web front-end
François Petitit
 
Javascript proprement
Javascript proprementJavascript proprement
Javascript proprement
Guillaume Collic
 
RefCard Tests sur tous les fronts
RefCard Tests sur tous les frontsRefCard Tests sur tous les fronts
RefCard Tests sur tous les fronts
OCTO Technology
 
Domain-Specific Languages avec Groovy
Domain-Specific Languages avec GroovyDomain-Specific Languages avec Groovy
Domain-Specific Languages avec Groovy
Guillaume Laforge
 
.Net pour le développeur Java - une source d'inspiration?
.Net pour le développeur Java - une source d'inspiration?.Net pour le développeur Java - une source d'inspiration?
.Net pour le développeur Java - une source d'inspiration?
Rui Carvalho
 
JavaScript aussi sur le serveur et jusque dans le cloud?
JavaScript aussi sur le serveur et jusque dans le cloud?JavaScript aussi sur le serveur et jusque dans le cloud?
JavaScript aussi sur le serveur et jusque dans le cloud?
Microsoft
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
Adyax
 
JavaScript aussi sur le serveur et jusque dans le cloud?
JavaScript aussi sur le serveur et jusque dans le cloud?JavaScript aussi sur le serveur et jusque dans le cloud?
JavaScript aussi sur le serveur et jusque dans le cloud?
benjguin
 
Server Side Javascript in the cloud
Server Side Javascript in the cloudServer Side Javascript in the cloud
Server Side Javascript in the cloud
stefounet
 
Usine Logicielle 2013
Usine Logicielle 2013Usine Logicielle 2013
Usine Logicielle 2013
Stéphane Liétard
 
.NET Microframework, les joies de l'électronique et du code pour tous
.NET Microframework, les joies de l'électronique et du code pour tous.NET Microframework, les joies de l'électronique et du code pour tous
.NET Microframework, les joies de l'électronique et du code pour tous
Microsoft
 
Une introduction à Javascript
Une introduction à JavascriptUne introduction à Javascript
Une introduction à Javascript
Jean Michel
 
Rouabhi algiers meetup
Rouabhi algiers meetupRouabhi algiers meetup
Rouabhi algiers meetup
Samir Rouabhi
 
Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"
Adyax
 
Mesurer la performance dans le milieu hostile du développement Java
Mesurer la performance dans le milieu hostile du développement JavaMesurer la performance dans le milieu hostile du développement Java
Mesurer la performance dans le milieu hostile du développement Java
Antonio Gomes Rodrigues
 
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebUne visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Frédéric Harper
 
Meetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances LiferayMeetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances Liferay
Sébastien Le Marchand
 
Comparatif des frameworks js mv
Comparatif des frameworks js mvComparatif des frameworks js mv
Comparatif des frameworks js mv
Mael Monnier
 

Similaire à JavaScript Devoxx France 2013 (20)

Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
 
Octo RefCard test front-end
Octo RefCard test front-endOcto RefCard test front-end
Octo RefCard test front-end
 
Octo Technology - Refcard Tests Web front-end
Octo Technology - Refcard Tests Web front-endOcto Technology - Refcard Tests Web front-end
Octo Technology - Refcard Tests Web front-end
 
Javascript proprement
Javascript proprementJavascript proprement
Javascript proprement
 
RefCard Tests sur tous les fronts
RefCard Tests sur tous les frontsRefCard Tests sur tous les fronts
RefCard Tests sur tous les fronts
 
Domain-Specific Languages avec Groovy
Domain-Specific Languages avec GroovyDomain-Specific Languages avec Groovy
Domain-Specific Languages avec Groovy
 
.Net pour le développeur Java - une source d'inspiration?
.Net pour le développeur Java - une source d'inspiration?.Net pour le développeur Java - une source d'inspiration?
.Net pour le développeur Java - une source d'inspiration?
 
JavaScript aussi sur le serveur et jusque dans le cloud?
JavaScript aussi sur le serveur et jusque dans le cloud?JavaScript aussi sur le serveur et jusque dans le cloud?
JavaScript aussi sur le serveur et jusque dans le cloud?
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
 
JavaScript aussi sur le serveur et jusque dans le cloud?
JavaScript aussi sur le serveur et jusque dans le cloud?JavaScript aussi sur le serveur et jusque dans le cloud?
JavaScript aussi sur le serveur et jusque dans le cloud?
 
Server Side Javascript in the cloud
Server Side Javascript in the cloudServer Side Javascript in the cloud
Server Side Javascript in the cloud
 
Usine Logicielle 2013
Usine Logicielle 2013Usine Logicielle 2013
Usine Logicielle 2013
 
.NET Microframework, les joies de l'électronique et du code pour tous
.NET Microframework, les joies de l'électronique et du code pour tous.NET Microframework, les joies de l'électronique et du code pour tous
.NET Microframework, les joies de l'électronique et du code pour tous
 
Une introduction à Javascript
Une introduction à JavascriptUne introduction à Javascript
Une introduction à Javascript
 
Rouabhi algiers meetup
Rouabhi algiers meetupRouabhi algiers meetup
Rouabhi algiers meetup
 
Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"
 
Mesurer la performance dans le milieu hostile du développement Java
Mesurer la performance dans le milieu hostile du développement JavaMesurer la performance dans le milieu hostile du développement Java
Mesurer la performance dans le milieu hostile du développement Java
 
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebUne visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
 
Meetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances LiferayMeetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances Liferay
 
Comparatif des frameworks js mv
Comparatif des frameworks js mvComparatif des frameworks js mv
Comparatif des frameworks js mv
 

Plus de Romain Linsolas

Devoxx France 2015 - Développement web en 2015
Devoxx France 2015 - Développement web en 2015Devoxx France 2015 - Développement web en 2015
Devoxx France 2015 - Développement web en 2015
Romain Linsolas
 
Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2
Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2
Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2
Romain Linsolas
 
Devoxx 2014 - JavaScript tooling - Don't be naked in front of JavaScript
Devoxx 2014 - JavaScript tooling - Don't be naked in front of JavaScriptDevoxx 2014 - JavaScript tooling - Don't be naked in front of JavaScript
Devoxx 2014 - JavaScript tooling - Don't be naked in front of JavaScript
Romain Linsolas
 
Devoxx france 2014 - Création d'un web component avec Google Polymer
Devoxx france 2014 - Création d'un web component avec Google PolymerDevoxx france 2014 - Création d'un web component avec Google Polymer
Devoxx france 2014 - Création d'un web component avec Google Polymer
Romain Linsolas
 
Devoxx 2013 JavaScript Software Factory
Devoxx 2013 JavaScript Software FactoryDevoxx 2013 JavaScript Software Factory
Devoxx 2013 JavaScript Software Factory
Romain Linsolas
 
Devoxx 2012 hibernate envers
Devoxx 2012   hibernate enversDevoxx 2012   hibernate envers
Devoxx 2012 hibernate envers
Romain Linsolas
 
Devoxx java script-1280-720
Devoxx java script-1280-720Devoxx java script-1280-720
Devoxx java script-1280-720
Romain Linsolas
 

Plus de Romain Linsolas (8)

Devoxx France 2015 - Développement web en 2015
Devoxx France 2015 - Développement web en 2015Devoxx France 2015 - Développement web en 2015
Devoxx France 2015 - Développement web en 2015
 
Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2
Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2
Devoxx France 2015 - Se préparer à l'arrivée d'Angular 2
 
Devoxx 2014 - JavaScript tooling - Don't be naked in front of JavaScript
Devoxx 2014 - JavaScript tooling - Don't be naked in front of JavaScriptDevoxx 2014 - JavaScript tooling - Don't be naked in front of JavaScript
Devoxx 2014 - JavaScript tooling - Don't be naked in front of JavaScript
 
Devoxx france 2014 - Création d'un web component avec Google Polymer
Devoxx france 2014 - Création d'un web component avec Google PolymerDevoxx france 2014 - Création d'un web component avec Google Polymer
Devoxx france 2014 - Création d'un web component avec Google Polymer
 
Devoxx 2013 JavaScript Software Factory
Devoxx 2013 JavaScript Software FactoryDevoxx 2013 JavaScript Software Factory
Devoxx 2013 JavaScript Software Factory
 
Devoxx 2012 hibernate envers
Devoxx 2012   hibernate enversDevoxx 2012   hibernate envers
Devoxx 2012 hibernate envers
 
Devoxx test ng
Devoxx test ngDevoxx test ng
Devoxx test ng
 
Devoxx java script-1280-720
Devoxx java script-1280-720Devoxx java script-1280-720
Devoxx java script-1280-720
 

JavaScript Devoxx France 2013

Notes de l'éditeur

  1. Ceci dit, en tant que dev Java, on utilise souvent des technos web, et on est automatiquement amenés à en faire.
  2. Aujourd ’ hui je ne fais plus de JS comme ça, il y a au moins 4 ou 5 défauts majeurs dans ce code. A l ’ issue de cette présentation, vous saurez les identifier. Et maintenant…
  3. Chiffre de 99% pas à jour, mais en 2010, 2% désactivés aux US
  4. Ergonomie riche, nécessite de plus en plus de choses sur le client Offline
  5. Adresser JavaScript aussi sérieusement que Java et autres
  6. Julien: &quot;parce que ce langage a un côté sale.&quot;. Romain: &quot;Je dirais plutôt surprenant&quot;…
  7. C ’ est la dernière qui gagne. Si vous faites du chargement async, ça dépend aussi de l ’ âge du capitaine
  8. Où est le bug ?
  9. Rester sur le code un peu... Pourquoi c ’ est un pb: mes appelants dépendent trop de moi, couplage fort, changements instables. On ne fait pas toujours une API -&gt; aspect documentaire, pour moi-même ou ceux qui vont maintenir: quels sont les points d ’ entrée, comment on utilise cet objet counter ?
  10. Romain: “J ’ ai parlé de principaux problèmes avec mon application de bière. C ’ était facile avec un exemple de code, c ’ est de la triche. “ Julien: « OK mais ce n’est pas tout… »
  11. Julien: &quot;effectivement, c&apos;est surprenant comme tu dis. Et en plus ce n&apos;estpas tout…&quot;
  12. Le plus dangereux
  13. Quand on fait du JavaScript, au premier contact, ça pue. Mais quand on y a vraiment goûté, c ’ est pas si mal. Au début ça pue mais il faut gouter pour l ’ apprécier. Ca vous fait penser à quoi ce que je viens de dire ?
  14. Julien: &quot;comment coder proprement ces 100 000 lignes&quot; Romain: &quot;tu pourrais carrément éviter le JavaScript…&quot;
  15. Il existe des moyens de ne pas faire de JS. Vous connaissez sans doute... Je n ’ en parle pas car hors-périmètre de ma présentation. A votre dispo à la bière tout à l ’ heure.
  16. Google Dart = Langage orienté objet JS par Google. Ce qu&apos;aurait pu être JS si inventé aujourd&apos;hui. CoffeeScript = extension au JS pour coder proprement certaines parties répétitives. Eviter les lourdeurs du code JS
  17. Classiquement pour le côté serveur Maintenabilité, facile à tester unitairement
  18. Citer GMail
  19. Grosses applis JS ou offline -&gt; structurer le code client side en MVC
  20. Romain: &quot;Là on est sur du JS sérieux. Comment vais-je organiser mon code ?&quot; Julien: &quot;Dans d&apos;autres langages, je fais des modules&quot;…
  21. Présente une interface à ses appelants, points d ’ entrée bien identifiés Je ne veux pas que les appelants dépendent de trop de détails et aient un couplage trop fort avec le module. Maîtrise d ’ impacts de changement. Et je souhaite dire comment utiliser mon code, pour ceux qui vont le maintenir - où est le point d ’ entrée ?
  22. Compteur basique
  23. Packages
  24. Julien: &quot;là j&apos;ai bien architecturé mon code, mais à l&apos;intérieur des modules ce n&apos;est pas forcément propre.&quot; Romain: &quot;Justement, intéressons-nous maintenant aux solutions qui nous aident à faire du code propre »
  25. Problèmes: - checkForm: global - document.getElementById répétitif et illisible - style.display = «block» ???
  26. Qui ne connait pas jQuery ? Propre si dans fichier séparé $ et #beerForm c ’ est un sélecteur comme en CSS
  27. Possibilité de développer en fonctionnel, avec underscore par ex.
  28. Data vient d ’ un appel JSON ou est stocké en local en offline. Je dois le rendre en HTML en JavaScript. 1 jeu de donnée -&gt; Plusieurs représentations
  29. Julien : &quot;OK le code est propre, mais a-t-il des bugs ? Comment je sais que je ne casse pas quelquechose en le changeant ?&quot; Pour ça, en Java, il y a les tests automatisés…
  30. D&apos;ialleurs, dans la salle, qui fait des tests automatisés en Java ? En JS ?
  31. Ce sont des tests d ’ intégration : lents, problématique du rejeu, difficultés de maintenance Pas prévu pour test unitaire
  32. Qui fait du TDD ? Test Driven Development En JS, on a Jasmine et QUnit
  33. Vous vous souvenez de mon compteur... Tests du contrat de mon compteur Tests incomplets... Jasmine bcp plus puissant: mocks etc. Octopod
  34. Cucumber.JS -&gt; BDD pour JS Testacular -&gt; Test Runner pour JS nécessitant NodeJS (utilisé par AngularJS)
  35. Qui fait des tests d ’ IHM (Selenium etc) ? Des tests unitaires (JUnit...) ? Du TDD ? La plupart d ’ entre-vous j ’ espère. Julien: &quot;OK je sais tester mon JavaScript. En Java je rejoue mes tests à chaque commit avec mon intégration continue, je m&apos;attends à la même chose en JavaScript, Romain?&quot;
  36. Qui fait des tests d ’ IHM (Selenium etc) ? Des tests unitaires (JUnit...) ? Du TDD ? La plupart d ’ entre-vous j ’ espère. Julien: &quot;OK je sais tester mon JavaScript. En Java je rejoue mes tests à chaque commit avec mon intégration continue, je m&apos;attends à la même chose en JavaScript, Romain?&quot;
  37. Qui (ne) fait (pas) de l ’ intégration continue ? Du Maven ? Plus un problème est détecté tard, plus il coûte cher à corriger. But principal de l ’ intégration continue : être averti des problèmes au plus tôt -&gt; passer des contrôles qualité sur mon logiciel, automatiquement et régulièrement
  38. Grunt -&gt; JS task runner Bower -&gt; Gestionnaire de dépendances Yeoman -&gt; Un peu le Maven du JS. Outils de construction, gestion de dépendances, exécution de tests. Utilise Grunt et Bower (entre autres)
  39. Julien
  40. Romain – C&apos;est bien tout ça Julien, je me crois dans le monde des Bisounours, tout est rose ! Julien – Non ! Attention tout de même…
  41. ... je suis plus zen avec JavaScript Mais non, je ne code pas en costard-cravate pour autant.
  42. ... je suis plus zen avec JavaScript Mais non, je ne code pas en costard-cravate pour autant.
  43. Eloquent JS: un livre gratuit en ligne, cours de JS. On est souvent un peu autodidacte, c ’ est bien de réviser les fondamentaux JavaScript garden: fait le point sur les features de JS et pointe les parties sales Advanced JS JavaScript the good parts: ce livre définit un sous-ensemble de JS «good» et vous fait «désapprendre» les parties sales