React Realtime @scale par Cédric Hauber

Talk de Cédric Hauber, Cloud Builder chez WeScale, présenté à la XebiCon 2016 :
Nous entrons progressivement dans l’ère du temps réel et toutes les technologies nécessaires sont désormais à portée de mains, mais comment s’y prendre ? Quelles technologies choisir ? Nous allons vous montrer aujourd’hui comment créer facilement une application temps-réel qui scale ! Notre Stack ? Kubernetes, Google Container Engine, React, Redux et RethinkDB.

Transcript

1. @xebiconfr #xebiconfr Cédric Hauber React Realtime @ scale
2. @xebiconfr #xebiconfr 1 Cédric Hauber Cloud Builder @ wescale Scaling addict Code lover Beer drinker
3. @xebiconfr #xebiconfr
4. Le temps réel
5. @xebiconfr #xebiconfr 1a - Une meilleure expérience web Pourquoi ? 5 - Mieux capter l’attention de l’utilisateur - Accumuler plus de données
6. @xebiconfr #xebiconfr 1b - Plus qu’une fonctionnalité, un type d’application Comment ? 6 - Pas de technologies « magiques » mais bien choisies - Ce n’est pas si compliqué qu’il n’y paraît.
7. @xebiconfr #xebiconfr 2 React, Redux, RethinkDB, Kubernetes… késako ?
8. @xebiconfr #xebiconfr 2a - Une bibliothèque javascript - Écrit par Facebook - Des composants réutilisables - Pas de templates, une syntaxe simple (JSX) ressemblant a du HTML - 52 000+ stars, 9 000+ forks, 800+ contributeurs React 8
9. @xebiconfr #xebiconfr 2b À quoi ressemble React 9 render() {
 return <div>
 <Likes likes={this.props.likes}/>
 <LikeButton onIncrement={this.like}>Like</LikeButton>
 </div>
 }
10. @xebiconfr #xebiconfr 2c - Une bibliothèque JavaScript - Un état global pour votre application - Permet de découpler nos composants - Permet de restituer l’était d’une application à n‘importe quel moment - Une forte communauté 24 000+ stars, 4 000+ forks, 300+ contributeurs Redux 10
11. @xebiconfr #xebiconfr 2d À quoi ressemble Redux 11 export const incrementLike = (increment) => {
 return {
 type: INCREMENT_LIKES,
 payload: increment
 };
 };
 
 const ACTION_HANDLERS= {
 [INCREMENT_LIKES]: (state, action) => action.payload + state
 };
 
 export default function likesReducer(state = 0, action) {
 const handler = ACTION_HANDLERS[action.type];
 return handler ? handler(state, action) : state
 }
12. @xebiconfr #xebiconfr 2e - Une base de donnéeS NoSQL - Très bien codée - Fait pour le temps réel - JavaScript friendly - Scaling horizontal et linéaire - 16 500+ stars, 1 300+ forks et 100+ contributeurs RethinkDB 12
13. @xebiconfr #xebiconfr 2f À quoi ressemble RethinkDB 13 r.table("likes").get(1).update((item) => {
 item.getField("value").add(1);
 }).run(conn)
14. @xebiconfr #xebiconfr 2g - L’orchestrateur par excellence de conteneurs Docker / Rkt - Initiative lancée par Google - 17 000+ stars, 5 700+ forks et 900+ contributeurs - Pokemon Go possède le plus gros cluster Kubernetes hébergé chez Google ! Kubernetes 14
15. @xebiconfr #xebiconfr 3 Voyons cela en détail
16. @xebiconfr #xebiconfr 3a export const rethinkMiddleware = store => next => action => {
 if (!action) return;
 if (!action.server)
 return next(action);
 if (isConnected) {
 sendMessage(action);
 } else {
 onConnect.push(action);
 }
 }; Redux middleware 16
17. @xebiconfr #xebiconfr 3b const watchLikes = action => dispatch => {
 RethinkDB.execute((r, conn) => {
 return r.table("likes").get(1).run(conn)
 .then((counter) => dispatch({ type: UPDATE_LIKES_COUNT, payload: counter.value}))
 .then(() => {
 return r.table(« likes »).get(1).changes({squash: true}).run(conn) .then((cursor) => {
 cursor.each((err, doc) => {
 if (err) return;
 dispatch({
 type: UPDATE_LIKES_COUNT,
 payload: doc.new_val.value
 });
 });
 });
 });
 }); };
 
 export default {
 [WATCH_LIKES]: watchLikes
 }; Server-side 17
18. @xebiconfr #xebiconfr 4 La montée en charge
19. @xebiconfr #xebiconfr 4a Pourquoi Docker et Kubernetes 19 - Le meilleur moyen de packager une application - Parce que nous voulons monter en charge rapidement - Sans Kubernetes, orchestrer des conteneurs est un enfer.
20. @xebiconfr #xebiconfr 4b Notre architecture 20 RethinkDB Replicas RethinkDB Proxy API FEED NGINX FRONTEND
21. @xebiconfr #xebiconfr 4c Test 1 : - 1 conteneur API - 1 conteneur FEED - 1 frontend - 500 clients / sec Résultat : 132ms / requête 0 Timeout / 0 Erreurs 500 / 0 Network errors Résultats 21
22. @xebiconfr #xebiconfr 4d Test 2: - 10 conteneur API - 1 conteneur FEED - 1 frontend - 5000 clients / sec Résultat : 206ms / requête 0 Timeout / 0 Erreurs 500 / 0 Network errors Résultats 22
23. @xebiconfr #xebiconfr 5 Conclusion