Javascript ce n'est pas (si) sale
Upcoming SlideShare
Loading in...5
×
 

Javascript ce n'est pas (si) sale

on

  • 923 views

 

Statistics

Views

Total Views
923
Views on SlideShare
915
Embed Views
8

Actions

Likes
0
Downloads
17
Comments
0

3 Embeds 8

https://www.linkedin.com 5
http://www.linkedin.com 2
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Javascript ce n'est pas (si) sale Javascript ce n'est pas (si) sale Presentation Transcript

  • JavaScript, ce n’est pas (si) sale Julien Jakubowski Ch’ti JUG Document sous license Creative Commons Attribution - Pas d’Utilisation Commerciale - Pas de Modification 2.0 France (CC BY-NC-ND 2.0) - http://creativecommons.org/licenses/by-nc-nd/2.0/fr/mardi 25 septembre 2012
  • Qui suis-je ? Julien Jakubowski - @jak78 Développeur Java et web depuis ~10 ansmardi 25 septembre 2012
  • Qui ne suis-je pas ? Un véritable expert JavaScript ;-) John Resig - jQuery Douglas Crockford - JSLint, JavaScript the Good Partsmardi 25 septembre 2012
  • On va parler de JavaScript entre Javaïstesmardi 25 septembre 2012
  • On va parler de JavaScript entre Javaïstes Java is to JavaScript as Ham is to Hamster http://coding.smashingmagazine.com/2009/07/29/misunderstanding-markup-xhtml-2-comic-strip/mardi 25 septembre 2012
  • On va aussi parler de : Super-héros Bière Maroillesmardi 25 septembre 2012
  • Pourquoi cette présentation ?mardi 25 septembre 2012
  • En 2003mardi 25 septembre 2012
  • Maintenant...mardi 25 septembre 2012
  • Et aussi...mardi 25 septembre 2012
  • Forts enjeux Volume de code important Fini de jouer !mardi 25 septembre 2012
  • 100 000 lignes de code JavaScript ? Young man hidden behind table - © 2011 Richard Hernández Arrondomardi 25 septembre 2012
  • Young man hidden behind table - © 2011 Richard Hernández Arrondomardi 25 septembre 2012
  • Pourquoi ?mardi 25 septembre 2012
  • Parce que JavaScript, c’est SALEmardi 25 septembre 2012
  • Parce que JavaScript, c’est surprenantmardi 25 septembre 2012
  • WAT??? https://www.destroyallsoftware.com/talks/wat Gary Bernhardt http://codemash.org/mardi 25 septembre 2012
  • mardi 25 septembre 2012
  • WAT??? https://www.destroyallsoftware.com/talks/wat Gary Bernhardt http://codemash.org/mardi 25 septembre 2012
  • √ Super-héros Bière Maroillesmardi 25 septembre 2012
  • Conversion de typesmardi 25 septembre 2012
  • Conversion de types ??? AT Wmardi 25 septembre 2012
  • Conversion de typesmardi 25 septembre 2012
  • La solution ?mardi 25 septembre 2012
  • √ Super-héros √ Bière Maroillesmardi 25 septembre 2012
  • Pollution de l’espace de nommagemardi 25 septembre 2012
  • Pollution de l’espace de nommagemardi 25 septembre 2012
  • Pollution de l’espace de nommagemardi 25 septembre 2012
  • Global par défautmardi 25 septembre 2012
  • Global par défautmardi 25 septembre 2012
  • Global par défautmardi 25 septembre 2012
  • Global par défautmardi 25 septembre 2012
  • Global par défautmardi 25 septembre 2012
  • Tout est « public » par défautmardi 25 septembre 2012
  • Tout est « public » par défautmardi 25 septembre 2012
  • // Attendu : 1 { degre: 8% }mardi 25 septembre 2012
  • // Attendu : 1 { degre: 8% } // Obtenu : -1 undefinedmardi 25 septembre 2012
  • Automatic semi-column insertion // Attendu : 1 { degre: 8% } // Obtenu : -1 undefinedmardi 25 septembre 2012
  • Et il en reste... Le mot-clé this (plutôt surprenant que sale) eval ordre de déclaration du mot-clé var ...mardi 25 septembre 2012
  • Le plus sale : Pollution de l’espace de nommage Tout global par défaut Insertion automatique de points-virgulemardi 25 septembre 2012
  • Oui, mais...mardi 25 septembre 2012
  • mardi 25 septembre 2012
  • √ Super-héros √ Bière √ Maroillesmardi 25 septembre 2012
  • Comment coder 100 000 lignes de code en JavaScript d’une façon pas si sale ?mardi 25 septembre 2012
  • Eviter JavaScript GWT CoffeeScript DARTmardi 25 septembre 2012
  • Modulariser http://www.gettyimages.fr/detail/photo/black-and-white-jigsaw-pieces-form-a-square-photo/100479289mardi 25 septembre 2012
  • Qu’est-ce qu’un module ?mardi 25 septembre 2012
  • Qu’est-ce qu’un module ? • Ensemble de codemardi 25 septembre 2012
  • Qu’est-ce qu’un module ? • Ensemble de code • Présente une interfacemardi 25 septembre 2012
  • Qu’est-ce qu’un module ? • Ensemble de code • Présente une interface • Masque ses détails d’implémentationmardi 25 septembre 2012
  • mardi 25 septembre 2012
  • mardi 25 septembre 2012
  • mardi 25 septembre 2012
  • mardi 25 septembre 2012
  • mardi 25 septembre 2012
  • mardi 25 septembre 2012
  • mardi 25 septembre 2012
  • mardi 25 septembre 2012
  • mardi 25 septembre 2012
  • Architecturer son code http://www.gettyimages.fr/detail/illustration/forklift-building-a-cube-with-smaller-illustration-libre-de-droits/109424118mardi 25 septembre 2012
  • Diviser 100 000 lignes de code en plusieurs fichiers Temps de chargement Dépendancesmardi 25 septembre 2012
  • Diviser 100 000 lignes de code en plusieurs fichiers Temps de chargement Dépendancesmardi 25 septembre 2012
  • AMD RequireJS, Curl...mardi 25 septembre 2012
  • AMD RequireJS, Curl... √ Découper mes 100 000 lignes en sous-modulesmardi 25 septembre 2012
  • AMD RequireJS, Curl... √ Découper mes 100 000 lignes en sous-modules √ Chaque module est dans son scope isolémardi 25 septembre 2012
  • AMD RequireJS, Curl... √ Découper mes 100 000 lignes en sous-modules √ Chaque module est dans son scope isolé √ Chargement asynchrone et à la demandemardi 25 septembre 2012
  • AMD RequireJS, Curl... √ Découper mes 100 000 lignes en sous-modules √ Chaque module est dans son scope isolé √ Chargement asynchrone et à la demande X Ordre du chargement et asynchronismemardi 25 septembre 2012
  • AMD RequireJS, Curl... √ Découper mes 100 000 lignes en sous-modules √ Chaque module est dans son scope isolé √ Chargement asynchrone et à la demande X Ordre du chargement et asynchronisme X Intégration avec librairies tiercesmardi 25 septembre 2012
  • Backbone.js Sorte de SpringMVC / JSFmardi 25 septembre 2012
  • Backbone.js Sorte de SpringMVC / JSF √ Structure votre code en MVC / MVPmardi 25 septembre 2012
  • Backbone.js Sorte de SpringMVC / JSF √ Structure votre code en MVC / MVP √ Maintenabilité d’applications de taille non- trivialemardi 25 septembre 2012
  • Backbone.js Sorte de SpringMVC / JSF √ Structure votre code en MVC / MVP √ Maintenabilité d’applications de taille non- triviale X Coût d’entréemardi 25 septembre 2012
  • Backbone.js Sorte de SpringMVC / JSF √ Structure votre code en MVC / MVP √ Maintenabilité d’applications de taille non- triviale X Coût d’entrée X Maturité, pas de standards (AngularJS...)mardi 25 septembre 2012
  • Tests automatisés http://www.flickr.com/photos/horiavarlan/4747872021/sizes/l/in/photostream/mardi 25 septembre 2012
  • Tests d’IHM Selenium Windmill Robotisent un navigateur qui attaque votre applicationmardi 25 septembre 2012
  • Tests unitaires TestNGmardi 25 septembre 2012
  • Tests unitaires TestNG Jasmine QUnitmardi 25 septembre 2012
  • Démomardi 25 septembre 2012
  • Jasmine Démomardi 25 septembre 2012
  • Eviter les parties sales http://www.gettyimages.fr/detail/photo/hands-of-a-blacksmith-in-his-studio-image-libre-de-droits/109889293mardi 25 septembre 2012
  • JsLint Trouve les utilisations d’ugly parts Sorte de CheckStyle / PMD / FindBugs S’intègre à Eclipsemardi 25 septembre 2012
  • Eclipse seulmardi 25 septembre 2012
  • Eclipse avec JsLintmardi 25 septembre 2012
  • Expressivité http://www.gettyimages.fr/detail/photo/detail-of-sheet-music-image-libre-de-droits/AA004801mardi 25 septembre 2012
  • Un code expressif ? • Simple • Concis • Lisiblemardi 25 septembre 2012
  • mardi 25 septembre 2012
  • Pollutionmardi 25 septembre 2012
  • Pollution Peu lisiblemardi 25 septembre 2012
  • Pollution Peu lisible SALE !mardi 25 septembre 2012
  • Avecmardi 25 septembre 2012
  • Avec Pas de pollutionmardi 25 septembre 2012
  • Avec Pas de pollution Concision, lisibilitémardi 25 septembre 2012
  • Avec Pas de pollution Concision, lisibilité Propremardi 25 septembre 2012
  • C’est surtout... • Lisibilité du code - expressivité • Simplifie ce qu’on utilise le plus fréquemment : AJAX, manipulation du DOM...mardi 25 septembre 2012
  • C’est aussi... • Nombreux plugins tiers • Structurer son application en plugins • Incoutournable !mardi 25 septembre 2012
  • Mustache {mardi 25 septembre 2012
  • Sans Mustachemardi 25 septembre 2012 {
  • Avec Mustachemardi 25 septembre 2012 {
  • Mustache { Templating JavaScript Rendu HTML de façon lisiblemardi 25 septembre 2012
  • Mustache { A des concurrents (affaire de goûts...) Avantage: existe aussi en Java ! ➔ Même moteur côté client et serveurmardi 25 septembre 2012
  • Contrôle qualité automatisé Build et intégration continuemardi 25 septembre 2012
  • Je veux être alerté si : • Test en échec • Partie sale utilisée • Erreur de syntaxemardi 25 septembre 2012
  • Je veux être alerté si : • Test en échec Jasmine • Partie sale utilisée JsLint • Erreur de syntaxe Google Closure Compilermardi 25 septembre 2012
  • Je veux être alerté si : • Test en échec Jasmine • Partie sale utilisée JsLint • Erreur de syntaxe Google Closure Compiler S’intègrent à Maven, Jenkins, Sonarmardi 25 septembre 2012
  • Compiler du JavaScript ?mardi 25 septembre 2012
  • Compiler du JavaScript ? JavaScript est un langage interprétémardi 25 septembre 2012
  • Compiler du JavaScript ? JavaScript est un langage interprété Apports de la « compilation » :mardi 25 septembre 2012
  • Compiler du JavaScript ? JavaScript est un langage interprété Apports de la « compilation » : • Vérification de la syntaxemardi 25 septembre 2012
  • Compiler du JavaScript ? JavaScript est un langage interprété Apports de la « compilation » : • Vérification de la syntaxe • Code optimisémardi 25 septembre 2012
  • 100 000 lignes de code JavaScript: comment ? Modules Architecture Tests unitaires Parties sales Contrôle qualité Expressivité évitées automatisémardi 25 septembre 2012
  • Et depuis... Businessman sitting at desk with feet up - Paul Bradburymardi 25 septembre 2012
  • Référencesmardi 25 septembre 2012
  • Références Eloquent JavaScript http://eloquentjavascript.net/contents.htmlmardi 25 septembre 2012
  • Références Eloquent JavaScript http://eloquentjavascript.net/contents.html JavaScript Garden http://bonsaiden.github.com/JavaScript-Garden/mardi 25 septembre 2012
  • 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/mardi 25 septembre 2012
  • 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. Crockfordmardi 25 septembre 2012
  • ROTI http://www.flickr.com/photos/34943981@N00/202923614/mardi 25 septembre 2012