softshake 2013 - du javascript propre ? challenge accepted!

27 au 29 mars 2013

Du JavaScript propre ?

Challenge Accepted!

Julien Jakubowski

OCTO Technology

@jak78

Romain LinsolasSociété Générale

@romaintaz

Romain Linsolas

Développeur Java & WebArchitecte 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 ?

JavaScript is to Java as Hamster is to Ham

http://coding.smashingmagazine.com/2009/07/29/misunderstanding-markup-xhtml-2-comic-strip/

http://www.flickr.com/photos/naturesauraphotography/ http://commons.wikimedia.org/wiki/User:DocteurCosmos

Nous allons aussi parler de…

Darth Vader MaroillesBière

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

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 JavaScriptc'estSALEsurprenant

Pourquoi ça fait peur ?

WAT ?> [] + []""

> [] + {}[object Object]

> {} + []0

> {} + {}NaN

> ++[[]][+[]]+[+[]] === "10"true

WA

T???WA

T???

Gary Bernhardthttp://codemash.orghttps://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 nommageTout est global par défautCode non testé

Oui mais…

Author : Frédérique Voisin-Demery http://www.flickr.com/people/8514720@N04

Nous allons aussi parler de…


Comment coderproprement 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 verbeuxSucre 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

Client

Serveur

<html>+JS

Controller

ViewModel

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 beaucoupPas 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 codeIsolation – faible couplagePrésente une interface

Un module basique - Présentation

Un module basique

Espace de nommage

Diviser en plusieurs fichiers .js ?

Temps de chargementPas 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

jQuerybeers.

jsMustache

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 partsEquivalent à PMD / Checkstyle / FindBugs pour JSInté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 pollutionLisibilité accrueCode propre

Templates

A la main

Avec template (Mustache.js)

Outils de templating

Mustache

Tests automatisésTests automatisés

http://www.flickr.com/photos/horiavarlan/4747872021/sizes/l/in/photostream/

Tests d'IHM

Conditions réalistesLent, fragile

Selenium

TDD pour JavaScript

En Java En JavaScript

TestNG

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 échoueQuand une partie sale est utiliséeS'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 ?

ModulesMV* Parties sales

évitées

ExpressivitéAutomatisatio

nTests

Le monde des bisounours ?

Le monde des bisounours ? Oui mais non !

IntégrationPérennitéApprentissage

Businessman sitting at desk with feet up - Paul Bradbury

Références

Eloquent JavaScripthttp://eloquentjavascript.net/contents.html

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

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

JavaScript: the Good Parts - D. Crockford

Questions ?

@jak78 @romaintaz