#TALK

Application isomorphique avec ReactJS et Flux

Comment répondre aux problématiques de performance et de SEO des applications single-page grâce à l’isomorphisme avec React et Flux ?

Other

React est énorme et mérite largement son buzz ! Mais React seul ne suffit pas à coder une application single-page : il libère sa quintessence lors de son utilisation dans un environnement CommonJS (modularisation des applications JS) en lui adjoignant le modèle Flux (alternative au modèle MVC). Et il devient alors possible de l’utiliser dans un contexte projet, avec de vraies problématiques (tests, performances, productivité, ...).

Malheureusement, à ce stade les articles et tutoriaux deviennent rares. Les retours d’expérience des géants du web (Facebook, Instagram, Netflix) ne correspondent pas forcément à nos réalités projet. Tout cela rend difficile le choix d’adopter React par rapport à ses concurrents bien implantés.

Le jeu en vaut pourtant la chandelle et c’est ce qu’un live-coding “from scratch” d’une application basée sur React va essayer de montrer.

Les lignes directrices du live-coding sont :

• Construire une application de base (listing des photos récentes uploadées sur Flickr) avec des composants React simples, testés par Jest (le lanceur de test “officiel”)
• Implémenter Flux brique par brique pour en comprendre les principes
• Rendre l’application isomorphique et répondre aux problématiques inhérentes aux applications single-page, à savoir le chargement initial et le SEO.