Zenika était au Devfest Nantes 2015

Le devfest est une rencontre entre développeurs passionnés organisée au palais des congrès de Nantes. De nombreux intervenants présentent (évangélisent !) la communauté autour des technologies du Web et du Cloud. Cette année les sujets abordées ont été très nombreux :

• objets connectés et la mobilité
• frameworks javascript ou des nouveautés HTML5
• infrasturctures cloud tels AppEngine, ComputeEngine et les technologies backend élastiques
• nouveaux usages de l’informatiques, les nouvelles technologies et même sur l’UX

Cette année, 700 participants ont pu assister à 28 conférences et 3 code labs.
Zenika tenait un stand et la red army était présente partout 🙂

Voici une sélection des meilleurs conférences :

Déploiement continu, test en production, autoscaling et workflow métiers pour vos applications web dans le Cloud par Benjamin Talmard

Présentation rapide de la partie PAAS d’Azure avec les fonctionnalités de push to deploy depuis github ou depuis un git repository privé dans Azure. On a pu voir qu’Azure gère du go ou du node au sein même d’un même projet, il y a une sorte de notion de “build pack” à la heroku.
Une des fonctionnalités les plus intéressantes présentées ici est la gestion de l’A/B testing en natif dans azure qui permet de renvoyer un pourcentage restreint d’utilisateur vers une nouvelle version d’une application pour tester directement en production les évolutions d’une application (notion “deployment slots”).
Système de workflow métier : “Logic App”. Azure fournit également des connecteurs pour pouvoir réagir en fonction d’événement sans à avoir à tout redévelopper à chaque fois (par exemple, un connecteur qui à chaque tweet, appelle un autre service qui envoie un sms).
Vidéo de la conf :

Redefining PaaS: Managed container based microservices on Google App Engine par Ludovic Champenois

La présentation a commencé par un rappel de plusieurs principes des microservices (voir http://microservices.io) :

• exécution de petites briques
• contrat fort entre composants
• cycle de développement / déploiement différent des différents composants
• A/B testing à privilegier
• bien séparer logging et monitoring

Ensuite, la présentation a brossé l’écosystème du cloud google : compute engine, container engine et app engine.
Annonce de l’arrivée de java 8 sur app engine v1 : l’intégration est longue à cause du nombre important de modifications dans l’api du JDK8 par rapport au 7. Ces modifications demande beaucoup de sécurisation à l’équipe d’app engine.
Autre annonce est la possibilité de faire du docker dans app engine via le mode managed vms. Les images utilisées sont des images docker mais viennent de chez google. Il en existe actuellement 3 pour java :

• pure jdk8
• pure servlet 3.1
• GAE v1 compat

L’intérêt c’est d’avoir juste à faire un FROM d’une de ces images dans le Dockerfile, de rajouter ses sources et de pouvoir tourner sur GAE.
Prochainement, il n’y aura même plus à faire de fichier Dockerfile ni de fichier app.yaml pour les managed vms, ça sera automatiquement généré.
Enfin, le protocole de communication inter composant basé sur protocol buffer largement utilisé et éprouvé en interne : grpc. Ce protocole est utilisé par Google pour toutes ces nouvelles apis et recommande de s’en servir pour ces composants dans GAE.
Vidéo de la conf :

Go, Polymer, et Cloud Endpoints FTW! par Francesc Campoy

La présentation a commencé par un rapide tour d’horizon de chacun des mots clefs du titre :

• Polymer : framework pour faire du web component, et faire du material design sans faire une ligne de css
• App engine : exemple d’angry bird qui a une charge beaucoup plus importante le lundi à cause de leur concours hebdomaire et donc besoin d’elasticité (petit trivia marrant, il n’y qu’un seul dev backend chez rovio !). App engine permet de gérer du go, java, python et php
• Cloud Endpoints : Permet de générer du code côté serveur mais aussi client pour facilité l’intéraction via rest.

Démonstration de Google Cloud Endpoints à partir d’un exemple en Go et Polymer. L’idée est décrire une API en Go par exemple, puis, en utilisant les endpoints, et on peut ensuite générer le code client, utilisé ici en JS avec Material Design et Polymer.
Le résultat est beau et obtenu rapidement avec un exemple simple, il semblerait que cela soit difficilement applicable dans la vraie vie. Le speaker développait en VIM (oui oui !) et point intéressant, le reload a chaud du backend Go est gérer.
Source de la demo : https://github.com/GoogleCloudPlatform/go-endpoints
Vidéo de la conf :

React, une autre façon de penser vos composants web par Mathieu Ancelin

Présentation react js avec des exemples en ES2015.
Le speaker nous a passé en revue tous les attributs d’un composants react, le principe de mise à jour selective via virtual dom, et ce qu’était jsx. Ses slides sont d’ailleurs réalisé avec spectacle. Il a abordé le support prochain des webcomponents dans reactjs de manière plus complète (actuellement, on peut ne pas avec exposer les states).
Un point sur les tests avec la libraire test-utils. Le projet github awesome react est un bon point de départ pour commencer en react.
La fin de la présentation a été du live coding d’un client reddit en react pour afficher des photos d’un subreddit. Assez complet et rapide à mettre en place.
Vidéo de la conf :

Ionic : un framework fun et productif pour développer des applications mobiles hybrides par Stéphanie Moallic et Audrey Neveu

Après une introduction sur l’intérêt des devs hybrides (on ne peut pas avoir tous les profils dev natifs dans une seule équipe), les speakeuses ont rapidement parlé des solutions hybrides existantes. Ionic s’appuie sur angular.js et cordova pour pouvoir faire une application hybride. L’outillage reste celui d’un développement web moderne (npm, gulp, sass, bower). Ionic fournit une CLI pour gérer le cycle de vie de son appli mais aussi une GUI, ionic lab. Ionic est une librairie de composants déjà existants (logique à la bootstrap) que l’on combine pour faire son application. Ionic gère aussi le splashscreen, icone pour le launcher mobile, faisant un rendu “pro”.
Pour le dev, on a du livereload dans le browser et sur un périphérique (émuler ou non). On peut avoir le rendu dans une même fenêtre de browser de plusieurs os mobile (la démo ici était avec IOS et Android). Les speakeuses nous ont recommandé chrome pour débugger d’ailleurs (chrome://inspect/#devices).
Après nous avons eu droit à un tour d’horizon de l’ecosystème fournit par Ionic :

• ionic platform pour partager l’application facilement sans mettre sur un store
• ionic gère le push en alpha, via push api pour le moment gratuit mais pas pour longtemps
• ionic analytics pour voir l’utilisation de l’appli (alpha)
• ionic deploy pour l’integration continue toujours alpha
• ionic package permet de générer les livrables sans dépendre de l’os de votre machine (alpha)
• ionic market qui se décompose en 3 parties :
  • starter : pour les bootstraps
  • plugin : composants
  • theme : pour les themes

C’est différent service peuvent être payant.
Pour conclure, elles nous ont partager leur retour d’expérience de l’utilisation d’ionic :
Les plus :

• angular cordova html 5, technos très grand public avec une grande communauté pour avoir des résolutions de pbs qui sont pas spécifiques à ionic
• doc très bien
• beaucoup de directive angular
• beaucoup de livraison pour intégrer les versions d’angular

Les moins :

• beaucoup d’outillage pour arriver à se lancer, linux ne marche pas bien
• doc pas toujours à jour (ng-cordova jamais à jour, aller sur le github)
• directive pas toutes finies
• des bugs restant ouverts des mois

La question subsite : Prod ou pas ? Toujours en bêta et les pricings à voir… mais idéal pour prototype, à voir sur la durée !
Un petit mot pour finir sur Ionic 2, basé sur angular 2 avec plus de fonctionnalités natives, meilleur theming et du material design pour Android.
Vidéo de la conf :

Firebase, au-delà du Chat. Et si on développait un plugin Atom de pair-programming? par David Gageot

Malgré un bel effet démo sur la plateforme, David a pu nous montrer les grandes forces de firebase. La présentation s’articulait autour du développement d’un plugin atom pour le pair programming qui permet de partager son éditeur courant avec quelqu’un à distance pour faire de la modification en temps réel de code “à la google doc”.
Pour facilité la réalisation de ce plugin, firebase permet très facilement de se connecter, et d’envoyer des données dans un arbre JSON et chaque clients connectés va être notifié de ces modifications. Firebase utilise le protocole websocket. On peut set une valeur, on la remplace mais on peut aussi faire un push d’une valeur, on creer une liste valeur.
Firebase n’est disponible que dans le cloud, peut se sécuriser très facilement en protégeant en lecture/écriture tout ou partie de l’arbre JSON. Il est également possible de configurer un TTL sur les noeuds.
Vidéo de la conf :

Flexrox par Raphaël Goetter

Présentation de la norme flexbox de css3 qui permet de faire du positionnement, de la distribution, de l’ordonnancement et de l’alignement de div. La spec est maintenant supporté par 97% des visiteurs de site web. C’est une norme “presque” standard, il y a encore quelques petites touches, mais l’api ne change plus depuis 2012. Pour avoir un conteneur flexbox, il suffit de passer un div en display: flex;.
Raphaël nous a après détaillé tous les attributs css lié à cette spec, avec un grand effort de vulgarisation bienvenu pour des notions simples mais pas forcément facile à expliquer. La force aussi de cette norme c’est que la construction de layout responsive s’en trouve facilité. Très peu de modification à faire entre les différents media. La norme est utilisable dès maintenant en production mais avec juste des prefix pour gérer encore plus la compatiblité (recommandation du speaker : https://github.com/postcss/autoprefixer)
Points d’entrées sur le sujet :

• https://philipwalton.github.io/solved-by-flexbox/ : exemple de layout pas facile à faire habituellement en css qui se font beaucoup plus facilement avec flexbox
• http://jackintheflexbox.tumblr.com/ : un tumblr sur des exemples avec flexbox (maintenant par Raphaël)
• http://the-echoplex.net/flexyboxes/ : une sandbox pour tester les flexbox
• http://www.vincent-valentin.name/articles/le-petit-flexbox-illustre : un super article sur flexbox
• https://github.com/philipwalton/flexbugs : parce bon y’a quand même des bugs de rendu 🙂

Un petit mot pour dire aussi qu’une autre spec arrive pour gérer les layouts de manière encore plus souple : http://www.w3.org/TR/css-grid-1/
Vidéo de la conf :

Harald à la dent bleue dans ton navigateur web  par François Beaufort

Présentation de l’interaction possible des périphériques bluetooth à chromeOS et chrome en javascript en utilisant du bluetooth Low Energie. Cela permet par exemple de piloter des appareils simple type bougie ou moniteur cardique.
L’API semble facile à utiliser et l’intégration dans chrome est en cours (release plublique prochaine). L’idée est de pouvoir ouvrir le champ des possibles pour un site web d’interagir avec les appareils proche d’un ordi. Pas de support prévu pour les casques sans fil.
Le speaker nous a même fait des pompes au sol pour illustrer la variation de sa cardio affichée en temps réelle dans chrome. Chapeau !
Vidéo de la conf :

8 pratiques clés en SEO pour les développeurs par Mathieu Chartier

Guillaume M : Très bonne description des choses à faire pour débuter le référencement de son site web sur google essentiellement :

• indexation des pages : s’enregistrer le console google du webmaster
• page speed : mesurer la vitesse de chargement des pages web selon les critères google et comment améliorer tout ça avec une autre console : https://developers.google.com/speed/pagespeed/
• Plus le site charge vite, plus il remonte dans les résultats de recherche google. Objectif : être >= 85 (couleur verte)
• améliorer son page ranking (PR) : avoir des liens vers son site à partir de gros sites déjà existant (twitter, facebook…)
• être en HTTPS
• la console d’admin du webmaster permet également de suivre les étapes d’indexation de son site
• Faire attention à ce que le site ne récupère pas tout son contenu en ajax, google ne va pas pouvoir l’indexer
• Faire également attention aux sites avec une seule page et un très long ascenseur vertical (c’est la mode en ce moment) car les indexeurs de page ne savent pas extraire sur la page les infos essentielles
• Bien gérer les balises <meta> et notamment celle avec description et keywords
• Ne pas masquer du texte pour tenter d’améliorer ton PR, si google le détecte, le site est relegué en bas de classement
• Ne pas faire confiance aux produit m$, bing a, apparemment, des années de retard par rapport à google en terme de compréhension lexicale de site et n’indexe même pas le site en intégralité.

Vidéo de la conf :

 
Article rédigé conjointement par Eric Briand, Guillaume Gerbaud et Guillaume Membré