Tony Stark préfère JavaScript

(et ça se comprend)

Christophe Porteneuve @ W3Café • 29/06/2012, Paris

Politesses d’usage

Christophe Porteneuve

Ciblo, Delicious Insights, Paris-Web

Git Attitude, JS Attitude

Git, Rails, « HTML5 », JavaScript/CoffeeScript…

@porteneuve

Le thème de l’atelier

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 !

Why Tony Stark?!

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)

Plan d’attaque

  1. Dépoussierer l’image de JavaScript
  2. Montrer qu’on peut faire du JS de très haute qualité
  3. Halluciner sur les technos modernes dans le navigateur
  4. Halluciner sur les technos modernes hors du navigateur
  5. Réaliser que JS est un moyen, pas une fin. Une runtime.
  6. Pouvoir aller plus loin
  7. Conclure

Mamie pense que…

(l’image éculée mais persistente de JavaScript)

C’est un jouet
(applets, marquees, validation de formulaire)

C’est lent

NON. NON. NON !

Langage typé, dynamique, fonctionnel, prototypal, rapide

JS vs. jQuery

(ne pas confondre)

(ni avec Jake Weary)

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 !

JS blindé

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.

Structurer son JS

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

Tester son JS

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 ?

Documenter son JS

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 ?

Surveiller son JS

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.

Auditer son JS

Auditer les bonnes pratiques

JSLint. Les bons éditeurs peuvent le lancer en sauvant ;-)

Tony désapprouve : JSHint

Auditer les performances

En console web : waterfall, timeline, mémoire, profiling

Avec du code : Navigation Timing API

En crowdsourcing : JSPerf

JS de fou côté client

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.

Offline

Détecter la connectivité

Événements dédiés sur window

Propriété navigator.onLine

Application cache

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.

Stockage côté client

Multitude d’utilisation possibles pour une meilleure UX : auto-save, pile undo/redo, profil/préférences…

3 technos principales

Local persistent avec localStorage

Local temporaire avec sessionStorage

Gros persistent avec IndexedDB

Au-delà d’Ajax

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…

GFX (2D)

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

Et rien qu’avec CSS…

On a les transforms, les transitions et les animations

Et on voit arriver le début des filtres !

GFX (3D)

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…

GFX (typographie)

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

Multimédia

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 !

UX

Y’a pas qu’Ajax et les lightboxes dans la vie…

Full Screen

Pointer Lock

Drag and Drop (y compris avec le reste de l’OS)

Gamepad

Web Workers

La vie n’est qu’un jeu

Nombreux moteurs de jeux en JS

Regardez ce que fait Zynga avec Aves…

Impact, Construct 2, Crafty

On a eu plein de pixel tributes, mais ne vous y trompez pas : on a plein de trucs plus modernes aussi

App Frameworks

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

Full stack

Client + Serveur ? J’adore Tower.js

All your device are belong to me

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 fait des apps !

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 !

Mobile Web/Apps

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


Voie hybride : PhoneGap, Titanium

Voie native : après feu webOS, je bave sur B2G et Gaia

Une dernière chose…

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 hors du navigateur

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 »…

Moteurs

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)

REPL

jsc : JavaScriptCore sur Mac.

node : Node.js (REPL ou processus serveur…)

(à découvrir aussi : Node.js-Ultra-REPL)

java -jar js.jar : Rhino Shell

Node.js

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.

Headless browsers

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 !

JS comme langage cible

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

CoffeeScript

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

coffeescript.org

Mais pas que…

Narcissus, TameJS, ClosureScript,
ADsafe, Roy

Dart

(LOL)


Et plein d’autres encore !

Emscripten / LLJS

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!

Emscripten sur Github

Où fouiller ?

Pas sur…

developpez.*, commentcamarche.net, w3schools

Mais sur…

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

Conclusion

JS est le langage n°1

Mais si. Je vous jure.

Vastes opportunités de carrière

Je n’ai jamais rencontré un expert JavaScript au chômage

— Rebecca Murphey


Merci.

http://delicious-insights.com/tspj