• Save
Softshake 2013 - Du JavaScript propre ? Challenge accepted!
Upcoming SlideShare
Loading in...5
×
 

Softshake 2013 - Du JavaScript propre ? Challenge accepted!

on

  • 1,440 views

 

Statistics

Views

Total Views
1,440
Views on SlideShare
727
Embed Views
713

Actions

Likes
1
Downloads
1
Comments
0

15 Embeds 713

http://blog.octo.com 472
http://cloud.feedly.com 169
http://www.newsblur.com 24
http://www-ig-opensocial.googleusercontent.com 9
http://digg.com 8
http://www.feedspot.com 8
http://feed.boiteataquets.org 7
http://feedly.com 5
http://inoreader.com 4
http://bluerat.fr 2
http://reader.aol.com 1
http://127.0.0.1 1
http://marty.alwaysdata.net 1
http://www.lo-ol.fr 1
http://personne.no-ip.org 1
More...

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

Softshake 2013 - Du JavaScript propre ? Challenge accepted! Softshake 2013 - Du JavaScript propre ? Challenge accepted! Presentation Transcript

  • Du JavaScript propre ? Challenge Accepted! Julien Jakubowski OCTO Technology @jak78 Romain Linsolas Société Générale @romaintaz 27 au 29 mars 2013
  • Romain Linsolas Développeur Java & Web Architecte Technique @romaintaz
  • Julien Jakubowski Développeur Java & Web depuis 11 ans @jak78
  • Nous ne sommes pas… Des gourous JavaScript John Resig - jQuery Douglas Crockford – JSLint, "JavaScript, The Good Parts"
  • JavaScript et Java ? http://www.flickr.com/photos/naturesauraphotography/ http://commons.wikimedia.org/wiki/User:DocteurCosmos 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é Navigateurs desktop, mobile… Même côté serveur ( , …)
  • Les géants du web
  • Les géants 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 SALE surprenant
  • WAT ? >  []  +  []    ""   >  []  +  {}    [object  Object]   >  {}  +  []    0   >  {}  +  {}    NaN   >  ++[[]][+[]]+[+[]]  ===  "10"    true  
  • ?? T? WA Gary Bernhardt http://codemash.org https://www.destroyallsoftware.com/talks/wat
  • Darth Vader Bière Maroilles
  • Autre problème JavaScript ??? AT 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…
  • Author : Frédérique Voisin-Demery http://www.flickr.com/people/8514720@N04
  • 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 pourrait utiliser un « JavaScript amélioré » Langage web orienté objet « Ce que JavaScript serait s’il avait été inventé aujourd’hui » Un JavaScript moins verbeux Sucre syntaxique
  • Exemple de CoffeeScript JavaScript
  • Architectures MV* http://www.gettyimages.fr/detail/illustration/forklift-building-a-cube-with-smaller-illustration-libre-de-droits/109424118
  • Architecture MVC classique <html> + JS Client 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 http://www.gettyimages.fr/detail/photo/black-and-white-jigsaw-pieces-form-a-square-photo/100479289
  • 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.js Mustache
  • AMD, Asynchronous Module Definition Chargements parallèles, à la demande jQuery Mustache beers.js sodas.js jQuery Mustache beers.js
  • 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
  • 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
  • Templates
  • A la main
  • Avec template (Mustache.js)
  • Outils de templating Mustache
  • Tests automatisés http://www.flickr.com/photos/horiavarlan/4747872021/sizes/l/in/photostream/
  • Tests d'IHM Selenium Conditions réalistes Lent, fragile
  • TDD pour JavaScript En Java TestNG En JavaScript
  • Tests avec Jasmine
  • Ecosystème Devoxx FR 2013 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 Quand une partie sale est utilisée S'il y a une erreur de syntaxe  Jasmine  JsLint  Google Closure Compiler Intégration dans Maven, Jenkins ou SonarQube
  • 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