Let's React

Session Let's React au Breizhcamp 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 15000 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 time: 1460633107895 time: 1460633107895 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 0 9 1 1 0
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 0 EVERYTHING IS A COMPONENT HELLO WORLD je code du react dans des slides en react sur 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 1460633110155!
25. VALIDATION
26. TESTS
27. ECOSYSTÈME React Router Flux (Redux) 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 5507 / DOWNS 0 This guy got himself an interesting planetary tatt ... Confidence Trigger Warning Happened in Iran. An Iranian runner as a gesture o ... The mail person "hid" my package with the pillows. Either the CNN billboard is broken or there's some ... Menu for third class passengers in the titanic
29. You have 21 unread stories !!! UPS 5593 / DOWNS 0 Spotted during the second inning of the Jays/Yankees game today (found on /r/baseball) Our City is proud to have the World's largest TeePee. Someone vandalised the sign last night... I think I just got the most Canadian email ever. Public Shake Weighter
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