[meet-up] reactjs & reactive programming
Post on 10-Jan-2017
488 Views
Preview:
TRANSCRIPT
React(ive) Dive into the one-player architecture
Pierre Guilleminot @jinroh
Alexandre Duros @alexduros
● Librairie javascript permettant de
construire des interfaces utilisateurs
● Pas de notions de contrôleurs,
directives, modèles, etc.
● On ne parle que de la vue
● facile à réutiliser
● vit sa vie indépendamment (lifecycle)
● testable
#2 Tout n’est que <Composant/>
#5 Virtual DOM
● Plus léger car ne contient que les
informations nécessaires
● Permet une représentation dans un
contexte headless
● Rendu optimisé
● Testable
#7 Mutabilité du state
state render
● state mise à jour via setState
● déclenche un render du virtual DOM
● acessible via this.state peut être transmis
par les props
● transmission unidirectionnel des changements
Credits● Reactjs and why it’s awesome by Andrew Hull
● React.js conf 2015 playlist by Facebook Developers
position de lecture
programme courant
décalage live
liste des chaines
chaine courante
liste des programmes
rating csaprofile
utilisateur
position de lecture
programme courant
décalage live
liste des chaines
chaine courante
liste des programmes
rating csaprofile
utilisateur
position de lecture
programme courant
décalage live
liste des chaines
chaine courante
liste des programmes
rating csaprofile
utilisateur
13h30 14h30 15h30 10h15
BBT JT Scandal
M6 Boutique Scène de ménage Zone Interdite
Canal+ M6
position
chaine
programmes
+
+
=
BBT M6 BoutiqueLE programme JT Scandal
map, filter, reduce, concat, uniq, drop, (et plus encore)
sur des événements ?
Events = Collection + Temps
Observables
• TC39 proposal pour ajout dans ES2016 (ES7)
• Support natif dans React, Angular2 et Ember
• Existe en Java, Rust, …pick your language
Quand les utiliser ? (en frontend)
Dès que l’on fait du code asynchrone (tout le temps ?):
• Animations
• XHR / HTTP / WebSocket
• Entrée utilisateur
• Back pressure
• Encapsuler les états de votre applications qui sont des valeurs qui changent au cours du temps
• Fournis les opérateurs fonctionnels pour composer ces valeurs:
Quand les utiliser ? (en frontend)
• Map • Reduce • Filter • Zip • Merge • Concat • FlatMap • Take • Skip • …
• Delay • Buffer • Debounce • Throttle • …
top related