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

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 ...

v4
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 page
coté 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
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



Github Team Reviewer



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)
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)
Comment réagit l’applicatif à:
un service KO ? Lent ?
Renvoyant des mauvaises données ?
Monitoring & Log applicatif
🚀

Monitoring applicatif

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

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


On a tous quelque chose à partager

Merci.

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