Christophe Porteneuve
Ciblo, Delicious Insights, Paris-Web
Git Attitude, JS Attitude
Git, Rails, « HTML5 », JavaScript/CoffeeScript…
@porteneuve
Sortir de la vision superficielle et surannée de JavaScript
Faire un tour d’horizon de JS et son écosystème moderne
(bibliothèques, technologies « natives », etc.)
Montrer la puissance
Donner envie !
Parce qu’il arrache !
Tony Stark c’est un peu Géo Trouvetout mais avec la classe, le bagou, sans parler de la frime…
…et il aime la techno qui déchire
(qui envoie du bois)
(qui roxxe des poneys)
Du coup, le choix était évident (si si)
C’est un jouet
(applets, marquees, validation de formulaire)
C’est lent
Langage typé, dynamique, fonctionnel, prototypal, rapide
JavaScript est un langage
(JavaScript est le langage !)
jQuery est une bibliothèque (qui a un énorme succès)
jQuery est un DSL pour le DOM, les CSS, l’Ajax…
Beaucoup trop de gens connaissent bien jQuery et…
…(à peu près) rien à JavaScript !
Côté backend, vous faites ça bien, non ?
Structurer. Tester. Documenter. Surveiller. Auditer.
Je veux dire, même pour du PHP, vous faites ça. Un peu.
Même pour de l’ASP, quoi ! C’est dire !
Et JS, rien ! Si, avouez, rien ! C’est le dawa !
C’est quoi ce délire ? On est schyzophrènes ou quoi ?
Pourtant, on n’a aucune excuse. Y’a tout ce qu’il faut.
Au minimum, comprendre et exploiter le module pattern
Les modules (essayer, c’est adopter !) : à la sauce CommonJS ou AMD (et bientôt en natif)
Oui mais plein de fichiers c’est le mal ! HTTP ça rame !
X fichiers en dev ≠ X fichiers en prod !
Outils de build ! Sprockets, Brunch, Yeoman, et tous ceux inclus dans les (bons) frameworks
U Unitaires avec QUnit. Intégration avec Jasmine.
Mais Tony sez: Mocha!
Bien sûr, y’a aussi Selenium…
…mais pour la CI, j’adore PhantomJS et CasperJS !
Sans oublier la surcouche sympa de BusterJS…
Et connaissez-vous BrowserStack et bunyip ?
La solution traditionnelle est JSDoc. Beuargh !
Bon, après, si vous voulez pondre une doc très « référence API »… J’aime bien PDoc.
Le literate programming fait un retour en force et c’est très bien. L’outil de référence, tout simple, est Docco.
Pour les fondamentaux, y’a dochub.io…
…et pour les vôtres, pourquoi pas readthedocs.org ?
Côté serveur, vous avez sans doute un exception reporting en place, non ? Mais pas côté client.
Tsk, tsk.
Plusieurs SaaS ces derniers mois, notamment
errorception et
Proxino.
Une mine d’or d’informations sur des bugs pas toujours reproductibles en dev/CI.
JSLint. Les bons éditeurs peuvent le lancer en sauvant ;-)
Tony désapprouve : JSHint
En console web : waterfall, timeline, mémoire, profiling…
Avec du code : Navigation Timing API
En crowdsourcing : JSPerf
Déjà, je vous rappelle qu’on a ES5 et bientôt ES6 / ES.next / Harmony
Nous allons parler d’offline, de stockage client, de réseau, de graphisme, de multimédia, d’UX, de jeux, de frameworks applicatifs, de capacités du périphérique et de mobile. Rien que ça.
Et aussi de quelques p’tites libs que j’adore et qui gagnent à être connues.
Événements dédiés sur window
Propriété navigator.onLine
Manifeste des parties de l’appli qu’on peut mettre en cache, remplacer si offline, ou exigeant l’online
Bonnes docs chez Mozilla (come toujours…)
Mais attention : AppCache est un connard
…heureusement, on a cet excellent redux.
Multitude d’utilisation possibles pour une meilleure UX : auto-save, pile undo/redo, profil/préférences…
Local persistent avec localStorage
Local temporaire avec sessionStorage
Gros persistent avec IndexedDB
Ajax multi-domaines avec CORS
Plus de possibilités d’envoi avec XHR2 (dont l’upload)
La solution leader : Socket.IO. Exemple rigolo : now.js
Pour du Serveur ⇒ Client seulement, on peut déléguer à Pusher ou passer par les Server-Sent Events
Mozilla bosse sur les notifications « push » aussi…
Dessiner ce qu’on veut avec <canvas>
Jouer la finesse avec SVG (avec ou sans Raphael.js)
(ou à l’intersection canvas/SVG, on a Paper.js…)
Optimiser son timing avec requestAnimationFrame
On a les transforms, les transitions et les animations
Et on voit arriver le début des filtres !
On a du lourd directement : WebGL
Un peu chaud à prendre en main, mais on a des super surcouches, notamment le très populaire three.js
Accéléré GPU par les navigateurs modernes, on atteint des performances qui font plaisir…
Désormais dispo partout : @font-face
La plaie à gérer manuellement car foutoir de formats
Heureusement, on a TypeKit, FontDeck, FontSquirrel ou à défaut Google Web Fonts Directory
On peut désormais jouer de l’audio et de la vidéo en natif.
En théorie.
Gros clusterfuck sur les formats
Mais y’a des surcouches et des services en ligne
Markup et API assez pointus/configurables
Quant au son, on peut aussi le générer et le manipuler !
Drag and Drop (y compris avec le reste de l’OS)
Nombreux moteurs de jeux en JS
Regardez ce que fait Zynga avec Aves…
On a eu plein de pixel tributes, mais ne vous y trompez pas : on a plein de trucs plus modernes aussi
Vraie tendance forte. Backbone a mis le feu aux poudres
Plein ont suivi : Spine, Ember…
ou construit par-dessus : Chaplin, Thorax…
Mon p’tit chéri : Batman.js
Complexité/archi croissantes du JS côté client :
prenez du recul et suivez de vraies bonnes pratiques
Client + Serveur ? J’adore Tower.js
Les Device APIs vont nous permettre d’accéder directement à de nombreuses capacités du périphérique, qu’il soit classique ou mobile.
Orientation, géolocalisation, niveau de batterie, webcam et micro, connexion réseau, NFC, vibreur…
Mais aussi la possibilité d’aller piocher dans les fichiers, le calendrier, les contacts, les photos et vidéos…
On faisait déjà des widgets OSX ou Win7 (clips IE)…
Il y a aussi déjà le Chrome Web Store
Et comme l’a dit David, JS ⇒ apps Windows 8 / Metro
Mozilla travaille à un standard Web Apps et va fournir une marketplace et son implémentation open-source
Ça sent bon tout ça !
Dominique en parle à côté !
Le Web mobile est en train de doubler le desktop…
On commence à avoir de bons outils
Il faut toutefois uniformiser les inputs mobile/desktop
Quelques libs JS, en vrac, qui gagnent à être connues :
Underscore.js, XRegExp, Moment.js et Kalendae, Highcharts, session.js, messageformat.js, Cryptico.
Côté templating, vous connaissez sûrement Mustache et Handlebars, mais vous devriez regarder Jade.
JS était initialement aussi prévu pour le serveur…
C’est Node.js qui a rescussité ça
Parlons un peu des moteurs, consoles et navigateurs « headless »…
V8 : runtime de Google utilisée notamment par Chrome et Node.js. Très performant.
Rhino : runtime en Java de Mozilla. Compatible JS 1.7.
JavaScriptCore / Squirrelfish / Nitro : runtimes d’Apple (Mac, iOS)
jsc : JavaScriptCore sur Mac.
node : Node.js (REPL ou processus serveur…)
(à découvrir aussi : Node.js-Ultra-REPL)
java -jar js.jar : Rhino Shell
Merci Ryan Dahl, hein, quand même.
A remis l’asynchrone (notamment I/O) au cœur du débat
Socle de référence pour les web sockets
Gros atout presque dès le début : npm
Explosion cambrienne de projets, là…
Performances ahurissantes. Ex. Sashimi.
PhantomJS : WebKit (dont JavaScript)
CasperJS : scripting de PhantomJS
BusterJS : couteau suisse d’automatisation JS
Hélas pas encore de Gecko ni d’IE en headless… BrowserStack + bunyip !
JavaScript n’est pas utilisé qu’en tant que tel,
loin s’en faut
Les runtimes deviennent si quali, si rapides, si omniprésentes, que ça fait un excellent « bytecode », au « cible de compilation ».
On parle de transpiling
La meilleure invention depuis le pain tranché !
Absolument pas « JS pour les noobs » : les gurus adorent…
Plus lisible
Promeut les bonnes pratiques
Génère du code clean, universel et performant
Grosse inspiration pour ES.next
Narcissus,
TameJS,
ClosureScript,
ADsafe,
Roy…
(LOL)
Compilez vos libs natives préférées… vers JS
Pas encore de plugin ? On se débrouille !
Crypto, réseau, graphisme, SGBD, codecs…
Les performances se rapprochent doucement de celles de la version native ! We live in the future!
developpez.*, commentcamarche.net, w3schools
Docs / veille : MDN, DailyJS, JavaScript Weekly
Pundits : @paulrouget, @paul_irish, @BrendanEich…
Meetups et conférences : parisjs, w3café, JSConf.eu, JSConf.us, Fluent, Backboneconf, Nodeconf…
Formations : JS Attitude, Nodejitsu…
Vastes opportunités de carrière
Je n’ai jamais rencontré un expert JavaScript au chômage
— Rebecca Murphey