5 itérations majeures – v3.5 – v3.5

View Github Repository Open presentation in a new window

kennydee

See all presentation from kennydee

5 itérations majeures – v3.5 – v3.5

1 0

conf-6playv4

Replay sur la refonte Front-End de 6play

On Github kennydee / conf-6playv4

 Kenny DITSResponsable Etude & Developpement @M6WebClubic, Turbo, Deco, 6play, ...@kenny_dee

 Replay sur la refonte frontBlend 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

En 2015, le nouveau 6play. Mais avant
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
Pour cette refonte, 3 objectifs principaux
Ressembler à une application
No refresh, feeling natif, fluiditié, animation
Performant
Oublier le loading du flash, être rapide
S.E.O. Friendly
L'une des problématiques du flash, être meilleur

Une Single Page App ?

Front riche
Front testable
Front évolutif et maintenable
Expérience Rising Star positive
- "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

Prerender.io ... Bref, ca n'allait pas.
React Isomorphic / Universal

React js

Librairie Javascript pour réaliser des UI

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

Isomorphisme / Universal

Être capable, avec le même codede 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

Code spaggheti

Fluxible.io

Framework isomorphiquecrée par Yahoo!
Facilite le pattern Fluxet la gestion Client/Serveuravec 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 APIsuperagent-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ésjoués via Jenkins
Déploiement automatique d'un Espace de recettevia Github Hooker
Notifications sur chaque PR
Explication d'une 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
React Hot Loader remplacé par React Transform
Performance🚀

WebPerf sur une SPA

Hard Navigation vs Soft NavigationLes 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 !"
Outil synthétique. Perf entre deploy. Waterfall avancé. Benchmark vs concurrent. Waterfall 3rd. Budget alerting.

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/)
Hack pour forcer l'accélération GPU : translateZ(0) Ne pas en abuser, surtout sur des éléments qui repaint À abandonner au profit de will-change

Animation

Utilisation de la TimeLine de ChromeDevToolsF.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 …)

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