Accueil > Big Data, Mobile, Objets connectés, Web > Le meilleur du web à la conférence ‘Best Of Web 2015′ du 5 juin 2015.

Le meilleur du web à la conférence ‘Best Of Web 2015′ du 5 juin 2015.

Bonjour,

J’ai eu la chance d’assister ce vendredi 5 Juin dernier, au premier Meetup ‘Best Of Web 2015′, qui a rassemblé pas moins de 500 développeurs, dans ‘La nouvelle Crypte’, PARIS 17ème, lieu un peu insolite, mais bien équipé pour l’organisation de conférences.

Ce meetup ‘Best Of Web 2015′ réunissait les speakers de 8 meetups parisiens, axés sur les technos émergentes autour de javascript et ses fameux frameworks de développement que sont Backbone.js, Angular.js et Ember.js, mais pas que,puisqu’il a aussi été question de REST, ES6, Data Visualisation, CSS3, PhoneGap Cordova, Kinect, et j’en passe…

Sponsorisé par VISEO et plusieurs autres acteurs de l’IT de Paris et de France, l’organisation fut au top, l’ambiance légère et les présentations
minutées au cordeau, le tout avec le stand VISEO, superbement placé entre celui d’Eleven Labs (qui diffusait Roland Garros) et celuide Firefox OS.

Comme il n’y avait pas 2 talks en même temps, chacun a pu suivre l’intégralité des présentations :

http://bestofweb.paris/#scheduleBest of web 2015

 

Retour rapide sur les talks de ce meetup exceptionnel.

 

9:00 – Keynote by Christophe Porteneuve

 

Christophe Porteneuve est un accro des standards depuis 2000, de Ruby depuis 2005, de Mac et du web mobile depuis 2008, contributeur à Prototype,
président 2008-2009 de Paris-Web, évangéliste NodeJS et animateur des excellents blogs spécialisés JS et GIT, que sont js-attitude.fr et git-attitude.fr !

Faute d’avoir pu trouver la video de sa keynote, qui vallait vraiment le détour, voici ses slides http://bit.ly/web-storm qui sont toujours aussi agréables à lire qu’à écouter (si, si) !

Il y passe en revue le net depuis l’époque où la balise <image> n’existait pas, et nous donne une idée de ce qu’il entrevoit pour le futur du développement web, je résume:
– 2015 est l’année de l’avènement de l’ECMAScript6, d’après lui, on va bientôt dire adieu à bower et aux module AMD, qui devraient être remplacés par npm et la syntax commonJS (module, require, export)
– aujourd’hui, les outils d’industrialisation qui n’ont plus rien à envier à ceux du monde Java, sa préférence allant à Brunch.js
– dans le monde mobile hybride, il faut maintenant penser « OFFLINE first ».
– sans oublier la révolution Node JS qui est en marche !

Bref, son credo pour demain, que je partage : « JS everywhere! »

 

9:30 – REST World:  les API REST (v0-v5) by Virginie Bardales

 

C’est en passant du développement back au front, que Virginie s’est aperçu que les développeurs ne connaissaient que superficiellement

les API REST, et le gain qu’ils auraient de se mettre aux API RESTful (ou REST v3).
Pour rappel, en HTTP 1.1, nous disposons des méthodes : GET, POST, PUT, DELETE pour faire des appels serveur, mais il en existe tout plein d’autres !

Dans son talk, Virginie nous explique que :
– une ressource URI ne doit se trouver qu’à un seul endroit
– il faut utiliser les tirets et pas les majuscules
– il ne faut jamais utiliser de verbes dans les URI appelés car les actions doivent être portées par le verbe HTTP
– il faut utiliser les query parameters pour porter l’intelligence, i.e. les infos de pagination, filtre, tri, format retour.

Du coup, une API REST bien pensée serait auto-documentée (self-descriptive), et compréhensible au premier coup d’oeil !

GET /my/data?start=3&size=4

Dans les niveaux REST supérieurs, on peut même utiliser les HEADERS pour spécifier le format et la version d’API avec le header Accept.

Accept: application/org.example.data-v2+json

Ci-dessous, les slides de la présentation, qui fourmille de bonnes pratiques pour nos prochaines API !
http://nodejsparis.bitbucket.org/20140312/rest_world/

Ainsi qu’un excellent retour du talk, proposé par Jordane Grenat sur le sujet : http://blog.viseo-bt.com/rest-world-best-of-web-2015/

10:00 – Pourquoi choisir Backbone en 2015 by Florent Duveau

 

Sorti en 2010, créé par Jeremy Ashkenas, au moment où il travaille pour le NY Times, ce framework MVC est très majoritairement adopté (90% = Backbone + X, 8,9% = Ember, 0,1% = Angular) dans le développement des Single Page Application, et tourne en production notament chez AirBnB, linkedIn, BNP, soundCloud…
Et dans ce talk, Florent nous explique pourquoi, en toute subjectivité :-)

Selon lui, l’argument premier à l’adoption de Backbone, par rapport au monstre à huit têtes qu’est Angular.js, c’est sa flexibilité.

En effet, Backbone est un tout petit framework, une épine dorsale, sur laquelle, on va pouvoir *choisir* entre plein de surcouches utilitaires:
Bluebird, Marionnette, React, underscore/lodash/etc pour le templating, jquery/zepto/d3/etc… pour la manipulation du DOM.

Avec ses Models et Collections, notre application développée avec Backbone reflète à chaque instant, l’état de nos données.
Sa communication evenementielle sans Promise ou cascade de callbacks est simplissime, et les mainteneurs conservent depuis le début, le « One-way binding » vers quoi revient Angular dans sa future version 2.

Par contre, du fait de sa rudimentarité, Backbone doit reposer sur une belle API REST, telle que décrite plus haut !
http://slides.com/florentduveau/backbone2015-3/

 

11:00 – Kinect pour les développeurs web by Mickael Dumand

 

Mickael nous présente sa tentative de prise en main de la Kinect, via le Kinect SDK v2 pour developpeur JS, fourni par Microsoft.

Développeurs Mac, il vous signale qu’il vous faudra installer Windows 8+ en local, ainsi que l’éditeur Visual Studio pour pouvoir jouer avec l’API, et
s’amuser avec les caméras, capteurs, et microphones de la Kinect.

J’ai pas trop suivi sa démo, car j’écoutais mon voisin m’expliquer son projet avec la « Nod ring » https://nod.com/, mais semblait montrer comment on pouvait détecter une (ou plusieurs) personne(s) dans un champs de caméras, et ensuite récupérer les mouvements de la main, pour autant d’ordre à envoyer à son application préférée !

Article: http://www.ekino.com/kinect-v2-implementation-javascript/
Exemples d’interaction avec Kinect sur Github: https://github.com/ekino/ek-winjs-kinect (à télécharger et essayer avec sa Kinect)

 

11:30 – Automate your Cordova workflow by Paul Panserrieu

 

Paul Panserrieu fait un bref récapitulatif des projets PhoneGap racheté par Adobe, et Cordova de la Apache Software Foundation.
Il nous explique que ces 2 projets, permettent de wrapper une application mobile développée en HTML/CSS/javascript dans un code ‘conteneur’ natif, pour déploiement sur les Apple Store, Google Play ou Windows Store.

Son problème en tant que developpeur, est qu’il est très difficile de mettre en place plusieurs versions d’une même application, dans les différentes configurations matérielles, au même moment, au stade de la recette par exemple.

D’où la présentation de « tarifa », son outil de init/run/test/build basée sur node, npm et cordova.

Pour info, sur les 500 personnes de l’assistance, une petite centaine ont déjà utilisé Cordova, et environ 25 (j’ai compté) ont déjà déployé une appli en production. Peut mieux faire, non ?
Surtout pour l’utilisateur de Windows Phone que je suis, qui a un store à moitié vide :-(

Sinon, Paul présente les autres builders du marché :
– Ionic pour une SPA Angular
– PhoneGapBuild by Adobe

le sien se trouve ici : http://Tarifa.tools

 

12:00 – Visualisation en temps réel D3.js by Raphaël Luta

 

Raphael Luta nous parle de big data, très en vogue en ce moment, chez tous les décideurs, qui veulent percer le secret de leurs clients et/ou prospects.
Mais dans la représentation des données et autre reporting, rien ne les fait plus kiffer (les décideurs) qu’une animation en temps réels, plutôt qu’un pauvre histogramme, aussi interactif soit-il.

D’où la présentation d’aujourdhui de la librairie D3.js http://d3js.org/ qui permet de faire le lien entre un dataset et sa représentation graphique, grâce à son API qui va permettre de créer des noeuds dans le DOM du navigateur (ou dans un SVG) qu’on va pouvoir styler en CSS, et animer en javascript.

D3 a des parser natifs pour json, xml, html, et peut gérer de grosse volumétrie de données, ses méthodes enter() & exit() permettant d’ajouter & supprimer des données du graphique très rapidement, si bien qu’on peut faire des animations temps-réel assez facilement.

Dans sa démo, il se branche à twitter pour collecter les hashtags #bestofweb2015 (https://twitter.com/hashtag/bestofweb2015) que l’assistance se presse d’utiliser et créer à la volée un petit histogramme représentant le nb de tweet/seconde !
(Tiens, ça me rappelle ce qu’on fait chez Novedia avec le projet hubiquitus !!)

Quelques préconisations de Raphaël, pour améliorer les performances de vos animations futures :
– Utiliser des websockets plutôt que xhr si plus de 60 refraichissements/secondes
– Utiliser des canvas plutôt que le DOM ou SVG, qui sont de gros consommateurs de CPU
– Utiliser les web workers, et un thread dédié pour gérer trafic réseau (socket) et cache, pour les échange de données avec le navigateur (via la postMessage API)
– Faire de l’event batching : envoyer plus d’infos moins souvent, et du debounce des ‘handler functions’ côté front, pour les interactions sur le graphique.

Quelques libs complémentaires :
– Epoch.js alternative à D3.js: https://fastly.github.io/epoch/
– Streamdata.io pour faire du push de data: http://streamdata.io/

 

13:30 – Native Javascript apps with NodeWebkit.js by Jacopo Daeli

 

NodeWebkit.js (créé par INTEL) aujourd’hui NW.js http://nwjs.io/ est un moteur d’éxecution basé sur Chromium et NodeJS.

Il permet aux développeurs d’accéder à toutes les méthodes de node (ou io.js), d’appeler des packages npm et les utiliser directements dans le navigateur !
Cela va permettre de développer des applications de bureau, ayant un accès complet au système de fichier, et autres media connectés à l’ordinateur.

D’après Jacopo, c’est la technologie qu’utilise PopCorn time, pour ceux qui connaissent cette application, rebaptisée le «Netflix des pirates»,
permettant d’aggréger des torrents et de « streamer » un film et ses sous-titres en live, sur son ordinateur…

Pour essayer NW.js, rien de plus simple :
npm install -g nw

Jacopo nous fait ensuite une démo de Stream flux vidéo d’une camera, sur une url servie par express, dans un canvas mis à jour toutes les 33ms. Pas mal !
Le code de la démo est disponible sur http://github.com/jacopoDaeli/Bestof-web-paris-2015

Autres informations sur NW:
– Documentation disponible sur https://github.com/nwjs/nw.js
– Desktop App possibilities (2013) http://oldgeeksguide.github.io/presentations/html5devconf2013/wtod.html/

 

14:00 – CSS Grid, le futur de vos mises en page by Mathieu Parisot

 

Nous nous sommes tous frottés au problème suivant : Comment styler facilement un formulaire un peu chiadé, avec des champs qui n’ont pas tous la même longueur, ni le même alignement, et doit s’afficher différemment sur un écran mobile …

Bien sûr, on peut aller vite et s’en tirer avec les frameworks de grid que sont Bootstrap, fondation, 960cssgrid.

Mais l’instance du W3C en charge de l’avenir de CSS nous prépare une nouvelle norme.

On connait la spec ‘CSS Flexbox’ http://philipwalton.github.io/solved-by-flexbox/ qui est déjà implémentée dans pas mal de navigateurs, mais moins la prochaine spec CSS ‘Grid Layout’ qui, d’après Mathieu Parisot, va encore nous simplifier la vie en terme de mise en page.

– Le conteneur aura la propriété CSS : {display: grid}
– et ses enfants, quelques nouveaux mots-clés sympas comme ‘grid-template-columns’, ou une syntaxe du style:

grid-template-rows : repeat(5, 200px)

Yeah !

On pourra nommer des zones du document via ‘grid-template-areas’ et ‘grid-area’ et surtout faire de l’héritage avec ‘subgrid’

Apparait aussi une nouvelle unité : 1 fr = fraction espace restant, ça promet !

Exemples : http://gridbyexample.com/what/

 

14:30 – ES2015 ready Angular web stack by Douglas Duteuil

 

ES2015 aka ES6 aka ECMAScript6 est la future version du langage Javascript attendu par toute la communauté, pour cette année ou l’année prochaine.

Une librairie <https://babeljs.io/> est déjà sortie pour compiler le code écrit en ES6, en du javascript ES5 interprétable par les navigateurs actuels !

Douglas Duteuil, lui, a créé une winning ‘stack’ (sa traduction: usine de développement !) lui permettant d’utiliser ES6 pour créer des applications Angular 1.x

Il s’appuie sur system.js <https://github.com/systemjs/systemjs> qui est un chargeur universel de module (ES6, commonJS, AMD) pour browser et NodeJS, et son package management system JSPM <http://jspm.io/> pour faire de l’injection de dépendance.
JSPM écrit un System.config que system.js va utiliser pour charger les modules via ‘System.import(« ./app.js »)’

Dans sa ‘stack’, on trouve aussi:
– Jshint/Eslint avec l’option « esnext » pour linter son code écrit en ES6
– « Isparta » : un outil de couverture de test maison pour ES6, car Istambul n’est pas porté sur ES6.

Balaise !

 

15:30 – Web Audio Now by Samuel Goldszmidt & Norbert Schnell

 

Samuel et Norbert sont 2 chercheurs de l’IRCAM http://www.ircam.fr/projets.html (Institut de recherche et coordination acoustique/musique) rencontrés par l’organisateur du Meetup, Cyril Balit, alors qu’il se promenait avec sa femme et sa fille, faisant une performance de rue, autour du son et d’un navigateur web !

En 2010 est née la Web audio API, qui permet le traitement et Synthèse de fichier audios dans le navigateur.
(On pourra l’utiliser notament dans le futur navigateur de Microsoft « Edge », nouveau nom du projet « Spartan »)

Ils ont organisé la 1ere WAC « 1st Web Audio Conference », à l’Ircam en Janvier 2015. Il existe aussi des AudioWorker pour utiliser plusieurs threads et améliorer les perfs.

Leurs démos du jour:
– Un synthétiseur en 20 lignes de code javascript
– des applis pour iOS et Android, permettant de jouer du son, à plusieurs, juste en bougeant son smartphone, dans tous les sens !!

D’autres exemples:
http://cosima.ircam.fr/checks
http://chloe.ircam.fr/

 

16:00 – Material Design avec Polymer.js by Martin Gorner

 

Le « Material design » by Google est un concept de qraphisme qui se veut épuré et informatif, basé sur de légères animations ou transitions qui, utilisées à bon escient, font immédiatement comprendre l’utilité et l’utilisation d’un composant web.
exemples : http://google.com/design

Pour ce faire, Google propose un catalogue de composants Web, dans lequel on va pouvoir piocher à l’envie, pour faire du material design, et porter l’UX à son plus haut !
Catalogue : https://elements.polymer-project.org/

Mais Polymer.js https://www.polymer-project.org/1.0/ qui vient tout juste de sortir sa version 1.0 en production, est bien plus qu’un catalogue.

C’est une librairie, qui va permettre de créer des Web Components, soit de nouvelles balises HTML5 que les navigateurs vont pouvoir interpréter, embarquant son template html, son js et son css.
Exemple :
J’ajoute dans mon HEAD, le script polymer.js et un lien vers le composant <link rel=import href=user-gravar.html>, pointant sur le fichier du type :

<polymer-element name="user-gravatar" attributes="email">
  <template>
    <img src="https://secure.gravatar.com/avatar/{{gid}}" />
  </template>
  <script>
    Polymer('user-gravatar', {
      ready: function() {
        this.gid = md5(this.email);
      }
    });
  </script>
</polymer>

et je vais pouvoir utiliser dans mon code HTML de mon BODY, la balise :

<user-gravatar email="name@example.com"></user-gravatar>

qui sera interpréter par le navigateur en :

<img src="https://gravatar.com/avatar/264aa0ecd52d37fc67b22eae24e13f5b" />

Nota: la WebComponent API est en cours de redaction au sein du W3C

Source: http://www.binpress.com/blog/2014/06/26/polymer-vs-angular/

 

meetup-logo

 


9 + = onze