Javascript as a first programming language : votre IC prête pour la révolution !

JavaScript as a first programming languagevotre IC prête pour la révolutionJulien RocheFrédéric DuboisFrédéric Bouquet

From Objet Direct

Julien Roche - @rochejul• Ingénieur d’étude Java, Web, Web Mobile / hybride

chez Objet Direct depuis 6 ans

• Formateur / consultant sur ces technologies

Frédéric Bouquet - @bouquetf

CurieuxBidouilleur

Open source

Bonitasoft

Objet Direct

www.espacedefouille.org

http://www.espacedefouille.org/

Frédéric Dubois - @fduboisca

http://www.devoxx.com/display/FR12/Pour+un+developpement+durable

12 ans d’expérienceEt tu développes encore ?So what !!?!!?!

Qualité

Agilité

TDDXPICCoding rules check

SonarRefactoring

Le drame

La mort annoncée de Flash et autres

Metro style browsing and plug-in free HTML5.…Many of the 62% of these sites that currently use Adobe Flash already fall back to HTML5 video in the absence of plug-in support

Building Windows 8, avril 2011

Flash was created during the PC era – for PCs and mice. Flash is a successful business for Adobe, and we can understand why they want to push it beyond PCs. But the mobile era is about low power devices, touch interfaces and open web standards – all areas where Flash falls short.

Steve Jobs, avril 2010

JavaScript ?!!!?!!!?

C’est pas un langage orienté Objet…Prototype tu dis ?Pas de typage fortPas de complétion, WTF!

Les scripts c’est pour faire des moulinettes pas des applications!!

Expectative…

puis finalement…

0 tests, 0 normes !!!

• Le fantôme, le zombie et testacular, panorama des outils de tests pour application web moderne

• AngularJS, ou le futur du développement Web• Frontend Live Coding : Tour d'horizon de

l'outillage et des technos web d'aujourd'hui• Developing Modern Web Apps With

Backbone.js• Space Chatons: Bleeding Edge HTML5• Live coding avec Yeoman & AngularJS• Du Javascript propre ? Challenge Accepted• Animez vos pages HTML5: un tour d'horizon

complet des techniques d'animation en HTML5• Creating Games with WebGL and Three.js

@YourTwitterHandle#DVXFR14{session hashtag}

Sommair

e

Et bah moi en Java…

Et ils veulent me faire changer pour ça?

IDE = Debug =

Profiling =Test =

Quality =

Build =

= Continuous Integration

Javascript as a 1st languageUn environnement de développement

performant

De l’outillage, ne pas réinventer la roue

Ecrire un backend

Ecrire un frontend

De qualité

Avec des indicateurs remontés dans une IC

Pendant ces 2h1/2, nous allonsPrésenter une usine logicielle Javascript complète

Autour d’une projet Web

Il y aura,

du code

De la conf

Des fantômes, des oiseaux, des phacochères,

des fleurs


Qu’est-

ce

qu’un

e usin

e

logicie

lle ?

Des outils• Concevoir, développer, tester• Sauvegarder/Archiver/

Versioner

• Gérer les dépendances• Compiler• Exécuter les tests• Vérifier la qualité du code

produit• Documenter• Produire un livrable

A chaque version

Big Picture dans le monde Java

Produit Géré par

Articulé autour deTesté avec

Versione avec

Peut utiliser

Big Picture dans le monde Web

Produit Géré par

Articulé autour de

Testé avec

Versione avec

Peut utiliser ??

??


Je veu

x un I

DE

comme t

out le

mon

de !

Un développeur sans IDE• C’est un peu comme MacGyver sans son couteau

suisse

Et pourtant !• Le développeur Web a longtemps été seul

• Souvent, un simple Notepad++ était son meilleur outil

Mais cela a changé !• Nous avons désormais un ensemble d’IDE à notre

disposition pour nous aider !

Webstorm• Produit par Jetbrains• Spécialisé pour répondre au large panel de

nouvelles technologies du Web

@YourTwitterHandle

Demo


performant


Ecrire un backend

Ecrire un frontend

De qualité



Un back

end

en JS

!

Autrefois …• Si nous voulions gérer un projet pur JavaScript, nous étions seul

au monde

• … encore …

NodeJs – Et la force est avec nous ?• NodeJs est un outils écrit en C qui utilise JavaScript comme

langage de script

• Il offre une API importante pour gérer les streams, fichiers, …

• Nous pouvons nous en servir en tant que serveur, mais aussi en tant qu’outils

• Il est à la fois puissant et scalable• De nombreuses entreprises aux Etats-Unis l’utilisent en tant que

serveur d’entreprise comme PayPal

Frederic Dubois

Nombreuses? Vraiment?

Un exemple de serveur (1)var sys = require('sys'), httpServer = require('http'); httpServer.createServer(function(request,response){ response.writeHeader(200, { 'Content-Type': 'text/plain '}); response.write('Hello World'); response.end(); }); httpServer.listen(8080); sys.puts('Server Running on 8080');

Un exemple de serveur (2)var express = require('express'), app = express(), restPrefix = '/api', port = process.env.PORT || 9000; app.configure(function () { app.use(express.bodyParser()); app.use(express.static(__dirname)); // Our server is the local directory '.' }); app.get(restPrefix + '/users', function(req, res) { console.log('A request is done on /users on GET'); res.json([ { 'id': 1, 'firstName': 'John', 'lastName': 'Doe', 'age': 25 } ]); }); app.listen(port); console.log('Server started on port ' + port);

NodeJs – En tant qu’outils (1)• La simplicité et le choix de JavaScript a permis à de nombreux

frameworks JavaScripts de proposer des outils• Evitant d’écrire des scripts Shell

NodeJs – En tant qu’outils (2)• Une pléthore de plugins sont alors apparus !• Sans compter les très nombreux modules NodeJs qui sont là pour

nous aider à concevoir d’autres modules NodeJs

Son repository• https://www.npmjs.org

https://www,npmjs.org/

https://www,npmjs.org/

Et ce n'est pas que pour les POCs

• http://nodejs.org/industry

http://nodejs.org/industry

http://nodejs.org/industry

@YourTwitterHandle

Let’s

CODE!


performant


Ecrire un backend

Ecrire un frontend

De qualité



Mon fro

ntend

en pu

r JS


Sommair

e

Sommaire• Marre du "alert('...');"• Initialiser un projet• Et pour mon jQuery ?• Organiser mon code• He’s alive ! ALIVE !• Les tests et les rapports de qualités• Un petit coup de pouce ?• L’intégration dans une IC• One more thing


Marre d

u

"alert

('...');

"

Autrefois …• Le déboggage d’une application Web était plutôt

compliqué …

• Nous devions souvent mettre des instructions « alert » dans notre code pour voir le cheminement

• Les erreurs remontées étaient souvent ardues à comprendre, ou alors n’indiquaient pas le bon emplacement

Néanmoins …• Des outils ont émergés pour essayer de nous

aider• Firebug pour Firefox

• Dynatrace Ajax edition

• Log4JavaScript

• Mais ils n’étaient pas suffisant

ChromeDevTools à l’aide• C’est un outils intégré dans Chrome

• Il a pour but d’intégrer un large panel de fonctionnalités pour:• Débugger le JavaScript, HTML, CSS• Faire du monitoring réseau, mémoire• Simuler un environnement

Aperçu configurations

Aperçu pour la partie HTML

Aperçu pour la partie JavaScript

Pour le réseau, nous pouvons …• Connaître toutes les réseaux chargés• Avec le temps de chargement• Avec le statut réseau• Avec les entêtes et le corps de la requête• Avec les entêtes et le corps de la réponse

Et bien d’autres choses !• Timeline pour voir les événements capturés et le

temps de traitement chacun• Timeline pour connaître le temps d’affichage de la

page• Timeline pour connaître la mémoire consommé• Profiling JavaScript• Profiling Canvas• Audit de son site Web• Console

Aperçu …

@YourTwitterHandle

Demo


Initiali

ser un

projet

Que fait un gestionnaire de projet ?• Il a pour but de donner des informations sur le projet• Nom, auteur, version …

• Il a pour but de gérer les dépendances• Pour mieux gérer le projet• Pour le projet lui-même

• Il a pour but de lancer les tests unitaires

• Il a pour but de déployer des versions

Et pour cela ?

@YourTwitterHandle

Demo


Et po

ur mon

jQuery

?

Le gestionnaire de dépendances• Il a pour but de télécharger des modules / frameworks pour• Soit mieux gérer l’application• Soit pour l’application lui-même

• Dans le cas où nous écrivons une application serveur, NodeJs suffit• Via NPM

• Mais dans le cas d’une application cliente, comment faire ?

Bienvenue à Bower !• Bower est un module NodeJs qui est orienté pour les solutions

clientes

• Comme Maven,• Il a une gestion de version• Il a gestion des dépendances• Ex: Si j’ai besoin de Backone.Marionette, je ne déclare que lui,

et Bower ira télécharger la bonne version de Backbone et d’Underscore

Son repository• Il a son propre repository: http://bower.io/search

http://bower.io/search

Que devons-nous faire ?• Il va falloir déclarer dans notre projet NodeJs que nous avons

besoin de Bower

• Nous allons avoir une nouvelle commande dans notre shell « bower »

• Nous pourrons faire• « bower init » pour créer le fichier de description Bower• « bower install » pour déclarer / télécharger une dépendance à

notre projet, modifier le fichier de description

@YourTwitterHandle

Demo


Organis

er

mon co

de

Pallier un syndrôme bien connu• Souvent nous avons ça:

• Autrement, nous avons une liste impressionnante de JavaScript à déclarer dans le bon ordre pour notre application !

<head> <title>Devoxx Application</title> <meta charset="utf-8" /> <script type="text/javascript" defer="defer" src="./frameworks/jquery.js"></script> <script type="text/javascript" defer="defer" src="./models/users.js"></script> <script type="text/javascript" defer="defer" src="./models/groups.js"></script> <script type="text/javascript" defer="defer" src="./models/commands.js"></script>  <script type="text/javascript" defer="defer" src="./main.js"></script> </head>

Ce qui nous amène à la question …

• Comment devons-nous charger nos fichiers JavaScripts ?• Dans la balise HEAD ?

• En bas de la balise BODY ?

• En utilisant les attributs async (HTML5) ou defer ?

• Via JavaScript, en injectant un nœud ?

• Via JavaScript, en injectant un nœud, au moment de l’événement « Load », en utilisant « defer » ?

Et si on allait plus loin ?• Ne pourrions-nous pas avoir un framework qui fasse du

chargement asynchrone• Chargement optimisé

• Mais également• Une gestion de dépendances ?• Un chargement des templates ?• Une gestion de l’internalisation ?• Et qui soit léger ?

• Une solution: RequireJS

RequireJS• Github: https://github.com/jrburke/requirejs • Documentation: http://requirejs.org/

• Compatible sur la quasi-totalité des navigateurs• IE6+, Firefox 2+, Safari 3.2+, Chrome 3+, Opera 10+

• Repose sur l’AMD:• Asynchronous Module Definition: https://

github.com/amdjs/amdjs-api/wiki/AMD • Repose sur deux méthodes: Define et Require

https://github.com/jrburke/requirejs

https://github.com/jrburke/requirejs

http://requirejs.org/

http://requirejs.org/

https://github.com/amdjs/amdjs-api/wiki/AMD



Un aperçu …define( ["mypreviousmodule", "myanotherpreviousmodule"], function(a, b){ // Do something // Return something return { "a": "a" }; } );

• Et il existe un grand nombre de plugins• Pour charger des templates, les compiler avec Underscore• Pour gérer l’internalisation• Pour charger une image• Pour charger des API Google• …

Optimisation• RequireJS a un plugin NodeJS permettant• De concaténer et de minifier les fichiers JavaScripts• Et cela en respectant l’ordre de chargement des modules et de

leurs dépendances

• Il suffit alors de l’installer

• Et de le lancer !

> npm install -g requirejs

> node r.js -o baseUrl=. paths.requireLib=../require name=main include=requireLib out=main-built.js

@YourTwitterHandle

Demo


Alive

It’s ali

ve !

IT’S A

LIVE !

Votre projet vit• Un gestionnaire de projet propose en générale un cycle de vie• Pour télécharger les dépendances• Pour nettoyer son projet• Pour lancer les tests• Pour lancer les rapports de qualités• Pour générer la documentation• Pour compiler votre application• Pour le développement ou la production

• Pour distribuer l’application

Jetons un œil chez Maven 3.2.1

Et chez Gradle ?

Et chez NodeJs• Nous allons un petit cycle de vie que nous définissons dans le

package.json et qui a pour but de lancer des commandes:• prepublish, publish• presintall, install, postinstall• preuninstall, uninstall, postuninstall• pretest, test, posttest• …

Exemple:

Néanmoins …• Ce cycle de vie n’est pas toujours très adapté

• Quelles solutions aurions-nous ?• Utiliser des solutions comme Maven, Gradle, Ant ?• Pas très adapté car plutôt pour le monde Java

• Ou alors existe-t-il une solution dans le monde NodeJs

Solution: GruntJs• GruntJs est un module NodeJs qui propose un peu

comme Ant d’exécuter des « tâches »• Une tâche étant soit un script JavaScript, soit un

plugin GruntJs

• Pour ce faire, GruntJs vous propose une API assez riche pour créer vos propres plugins

• Beaucoup de modules NodeJs possède leur propre plugin GruntJs• Less, JsHint, RequireJs, Bower, Karma …

GruntJs et son API

GruntJs et ses plugins officiels• grunt-contrib: pour avoir tous les plugins officiels• grunt-contrib-clean• grunt-contrib-compress• grunt-contrib-concat• grunt-contrib-copy• grunt-contrib-cssmin• grunt-contrib-csslint• grunt-contrib-htmlmin• grunt-contrib-imagemin• grunt-contrib-jshint• …

@YourTwitterHandle

Demo


FUUUSIO

N !

Parent / enfant• Nous avons la notion de projets parent / enfants• Où un enfant est un sous-ensemble• Où le parent regroupe ses enfants

• Avec le monde NodeJs, sera tout à fait possible• Et cela assez simplement

On obtient une transversalité !• Un même technologie partout

Et pour ce faire• Si nous voulons étendre un module backend: utilisation de NodeJs

• Si nous voulons étendre un module frontend: utilisation de Bower

@YourTwitterHandle

Demo


performant


Ecrire un backend

Ecrire un frontend

De qualité



Les te

sts et

les rap

ports

de

qualit

és

Nos exigences qualités• En règle générale, nous aimons bien avoir:• Des rapports sur nos tests• Des rapports sur la couverture de code• De la génération de documentation• Des rapports sur la qualité du code et le bon respect des

conventions• …

Dans le monde Java• Cela se traduit par:• Des rapports Junit• Des rapports Cobertura• De la JavaDoc / Oxygen• Des rapports Checktyle, PMD, …

Dans le monde du Web• Autant dans le monde Java, nous validons du Java

• Autant dans le monde du Web, nous validons:• De l’HTML• Du CSS / Less / Compass• Du JavaScript / CoffeeScript / TypeScript / Dart• …

• Ce qui demande un outillage plus important


Les Te

sts

(First

off co

urse

)

Ce que nous voulons faire

Des TUs Des TFsEcrire

Les exécuter

Dans un navigateur headless

Pour produire <XML/

>

Et alimenter

Ecrire des testsJasmine pour les tests unitaires

• Syntaxe BDD, assertions et mock• Intégration avec les tests runner frontend et backend

(On aurait pu aussi utiliser qunit, mocha, chai, nodeunit, etc.)

CasperJS• Navigation sur une application web• Evaluation dans le contexte du navigateur

(On aurait pu aussi utiliser ZombieJS, WebDriverJS, Protractor ou Selenium)

Karma à la rescousseSon objectif: exécuter les tests dans un navigateur

Avantages• Gère plusieurs frameworks de tests (Jasmine, Mocka …)• Permet l’exécution dans plusieurs navigateurs (PhantomJs , Chrome,

Firefox…)• Supporte les principaux frameworks (RequireJs, Angular, …)• Génère des rapports• Compatible xunit pour les tests• Compatible Cobertura pour la couverture de code

PhantomJs• Nous utilisons souvent Karma avec PhantomJs• Basé sur Webkit

NAVIGATEUR HEADLESS=

! AUTOMATISATION!

@YourTwitterHandle

Demo


Documen

tati

on et

qualim

étrie

Elle est où la doc ?

JSDoc 3

Oui mais Web = JS + HTML, CSS, etcNormes de développement ?

• Nous avions JsLint (initié par Douglas Crokford) qui permettait de faire la qualité de code sur le JavaScript

• Remplacé par JsHint qui va plus loin

Pour les autres technologies, nous avons souvent un équivalent de XLint / XHint:

…

Batch + intégration IDE

Reporting• Et en règle générale, un générateur de rapport se disant « Lint » ou

« Hint » génère souvent un fichier de type Checkstyle

• Dans le cas de notre usine, il nous suffit de trouver ceux ayant un plugin grunt• grunt-contrib-jshint• grunt-htmlhint• grunt-contrib-csslint• grunt-lesshint• grunt-coffeehint• …

@YourTwitterHandle

Demo


performant


Ecrire un backend

Ecrire un frontend

De qualité



L’intég

ratio

n dan

s une

IC

Nous voulons… valider

JSDoc 3

2- compiler

3 -analyser 4- documenter

Checkstyle reports

1- Mettre à jour les dépendances

5- tester

Junit & cobertura reports

Frederic Dubois

Je verrais bien un récapitulatif des différents rapports et ce que l'on veut vérifier (build ok, tests Ok, doc Ok, etc.) + création d'un livrable de prod

Nous voulons… produire un livrable

• Minification

• Optimisation

• Obfuscation

• Manifest HTML5

Intégration dans Jenkins• Comme pour Maven / Gradle / Ant, nous allons créer un job qui va

lancer une commande !

Lance les tests avec

Récupère le code avec

récupère les dépendances

projets et de l’application

avec

Publie les rapports de tests, qualités

Produit la documentation

Tag l’application

…

Aperçu

En bref• Notre projet pourra s’intégrer assez facilement dans les différentes

intégration continue

@YourTwitterHandle

Demo


performant


Ecrire un backend

Ecrire un frontend

De qualité


@YourTwitterHandle

One

more

thing

Tout ça a dû vous faire peur …

Ou pire …

Néanmoins, il y a Yeoman• Soutenu par les grands du monde Web• Addy Osmany• Paul Irish• Sindre Sorhus• …

• Il a pour objectif de vous faciliter la vie• En vous proposant un moteur de génération

basé sur des templates• En vous permettant de créer des templates !

Créer son projet en un « click »• Tout d’abord, il faut l’installer

• Ensuite, il faut installer un template• Par exemple un pour créer des sites Web

• Nous allons pouvoir alors demander de créer un template de type « webapp »

npm install -g yo

npm install -g generator-webapp

yo webapp

Ce qui nous donne

Et les templates sont légions

Pourquoi l’évoquer que maintenant ?• Tout simplement pour ne pas brûler les étapes !• Il y a beaucoup de nouvelles technologies• Il y a beaucoup de finesses et de notions à connaître

• Si nous allons directement à Yeoman• Nous serons un peu perdu sur comment modifier les fichiers• Nous ne saurons pas quoi faire en cas de « bug »• Nous ne saurons pas à quoi corresponde tel ou tel chose

En bref• L’utilisation de Yeoman est à préconiser:• Quand vous avez des bonnes notions• Personnellement, je passe plus de temps à déconfigurer ce

qu’ils proposent, du coup, je l’utilise rarement

• Quand vous souhaitez créer vos propres templates pour vos projets


Et les

autre

s ?

Maven/GradleCommandes shell pour exécuter node.jsMaven : pl.allegro:grunt-maven-pluginGradle : com.moowork.gradle:gradle-grunt-plugin

Cycles de vie !Packaging

Et ailleurs ?• Java 8 : Nashorn/nodyn• Microsoft: du node partout, mais surtout dans azure !• Python : encore du node• Rails/Grails/… : des tags et des plugins

Des outils• Concevoir, développer, tester• Sauvegarder/Archiver/

Versioner

• Gérer les dépendances• Compiler• Exécuter les tests• Vérifier la qualité du code

produit• Documenter• Produire un livrable

A chaque version


Conclu

sion

En une phrase pour commencer

Période plutôt existante …• Nous sommes dans une période charnière !

• De nombreuses technologies Web• La révolution dans le navigateur• La guerre des navigateurs

• Le JavaScript qui évolue lentement mais sûrement dans le bon sens• Adoption de Ecmacscript 6 en cours• Définition de Ecmascript 7

… où on pourra dire …• Qu’il y a eu un avant et un après

2004 2014

Avec des bonnes nouvelles !!

En une phrase pour finir


Q & A

Ceux que nous n'avons pas cités

Javascript as a first programming language : votre IC prête pour la révolution !

Technology

Transcript of Javascript as a first programming language : votre IC prête pour la révolution !