Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
Upcoming SlideShare
Loading in...5
×
 

Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013

on

  • 866 views

 

Statistics

Views

Total Views
866
Views on SlideShare
849
Embed Views
17

Actions

Likes
2
Downloads
15
Comments
0

3 Embeds 17

https://twitter.com 10
https://www.linkedin.com 4
http://www.linkedin.com 3

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

    Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013 Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013 Presentation Transcript

    • Du JavaScript propre ? Challenge Accepted! 10h40 - 11h30 - La Seine B
    • Du JavaScript propre ? Challenge Accepted!Julien Jakubowski Romain Linsolas OCTO Technology Société Générale @jak78 @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 cest SALE surprenant
    • WAT ? >  []  +  []    ""   >  []  +  {}    [object  Object]   >  {}  +  []    0   >  {}  +  {}    NaN   >  ++[[]][+[]]+[+[]]  ===  "10"    true  
    • WAT ???Gary Bernhardthttp://codemash.orghttps://www.destroyallsoftware.com/talks/wat
    • Darth Vader Bière Maroilles
    • Autre problème JavaScript WAT? ??
    • Pollution de lespace de nommage
    • Scope global par défaut
    • Tout est public par défaut
    • Darth Vader Bière Maroilles
    • Et ce nest pas tout ! Le mot clé this (plus surprenant que sale) Ordre de déclaration de var Etc.
    • Mais le plus sale Pollution de lespace de nommage Tout est global par défaut Code non testé
    • Oui mais…
    • Nous allons aussi parler de… Darth Vader Bière Maroilles
    • Comment coderproprement 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 combler les Un JavaScript à l’écriture simplifiée lacunes de JavaScript
    • Exemple de CoffeeScript JavaScript
    • Architectures MV*
    • Architecture MVC classique <html> + JS Client Asynchrone Serveur Controller Model View
    • Mes besoins aujourdhui 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
    • Quest-ce quun 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.js Mustache
    • AMD, Asynchronous Module Definition Chargements parallèles, à la demande jQuery Mustache beers.js sodas.js jQuery beers.js Mustache
    • Eviter les parties sales http://www.gettyimages.fr/detail/photo/hands-of-a-blacksmith-in-his-studio-image-libre-de-droits/109889293
    • 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/AA004801
    • Quest-ce quun code expressif ? Cest un code simple, concis, lisible
    • Mauvais exemple Pollution, mauvaise lisibilité => SALE
    • Avec Pas de pollution Lisibilité accrue Code propre
    • jQuery, cest 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 dIHM 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
    • Faire du TDD pour JavaScript Vous devez en faire en 2013 ! Vous navez plus dexcuses
    • Automatisation
    • Détecter et alerter Quand un test échoue  Jasmine Quand une partie sale est utilisée  JsLint Sil y a une erreur de syntaxe  Google Closure Compiler Intégration dans Maven, Jenkins ou Sonar
    • Intégration continue avec Jenkins http://localhost:8080/job/Test%20Jasmine/1/consol
    • Analyse qualité avec Sonar
    • Dautres 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