Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013

10h40 - 11h30 - La Seine B

Du JavaScript propre ? Challenge Accepted!

27 au 29 mars 2013

Du JavaScript propre ? Challenge Accepted!

Julien Jakubowski OCTO Technology

@jak78

Romain Linsolas Société Générale

@romaintaz

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 Maroilles Bière

Pourquoi cette présentation ?

En 2003

Le JavaScript est partout !

Runtime le plus distribué Mobilité Même côté serveur ( , …)

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

Le JavaScript c'est SALE surprenant

Pourquoi ça fait peur ?

WAT ? > [] + [] "" > [] + {} [object Object] > {} + [] 0 > {} + {} NaN > ++[[]][+[]]+[+[]] === "10" true

WAT???

Gary Bernhardt http://codemash.org https://www.destroyallsoftware.com/talks/wat

Autre problème JavaScript

WAT???

Pollution de l'espace de nommage

Scope global par défaut

Tout est public par défaut

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…

Nous allons aussi parler de…


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 combler les lacunes de JavaScript

Un JavaScript à l’écriture simplifiée

Exemple de CoffeeScript JavaScript

Architectures MV*

Architecture MVC classique

Client Serveur

Asynchrone

<html> + JS

Controller

View Model

Mes besoins aujourd'hui

Temps de réponse instantané Gestion de réseaux lents (mobiles…) Mode déconnecté

Architecture MV* en JavaScript

Client Serveur

View Controller

Model

…

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

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

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

Conditions réelles Pas vraiment adapté au TDD

Selenium Windmill

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 n'avez plus d'excuses

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 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 ?

Modules MV* Parties sales évitées

Expressivité Automatisation Tests

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

Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013

Technology

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