Let's React - DevoxxFR 2016

Transcript

1. LET'S REACT MATHIEU ANCELIN (@TREVORREZNIK)
2. MATHIEU ANCELIN Développeur @SERLI Scala, Java, JS, web & OSS ReactiveCouchbase Weld-OSGi etc ... Poitou-Charentes JUG Expert group MVC 1.0 @TrevorReznik
4. REACT
5. REACT BY FACEBOOK Librairie Javascript pour créer des interfaces graphiques rend des vues et répond à des évènements le V de MVC ;-) pas de full stack Créé en 2011 et open source depuis Mai 2013 Facebook et applications tierces Appli. web instagram 20000 composants en production Beaucoup d'utilisateurs Netflix, Coursera, reddit, hipchat, yahoo
6. DÉCLARATIF Exprimez à quoi doit ressembler votre app. à n’importe quel moment dans le temps Dès que les données en entrée changent React va re-rendre entièrement la vue (F5) Mais n'actualise que les parties qui ont vraiment changées dans le DOM
7. VUES DÉCLARATIVES
8. CODE IMPÉRATIF i f ( u s e r F a v o r i t e s ( ) ) { i f ( ! h a s G r e y F a v o r i t e ( ) ) { r e m o v e W h i t e F a v o r i t e ( ) ; a d d G r e y F a v o r i t e ( ) ; } } e l s e { i f ( h a s G r e y F a v o r i t e ( ) ) { r e m o v e G r e y F a v o r i t e ( ) ; a d d W h i t e F a v o r i t e ( ) ; } }
9. CODE DÉCLARATIF i f ( t h i s . s t a t e . f a v o r i t e ) { r e t u r n G r e y S t a r ( ) ; } e l s e { r e t u r n W h i t e S t a r ( ) ; }
10. CODE DÉCLARATIF i f ( t h i s . s t a t e . f a v o r i t e ) { r e t u r n < G r e y S t a r / > ; } e l s e { r e t u r n < W h i t e S t a r / > ; }
12. VIRTUAL DOM React calcule la plus petite liste de changements possible à appliquer à la vue Applique les changements en batch dans le DOM Dans le cas du bouton favoris Passer l’étoile en gris Changer le texte du label Passer le texte en bleu
13. VIRTUAL DOM
14. APPROCHE COMPOSANT Avec React, on fabrique des composants, pas des templates !!! Les composants sont autonomes, réutilisables, composables et savent se rendre eux-même dans le DOM Les composants sont des briques hautement cohésives et peu couplées avec les autres briques
15. HELLO REACT Date 1462350589120! Date 1462350589121! i m p o r t R e a c t f r o m ' r e a c t ' ; c o n s t m a x H e i g h t = 2 0 0 ; c o n s t h e i g h t = 3 0 0 ; c o n s t S t y l e s = { } ; f u n c t i o n f e t c h S u b r e d d i t ( s u b r e d d i t ) { } f u n c t i o n c o m p u t e U n r e a d ( s t a t e ) { } f u n c t i o n c o m p u t e I m a g e S t y l e ( s o u r c e ) { } f u n c t i o n s h r i n k e d T i t l e ( s t o r y ) { } f u n c t i o n c o m p u t e C e l l S t y l e ( p r o p s ) { } c o n s t T o p b a r = R e a c t . c r e a t e C l a s s ( { } ) ; c o n s t S t o r y C e l l = R e a c t . c r e a t e C l a s s ( { } ) ; 1 2 3 4 5 5 2 6 3 6 6 7 8 8 2 9 4 9 5 1 1 1 1 1 2
16. c o n s t S t o r y C e l l = R e a c t . c r e a t e C l a s s ( { } ) ; 1 1 2 EVERYTHING IS A COMPONENT HELLO WORLD Je code du react dans mes slides sur react en react. React
17. SOURCES DE DONNÉES
18. PROPS Définies à la création d’une instance de composant Idéalement immutable Peuvent avoir des valeurs par défaut pour faciliter la réutilisation Peuvent être validées pour faciliter la réutilisation
19. PROPS Hello Mathieu! Java JavaScript Scala Typescript
20. STATE Représente l’état interne d’une instance de composant l’état est mutable, idéalement par le composant lui-même Le changement de l’état lancera la mise à jour de la vue Le double data binding est supporté mais non encouragé
21. STATE Likes: 0 +1
22. CONTEXT Représente un object passé implicitement du parent aux enfant pas sujet au refresh d'interface Necéssite de la validation pour pouvoir y accéder
23. CYCLE DE VIE componentWillMount componentDidMount componentWillReceiveProps shouldUpdateComponent componentWillUpdate componentDidUpdate componentWillUnmount
24. CYCLE DE VIE Hello 1462350591437!
25. VALIDATION
26. TESTS
27. ECOSYSTÈME React Router Redux Immutable.js Enzyme Radium JSXStyle React canvas React art React motion React native GraphQL Relay React hot loader Bootstrap, Material, ... Awesome React ...
28. You have 23 unread stories UPS 7310 / DOWNS 0 Spiderbro guarding me from malaria outside my wind ... Patton Oswalt and his daughter Alice This duck is sitting on its butt My town of 60,000 people is being evacuated due to ... Lord of the rings fire pit Origami gecko next to a real gecko The tallest tree in the world, Hyperion
29. You have 23 unread stories !!! UPS 7312 / DOWNS 0 Spiderbro guarding me from malaria outside my window. Patton Oswalt and his daughter Alice This duck is sitting on its butt My town of 60,000 people is being evacuated due to a forest fire. The town is expected to be burned down. Here is a picture of a couple hours ago.
30. REACT NATIVE
31. APPLICATIONS MOBILE Native Web view (PhoneGap, Cordova, etc …) Compile to native (Xamarin, etc …) Moteur JS (NativeScript, Appcelerator Titanium)
32. REACT NATIVE Framework pour développer des apps. natives Basé sur JS et la librairie React N’est pas une plateforme hybride N’est pas une réécriture de composants natifs N’est pas un « transpiler » Permet de scripter des composants natifs en JS
33. REACT NATIVE N’EST PAS UNE WEBVIEW !!!
34. REACT NATIVE
35. REACT NATIVE DX semblable au web hot reload, écosystème JS (npm, webpack, etc …) MAJ en ligne ;-) Système de bridge natif pour créer des modules ou des composants utilisables depuis le JS Possibilité d’intégration dans une application classique Toute l’équipe peut s’occuper de l’application mobile il est toutefois judicieux de garder des spécialistes
36. LEARN ONCE WRITE ANYWHERE
37. DÉMO
38. CONCLUSION