Kenny DITS
Responsable Etude & Developpement @M6Web

Clubic, Turbo, Deco, 6play, ...
@kenny_dee

Replay sur la refonte front
Blend 2015

5 itérations majeures

M6 Replay v1.0

Flash

2008

2009

M6 Replay v1.5

Flash

M6 Replay v2.0

Flex

2010

2012

M6 Replay V3.0

Flex

6play v3.5

Flex

2013

2015

v3.5

8.5Mo
de chargement initial

2.5Mo d'applicatif Flash (swf)

+20 sec de chargement sur connexion Adsl

v3.5

Techno en voie de disparition

Ressources difficile à trouver

Incompatibilité mobile, tablette ...

Ressembler à une application

Performant

S.E.O. Friendly

Une Single Page App ?

Front riche

Front testable

Front évolutif et maintenable

- "J'ai un peu honte de ce que je fait là !"
- "Quoi ? Tu fais du JavaScript ?"

Angular.Js

<html>
  …
  <body>
    <div id="ui-view"></div> 
    <script src="main.js"></script>
  </body>
 </html>

✅ Ressemble à une application
❌ Performant
❌ S.E.O. Friendly

React Isomorphic / Universal

React js

Librairie Javascript pour réaliser des UI

Créée et Open-Sourcée en 2013
par Facebook

Isomorphisme / Universal

Être capable, avec le même code
de rendre chaque pagecoté client ou coté serveur.

Premier rendu fait par le serveur
= Performance + S.E.O.

Isomorphisme / Universal

Explications

Client serveur classique

S.P.A. Classique

S.P.A. Isomorphique

Fluxible.io

Framework isomorphique
crée par Yahoo!

Facilite le pattern Flux
et la gestion Client/Serveur
avec React

Les seuls exemples qui fonctionnaient en janvier 2015 !

React.Js

<html>
  …
  <body>
    <div>Code HTML SSR ...</div> 
    <script src="main.js"></script>
  </body>
 </html>

✅ Ressemble à une application
✅ Performant
✅ S.E.O. Friendly

Méthodologie et organisation

Organisation du développement

Une équipe Front
Des P.O.
Un ScrumMaster
Une équipe Back

Développement d'une feature

Webservices réalisés par l'équipe Back
Pages par l'équipe Front

Comment avancer sans que l’équipe Back ne soit bloquante ?

On bouchonne !

Bouchonner l'équipe Back-End

Mock des API
superagent-mock

github.com/M6Web

gulp serve:mock

✅ Découplage des équipes
✅ Site fonctionnant sur des données fictives
✅ Testabilité ++

Approche qualité

"Ils sont gardiens de la qualité avec un K majuscule !"

PULL REQUESTS

Lache moi la branche

http://tech.m6web.fr/lache-moi-la-branch/

Une PR par bug / fonctionnalité

Tests automatisés
joués via Jenkins jenkins

Déploiement automatique d'un Espace de recette
via Github Hooker

Notifications hipchat

sur chaque PR

La Code Review

Augmentation de la qualité du code
De la couverture des tests
Humilité des développeurs
Détection des bugs en amont

Pouce Driven Development 👍

"Quelqu'un peut me mettre un pouce ?"
👍

Test All the things

Test unitaire via Jest
https://facebook.github.io/jest/
Test fonctionnels via CucumberJs
https://cucumber.io/docs/reference/javascript
Test WebPerf via Phantomas
https://github.com/macbre/phantomas

Github Team Reviewer

Permet de voir l'etat des PR par équipe
https://github.com/M6Web/GithubTeamReviewer

DX : Developer experience

Ne sous-estimez pas le bonheur de vos développeurs !

Babel (ES6)

ES Lint

Issues technique incorporées dans les Sprints Agile

React Hot Loader

Espace de recette pour code review

Gros travail sur l'environnement de développement et la plateforme d'intégration continue

Performance
🚀

WebPerf sur une SPA

Hard Navigation vs Soft Navigation
Les optimisations "classiques" restent valable (jusqu'a HTTP2)

Versionnage des assets (Gulp-rev)
Sprites CSS (Sprity)
Compression des images (Gulp-imagemin)
Minification / Concat. JS et CSS (Uglify)

A faire au début du projet, pas à la fin !

"On a doublé la bande passante par 10 !"

Performance d'affichage

Comment obtenir une navigation fluide ?
60fps = 1000 ms / 60 = 16ms par frame

Complexité incroyable
Simplifier le DOM, Deboucing
Utilisation des transform, translate,
will-change CSS
Eviter au maximum les Paint / Layout Js et Css (http://csstriggers.com/)

Animation

Utilisation de la TimeLine de ChromeDevTools
F.L.I.P. (https://aerotwist.com/blog/flip-your-animations/)

First
Last
Invert
Process

Coté NodeJs

Profiling du Node.Js ?

node-inspector
dtrace / strace
instrumentation manuelle

Coté mémoire

memwatch et heapdump
Onglet Profile de la ChromeDevTools

Scaler React coté Serveur

le RenderToString est synchrone et bloque l’EventLoop !

Tentative de forker des process pour avoir des workers de rendu

Performance x3
Perte d’un peu de stabilité et maitrise
Ajout de complexité ...

Fallback ServerLess (devient SPA classique si problème sur Node)

Disaster Case

http://tech.m6web.fr/performances-web-disaster-case-applications-mobile-native/

Comment réagit l’applicatif à:

un service KO ? Lent ?
Renvoyant des mauvaises données ?

CharlesProxy
http://www.charlesproxy.com

Url de Blackhole
http://blackhole.webpagetest.org

Monitoring & Log applicatif
🚀

Monitoring applicatif

Stack éprouvée à base de :

StatsD https://github.com/etsy/statsd
HttpToStatsD https://github.com/M6Web/HttpToStatsd
Graphite http://graphite.wikidot.com/
Grafana http://grafana.org/
Seyren https://github.com/scobal/seyren
Uptime (3rd party monitoring) https://github.com/fzaninotto/uptime

Monitor All the things

Connexions / Inscriptions

Vidéos vues

Appels + Load Time Soft/Hard Nav

Appel + Load Time par API

Codes HTTP d’erreurs (404, 500)

Erreurs JS(Client et Serveur)

...

Log

Stack ELK

Elastic Search https://www.elastic.co/fr/
LogStash https://www.elastic.co/products/logstash
Kibana https://www.elastic.co/products/kibana
HttpToGelf https://github.com/M6Web/HttpToGelf

En conclusion

Conclusion

L’isomorphisme, c’est top ! Mais tricky :/
L’écosystème Front-end devient très sexy (ES6, React, Redux, Relay, React Hot Loader …)
On réinvente un peu la roue (manque de maturité)
Profiler du Node, c’est la misère !
60 fps dans un navigateur très dur à atteindre !
Encore un peu de Flash (pub flash, player avec DRM …)

En bêta sur

http://beta.6play.fr

@TechM6Web J’ai vomi.
— Louka Desroziers (@ldesroziers) 19 Octobre 2015

On a tous quelque chose à partager

Merci.

@techM6Web - http://tech.m6web.fr