DevFest: GDG de Nantes du 9 novembre 2012 #html5 #animation #offline #angularjs

C’est l’Epitech (@EPITECHNantes) qui nous accueille pour cette DevFest du GDG de Nantes  (Google Development Group). J’ai été un peu surpris: j’ai vu plusieurs jeunes filles dans les salles de classe. Le monde aurait-il changé? 🙂

J’arrive un chouille en retard à la keynote de départ malgré un réveil à 6h, je n’aime pas ça. #maniac.

On sent tout de suite l’ambiance: c’est cool. Equipes de choc jeunes et motivées, massivement relookées par AngularJS (on ne vantera jamais assez la puissance marketing des tshirt), pas de pépin majeur dans l’organisation, on a bien mangé et le wifi fonctionne: de quoi pourrait-on se plaindre? 😉

On baigne évidemment en pleine google mania (ce n’est pas un reproche), c’est avec un peu de timidité que je sors pour la première fois mes ustensiles flanqués de pommes croquées, effrayé que je suis de me faire écharper par tous ces petits robots verts. Mais ça se passe bien, tout le monde est très gentil 🙂

Le pogramme se divise en 4 tracks, et tu fais ta sélection. En ce qui me concerne, désolé pour les développeur android, je me suis cantonné à la track « web ».

La plupart des conférences ont été filmées un peu à l’arrache avec des chtiotes webcams mais sont déjà dispo sur le channel YouTube DevFestNantes. Je salue l’effort mais c’est hélas souvent difficilement regardable.

10:10 – 11:10 : GWT offline et HTML5 (video)

Je découvre GWT (Google Web Toolkit) qui si j’ai bien compris compile du code java vers du javascript optimisé et donc illisible, qui devient en quelque sorte un « assembleur du web ». L’orateur Sami Jaber est ultra performant, rythme soutenu et promotion de GWT et HTML5 sans nuance. Je n’ai pas d’avis sur la question mais on croisera dans la journée des personnes moins convaincues de la pérennité de GWT.

On a causé App Cache et Local Storage. Parait que nous sommes dans du web green! 🙂 Solicitation minimum des serveurs, invitation à privilégier l’offline tant que faire se peut, même en mode connecté.

Je découvre les manifestes (App Cache) qui permettent de gérer la pertinence de rechager ou pas l’appli web ou certaines resources selon le contexte.

Nous sommes dans du code optimisé et dédié, la cible n’est pas les sites institutionnels, on vise les web app avec déclinaisons pour chaque browser: on appelle ça des permutations. Le code java est compilé vers plusieurs permutations: un output par browser.

11:20 – 12:20 : Big Data and HTML5 (video)

13:30 – 14:30 AngularJS (video)

J’ai bien aimé. Je serais curieux de tester. En gros il s’agit d’ajouter des balises, des directives, pour créer des liens entre 2 couches qui se veulent distinctes: la vue (DOM) et le modèle.

Une automatisation des liens bidirectionnels entre les données et les variables permet si on en croit l’excellent Vojta Jína de gagner du temps sur l’écriture du code, d’avoir une meilleure lisibilité et de gros avantages en termes de test.

Mais surtout c’est conceptuellement plus « haut niveau ». Plus besoin d’aller à la pêche au elements du DOM pour manipuler les valeurs, gérer les events, « ça marche tout seul ». Enfin c’est c’est l’argumentaire vendeur 🙂

J’ai été assez séduit mais je ne sais pas trop quoi en penser. A tester donc: http://angularjs.org/

Edit 11/11/12-10:56: suite à un commentaire de Yacine, j’inclue sa présentation en français d’AngularJS. Merci Yacine (@yrezgui) 🙂

14:40 – 15:40 : HTML5 Offline

Intéressant mais pas grand chose à en dire puisque finalement on discute des même sujets qu’à la première conférence. Je n’insiste donc pas. J’aurais du à titre personnel choisir une autre track pour ce crénau mais bon, pas bien grave.

16:00 – 17:00 : animation HTML5 (non prévue au programme)

Un tour d’horizon des techniques d’animation offertes par ces nouvelles technologies web, en alternative aux grands méchants plugins, Flash et autres Silverlight. Martin Görner nous résume en 4 chapitres et démos à l’appui les principales techniques pour faire bouger des bidules sur ta page web, de la plus simple translation 2D au voyage dans l’espace 3D en WebGL de la mort qui tue.

Dans l’ordre de complexité:

1. CSS3: ces merveilleuses feuilles de style dernière génération t’autorisent à définir des propriétés, des altérations de ces propriétés, des transformations spatiales (translation, échelle, rotation), mais aussi des délais pour appliquer la modification de ces propriétés, au browser de calculer les étapes intermédiaires et donc l’animation. (voir) A noter que nous allons tout de même jusqu’à la 3D (voir)
2. SVG + SMIL: le SVG est dangereux pour la santé mentale. Il t’aguiche avec ces folles possibilités du monde vectoriel, malheureusement son support reste souvent décevant. Ce n’est évidemment pas une raison pour ne pas s’y intéresser (voir).
3. Canvas + Javascript: arrive un moment où tes animations demandent plus d’intelligence que la simple définition d’un état de départ et un état d’arrivée. Tu entre de plein pieds dans la programmation, il t’en faut plus sous le coude. Tu découvres alors le monde des canvas. Le canvas est un espace qui te donne accès à des fonctions de dessin diverses (+ gestion d’images). Tu gères l’animation si tu en souhaites une, tu vas alors devoir redessiner des frames x fois par seconde grâce à des boucles d’animation.
4. WebGL + THREE.js: l’ultime étape c’est la vraie 3D. Ouvre ce slide et clique dessus. Tu devrais voir un univers 3D dans lequel tu peux avancer en appuyant sur le bouton gauche de ta souris. On utilise ici du WebGL interfacé par THREE.js pour nous pauvres javascripteurs. La 3D est un monde spécial, il faut s’habituer à définir des scènes, des caméras, des lumières, des textures et bien sûr des objets. Mais c’est passionnant 🙂

Quelques folles démo tirées de la présentation:

• Matières, bump mapping
• Environment map, bump map, ombres
• Lava shader
• Particules et GPGPU
• Glass shader
• Aquarium
• Beercamp 2012 (CSS3 + SVG)
• Tour de France (Avec Google Maps et Earth)
• Cirque du soleil: Movi Kanti Revo (CSS 3D)
• Versailles: chaos to perfection (WebGL)

Et bien sur, le bémol final à ne jamais oublier: tout ne marche pas partout.

Un petit regret, ne pas avoir rencontré the darty guys. Ahahah 🙂

Dieu sait que je vante les mérites du télétravail, mais c’est sympa aussi d’avoir l’occasion de sortir de sa tanière. J’ai été ravi de rencontrer entre autres @ltoinel (http://www.geeek.org), @NicolasPieuchot ou encore @gcouprie.

Notes en vrac

Ce site a été cité plusieurs fois: Can I Use? semble être un utilitaire reconnu. Par exemple pour connaitre la compatibilité du Local Storage

http://animateyourhtml5.appspot.com/

http://fhtr.org/BasicsOfThreeJS/

Quelques photos