Pourquoi React est cool, et pourquoi vous ne devriez pas l'utiliser

by m4dz

m4dz

m4dz

@m4d_z | m4dz.net | 7D969710

Cozy.io

Cozy Cloud

cozy.io

Au commencement était le Web

Website
vs
Webapps

Pourquoi ça change la donne ?

MV* Patterns 💪

I'm gonna stop now because I don't want to blow it

Il est temps de passer à autre-chose

React : Back to the 80's

La patate chaude

Buzz lightyear and little green martians

State, Rendering, Ui

  • état local et temporaire
  • interne au composant de vue
  • syntaxe spécifique (JSX, on events…)
  • composant sur-mesure

Virtual-rendering

Fusion dance

Et la propagation ?

Flux !

Flux diagram

L'arbre qui cache la forêt

  • React ne constitue que la partie Vue (widgets)
  • [Flux|Relay|GraphQl] en backend
  • Virtual-rendering comme killer-feature

Une nouvelle façon de penser l'Ui ?

Ça vous plait ?

vous venez de réinventer Windows 3.1
Félicitations

The more things change

Functionnal Programming

Késako?

Surprised chicken

Fonctionnel

  • expression (functions) & évaluations
  • structure en "pipe"
  • immutable

map, filter, reduce

Pourquoi ?

  • plus structuré et plus souple
  • plus lisible & maintenable
  • plus cohérent (stateless / streams)
  • minimise les effets de bord

Mokaÿÿÿ… c'est compliqué, donc ?

  • c'est une autre façon de penser
  • c'est pas plus compliqué qu'autre-chose
  • vous connaissez déjà (map, reduce…)
  • vous le pratiquez déjà le piping (coucou jQuery)

Reactive Programming

Wait… Wat‽

  • totalement event-driven (observables)
  • totalement async (events)
  • totalement stateless (properties)

Functional Reactive Programming 💪

Superman saying hello

Boites à outils

A-la-React

React or not React ?

React

  • n'est pas Reactive
  • nécessite une structure backend solide
  • offre une bonne abstraction de l'Ui
  • offre une porte d'entrée cross-platforms (learn once, code everywhere)

Webapps modernes ?

L'heure du choix

  • websites ⇨jQuery / VanillaJS
  • webapps simples ⇨ framework MV / Solution lightweight (Riot, VueJS…)
  • app cross-platform / isomorphes ⇨ React
  • app à fortes interactions ⇨ FRP

Questions ?

Merci

Iconographie / Médias

Fontes

Ressources