Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Let's React

Let's React

Session Let's React au Breizhcamp 2016

mathieuancelin

March 25, 2016
Tweet

More Decks by mathieuancelin

Other Decks in Programming

Transcript

  1. MATHIEU ANCELIN Développeur @SERLI Scala, Java, JS, web & OSS

    ReactiveCouchbase Weld-OSGi etc ... Poitou-Charentes JUG Expert group MVC 1.0 @TrevorReznik
  2. 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
  3. 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
  4. 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 ( ) ; } }
  5. 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 ( ) ; }
  6. 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 / > ; }
  7. 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
  8. 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
  9. 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
  10. 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 !!!
  11. 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
  12. 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é
  13. 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
  14. 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 ...
  15. 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
  16. 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
  17. APPLICATIONS MOBILE Native Web view (PhoneGap, Cordova, etc …) Compile

    to native (Xamarin, etc …) Moteur JS (NativeScript, Appcelerator Titanium)
  18. 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
  19. 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