javascript as a first programming language : votre ic prête pour la révolution !
TRANSCRIPT
![Page 1: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/1.jpg)
JavaScript as a first programming languagevotre IC prête pour la révolutionJulien RocheFrédéric DuboisFrédéric Bouquet
From Objet Direct
![Page 2: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/2.jpg)
Julien Roche - @rochejul• Ingénieur d’étude Java, Web, Web Mobile / hybride
chez Objet Direct depuis 6 ans
• Formateur / consultant sur ces technologies
![Page 3: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/3.jpg)
Frédéric Bouquet - @bouquetf
CurieuxBidouilleur
Open source
Bonitasoft
Objet Direct
www.espacedefouille.org
![Page 4: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/4.jpg)
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é
![Page 5: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/5.jpg)
TDDXPICCoding rules check
SonarRefactoring
![Page 6: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/6.jpg)
![Page 7: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/7.jpg)
Le drame
![Page 8: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/8.jpg)
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
![Page 9: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/9.jpg)
![Page 10: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/10.jpg)
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!!
![Page 11: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/11.jpg)
Expectative…
puis finalement…
0 tests, 0 normes !!!
![Page 12: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/12.jpg)
• 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
![Page 13: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/13.jpg)
![Page 14: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/14.jpg)
@YourTwitterHandle#DVXFR14{session hashtag}
Sommair
e
![Page 15: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/15.jpg)
Et bah moi en Java…
![Page 16: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/16.jpg)
Et ils veulent me faire changer pour ça?
IDE = Debug =
Profiling =Test =
Quality =
Build =
= Continuous Integration
![Page 17: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/17.jpg)
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
![Page 18: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/18.jpg)
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
![Page 19: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/19.jpg)
@YourTwitterHandle#DVXFR14{session hashtag}
Qu’est-
ce
qu’un
e usin
e
logicie
lle ?
![Page 20: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/20.jpg)
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
![Page 21: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/21.jpg)
Big Picture dans le monde Java
Produit Géré par
Articulé autour deTesté avec
Versione avec
Peut utiliser
![Page 22: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/22.jpg)
Big Picture dans le monde Web
Produit Géré par
Articulé autour de
Testé avec
Versione avec
Peut utiliser ??
??
![Page 23: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/23.jpg)
@YourTwitterHandle#DVXFR14{session hashtag}
Je veu
x un I
DE
comme t
out le
mon
de !
![Page 24: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/24.jpg)
Un développeur sans IDE• C’est un peu comme MacGyver sans son couteau
suisse
![Page 25: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/25.jpg)
Et pourtant !• Le développeur Web a longtemps été seul
• Souvent, un simple Notepad++ était son meilleur outil
![Page 26: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/26.jpg)
Mais cela a changé !• Nous avons désormais un ensemble d’IDE à notre
disposition pour nous aider !
![Page 27: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/27.jpg)
Webstorm• Produit par Jetbrains• Spécialisé pour répondre au large panel de
nouvelles technologies du Web
![Page 28: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/28.jpg)
@YourTwitterHandle
Demo
![Page 29: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/29.jpg)
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
![Page 30: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/30.jpg)
@YourTwitterHandle#DVXFR14{session hashtag}
Un back
end
en JS
!
![Page 31: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/31.jpg)
Autrefois …• Si nous voulions gérer un projet pur JavaScript, nous étions seul
au monde
• … encore …
![Page 32: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/32.jpg)
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
![Page 33: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/33.jpg)
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');
![Page 34: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/34.jpg)
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);
![Page 35: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/35.jpg)
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
![Page 36: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/36.jpg)
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
![Page 38: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/38.jpg)
Et ce n'est pas que pour les POCs
• http://nodejs.org/industry
![Page 39: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/39.jpg)
@YourTwitterHandle
Let’s
CODE!
![Page 40: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/40.jpg)
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
![Page 41: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/41.jpg)
@YourTwitterHandle#DVXFR14{session hashtag}
Mon fro
ntend
en pu
r JS
![Page 42: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/42.jpg)
@YourTwitterHandle#DVXFR14{session hashtag}
Sommair
e
![Page 43: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/43.jpg)
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
![Page 44: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/44.jpg)
@YourTwitterHandle#DVXFR14{session hashtag}
Marre d
u
"alert
('...');
"
![Page 45: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/45.jpg)
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
![Page 46: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/46.jpg)
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
![Page 47: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/47.jpg)
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
![Page 48: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/48.jpg)
Aperçu configurations
![Page 49: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/49.jpg)
Aperçu pour la partie HTML
![Page 50: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/50.jpg)
Aperçu pour la partie JavaScript
![Page 51: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/51.jpg)
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
![Page 52: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/52.jpg)
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
![Page 53: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/53.jpg)
Aperçu …
![Page 54: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/54.jpg)
Aperçu …
![Page 55: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/55.jpg)
Aperçu …
![Page 56: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/56.jpg)
@YourTwitterHandle
Demo
![Page 57: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/57.jpg)
@YourTwitterHandle#DVXFR14{session hashtag}
Initiali
ser un
projet
![Page 58: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/58.jpg)
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
![Page 59: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/59.jpg)
Et pour cela ?
![Page 60: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/60.jpg)
@YourTwitterHandle
Demo
![Page 61: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/61.jpg)
@YourTwitterHandle#DVXFR14{session hashtag}
Et po
ur mon
jQuery
?
![Page 62: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/62.jpg)
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 ?
![Page 63: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/63.jpg)
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
![Page 65: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/65.jpg)
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
![Page 66: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/66.jpg)
@YourTwitterHandle
Demo
![Page 67: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/67.jpg)
@YourTwitterHandle#DVXFR14{session hashtag}
Organis
er
mon co
de
![Page 68: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/68.jpg)
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> <!-- To infinity ... and beyhond ! --> <script type="text/javascript" defer="defer" src="./main.js"></script> </head>
![Page 69: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/69.jpg)
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 » ?
![Page 70: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/70.jpg)
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
![Page 71: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/71.jpg)
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
![Page 72: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/72.jpg)
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• …
![Page 73: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/73.jpg)
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
![Page 74: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/74.jpg)
@YourTwitterHandle
Demo
![Page 75: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/75.jpg)
@YourTwitterHandle#DVXFR14{session hashtag}
Alive
It’s ali
ve !
IT’S A
LIVE !
![Page 76: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/76.jpg)
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
![Page 77: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/77.jpg)
Jetons un œil chez Maven 3.2.1
![Page 78: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/78.jpg)
Et chez Gradle ?
![Page 79: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/79.jpg)
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• …
![Page 80: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/80.jpg)
Exemple:
![Page 81: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/81.jpg)
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
![Page 82: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/82.jpg)
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 …
![Page 83: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/83.jpg)
GruntJs et son API
![Page 84: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/84.jpg)
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• …
![Page 85: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/85.jpg)
@YourTwitterHandle
Demo
![Page 86: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/86.jpg)
@YourTwitterHandle#DVXFR14{session hashtag}
FUUUSIO
N !
![Page 87: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/87.jpg)
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
![Page 88: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/88.jpg)
On obtient une transversalité !• Un même technologie partout
![Page 89: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/89.jpg)
Et pour ce faire• Si nous voulons étendre un module backend: utilisation de NodeJs
• Si nous voulons étendre un module frontend: utilisation de Bower
![Page 90: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/90.jpg)
@YourTwitterHandle
Demo
![Page 91: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/91.jpg)
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
![Page 92: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/92.jpg)
@YourTwitterHandle#DVXFR14{session hashtag}
Les te
sts et
les rap
ports
de
qualit
és
![Page 93: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/93.jpg)
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• …
![Page 94: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/94.jpg)
Dans le monde Java• Cela se traduit par:• Des rapports Junit• Des rapports Cobertura• De la JavaDoc / Oxygen• Des rapports Checktyle, PMD, …
![Page 95: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/95.jpg)
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
![Page 96: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/96.jpg)
@YourTwitterHandle#DVXFR14{session hashtag}
Les Te
sts
(First
off co
urse
)
![Page 97: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/97.jpg)
Ce que nous voulons faire
Des TUs Des TFsEcrire
Les exécuter
Dans un navigateur headless
Pour produire <XML/
>
Et alimenter
![Page 98: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/98.jpg)
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)
![Page 99: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/99.jpg)
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
![Page 100: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/100.jpg)
PhantomJs• Nous utilisons souvent Karma avec PhantomJs• Basé sur Webkit
NAVIGATEUR HEADLESS=
! AUTOMATISATION!
![Page 101: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/101.jpg)
@YourTwitterHandle
Demo
![Page 102: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/102.jpg)
@YourTwitterHandle#DVXFR14{session hashtag}
Documen
tati
on et
qualim
étrie
![Page 103: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/103.jpg)
Elle est où la doc ?
JSDoc 3
![Page 104: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/104.jpg)
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
![Page 105: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/105.jpg)
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• …
![Page 106: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/106.jpg)
@YourTwitterHandle
Demo
![Page 107: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/107.jpg)
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
![Page 108: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/108.jpg)
@YourTwitterHandle#DVXFR14{session hashtag}
L’intég
ratio
n dan
s une
IC
![Page 109: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/109.jpg)
Nous voulons… valider
JSDoc 3
2- compiler
3 -analyser 4- documenter
Checkstyle reports
1- Mettre à jour les dépendances
5- tester
Junit & cobertura reports
![Page 110: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/110.jpg)
Nous voulons… produire un livrable
• Minification
• Optimisation
• Obfuscation
• Manifest HTML5
![Page 111: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/111.jpg)
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
…
![Page 112: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/112.jpg)
Aperçu
![Page 113: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/113.jpg)
En bref• Notre projet pourra s’intégrer assez facilement dans les différentes
intégration continue
![Page 114: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/114.jpg)
@YourTwitterHandle
Demo
![Page 115: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/115.jpg)
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
![Page 116: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/116.jpg)
@YourTwitterHandle
One
more
thing
![Page 117: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/117.jpg)
Tout ça a dû vous faire peur …
![Page 118: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/118.jpg)
Ou pire …
![Page 119: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/119.jpg)
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 !
![Page 120: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/120.jpg)
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
![Page 121: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/121.jpg)
Ce qui nous donne
![Page 122: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/122.jpg)
Et les templates sont légions
![Page 123: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/123.jpg)
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
![Page 124: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/124.jpg)
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
![Page 125: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/125.jpg)
@YourTwitterHandle#DVXFR14{session hashtag}
Et les
autre
s ?
![Page 126: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/126.jpg)
Maven/GradleCommandes shell pour exécuter node.jsMaven : pl.allegro:grunt-maven-pluginGradle : com.moowork.gradle:gradle-grunt-plugin
Cycles de vie !Packaging
![Page 127: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/127.jpg)
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
![Page 128: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/128.jpg)
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
![Page 129: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/129.jpg)
@YourTwitterHandle#DVXFR14{session hashtag}
Conclu
sion
![Page 130: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/130.jpg)
En une phrase pour commencer
![Page 131: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/131.jpg)
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
![Page 132: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/132.jpg)
… où on pourra dire …• Qu’il y a eu un avant et un après
2004 2014
![Page 133: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/133.jpg)
Avec des bonnes nouvelles !!
![Page 134: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/134.jpg)
En une phrase pour finir
![Page 135: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/135.jpg)
@YourTwitterHandle#DVXFR14{session hashtag}
Q & A
![Page 136: Javascript as a first programming language : votre IC prête pour la révolution !](https://reader036.vdocuments.net/reader036/viewer/2022062904/587b61851a28ab38258b5b21/html5/thumbnails/136.jpg)
Ceux que nous n'avons pas cités