Immutable.JS, Relay + GraphQL, React Native : Retour sur la React Conference

Présentation réalisée lors du Last Friday Talk de mars 2015, interne à M6Web, suite à la ReactJs Conférence

Transcript

1. React Conference 2015 le 28 et 29 Janvier 2015
2. Sommaire La React Conference Pourquoi React ? ImmutableJs Relay et GraphQL React Native
3. La React Conférence Facebook HQ 1 Hacker Way, 
 Menlo Park, 
 Californie
4. Texte
5. La React Conférence 2 jours de conférences (28-29 janvier 2015) 20 talks (Facebook, Yahoo, Ebay, AirBnb, Netflix, …) 200 participants 1ère conférence officielle sur React.
6. Pourquoi React ? Parce que !
7. Pourquoi React ? Pas un framework mais une librairie Approche composant + CommonJs Très performant (Virtual Dom) Permet de faire du SSR (Server Side Rendering) et donc de l’isomorphisme (SEO, First Render Performance) Très adapté au pattern Flux (plus scalable que MVC) Facebook powered (et en prod chez eux depuis des années), donc bien fini et robuste
8. Hype! Démo de @ryanflorence
9. Immutable Js
10. Immutable.js http://facebook.github.io/immutable-js/ Immutable.js is a JavaScript library by Facebook that lets you work with persistent immutable data collections. Immutability means once a collection is created, it can't be changed (mutated).
11. Pourquoi écrire du code immuable ? Plus facile à écrire et à comprendre Pas de concurrence et effet de bord Performances (mémoïsation) Meilleure visibilité des fluxs de données Détection des changements Plus simple à tester https://scott.mn/2014/04/27/why_immutable_collections/ Cache, Undo & Redo, …
13. Installation npm install immutable var Immutable = require('immutable'); ou dans le browser : <script src="immutable.min.js"></script>
14. Immutable provides List : 
 var list1 = Immutable.List.of('a', 'b', 'c'); //ordonnée Stack Map et OrderedMap : 
 var map1 = Immutable.Map({js:'AngularJS',css:'Bootstrap'}); //non ordonnée Set et OrderedSet : 
 var set1 = Immutable.Set([1,2,3]); Record :
 var MyType = Immutable.Record({a:1, b:2, c:3}); //taille fixe et valeur par défaut
 var t1 = new MyType({a: 10, b:20}); Seq : 
 var oddSquares = Immutable.Seq.of(1,2,3,4,5,6,7,8).filter(x => x % 2).map(x => x * x);
15. Relay & GraphQL Comment Facebook traite le DataFetching avec React/Flux
16. Relay Framework pour faire du data-fetching avec React Chaque composant définie les « datas » dont il a besoin Les « datas » sont données aux props du composant Relay s’occupe de : composer les requêtes et de les batcher si nécessaire, de ne donner aux composants que les données dont ils ont besoin. Il va updater les composants nécessitant d’être modifié lorsque les données changent, et maintenir un cache local.
17. GraphQL Data Query language pour décrire des requêtes complexes En production chez Facebook depuis plusieurs années Coté serveur, GraphQL est configuré sur les API pour renvoyer les bonnes données
18. Relay, GraphQL : Les idées Rassembler les données nécessaire au niveau du composant Règler un maximum de problème de performance Eviter l’over-fetching et l’under-fetching sur les composants Un seul endpoint GraphQL (ou deux : Lecture/écriture) Optimistic update ⚠️ Pas encore Open Source !
20. Relay, GraphQL : Exemple http://facebook.github.io/react/blog/ 2015/03/19/building-the-facebook-news- feed-with-relay.html 2 composants : <NewsFeed> <Story> <Story> …
29. Relay : conclusion Très prometteur Demande de modifier toutes les API Backend (ou les proxifier ?) Va simplifier grandement le développement et les performances front-end !
30. Relay : source https://gist.github.com/wincent/598fa75e22bdfa44cf47 http://facebook.github.io/react/blog/2015/02/20/introducing-relay-and- graphql.html http://facebook.github.io/react/blog/2015/03/19/building-the-facebook- news-feed-with-relay.html http://tech.m6web.fr/cr-react-conf-2015-day-one/ (vidéo de la présentation Data Fetching for React applications @ Facebook)
31. React Native Créer des applications iOs et Android avec ReactJs
32. React Native Open-source :) https://github.com/facebook/react-native http://facebook.github.io/react-native/ https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to- mobile/ Construire des applis natives en Js avec React Experience web : pas d’étape de compilation Déja en production sur l’appStore iOs : Facebook Groups Facebook Ads Manager
33. Pourquoi React Native ? On tente de recréer des composants natifs dans du web => Résultat toujours mauvais Développer en utilisant les capacités native de la plateforme Amener toutes les qualités de React dans l’environnement natif Complexité de la mise en forme et styling sur natif 60 FPS Améliorer le débuggage
34. Framework JS pour appli natives Webview App : Phonegap Cordova + Jquery Mobile, Sencha touch, Kendo UI, Ionic … Compiled Hybrid App Xamarin (C# => native) Js Bridge App Titanium (https://news.ycombinator.com/item?id=8962528) React Native
35. -Gilles Allain Not "write once run anywhere" but "learn once, write anywhere"
36. Comment ca fonctionne ? Exécute le Javascript en tâche de fond, sur un thread différent de la « vue » Modifications envoyées par « batch » et de manière « asynchrone » Transformation du Js via JSCore (Moteur Js de iOs) Au lieu d’écrire du HTML en JSX, on utilise des composants React mappés sur des composants Natif
38. Composants existant ? Fetch (le futur de XmlHttpRequest) Components : ActivityIndicatorIOS, DatePickerIOS, ExpandingText, Image, ListView, MapView, NavigatorIOS, PickerIOS, ScrollView, Slider, SwitchIOS, TabBarIOS, Text, TextInput, TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback, View, … Api’s : Animation, AppRegistry, AppState, AppStateIOS, AsyncStorage, CameraRoll, LayoutAnimation, PixelRatio, StatusBarIOS, StyleSheet, … NPM !
39. React Native et les tests Intégration continue via Travis Unitairement avec Jest pour les composants Js Tests d’intégration XCTestCase pour les composants Natif et Js Snapshot Tests avec FBSnapshotTestCase : https://github.com/facebook/ios-snapshot-test-case
40. Comment qu’on style ? Styling via JS en CSS via une ré- implémentation basique de Flexbox ! https://github.com/facebook/ css-layout => https://speakerdeck.com/ vjeux/react-css-in-js
41. Créer une application React Native npm install -g react-native-cli react-native init <nomDuProjet> cd <nomDuProjet> npm start Ouvrir le fichier .xcodeproject dans xcode, et lancer le build. That’s all !
42. 'use  strict';   var  React  =  require('react-­‐native/addons');   var  {      AppRegistry,      NavigatorIOS,      StyleSheet,   }  =  React;   var  SearchScreen  =  require('./SearchScreen');   var  MoviesApp  =  React.createClass({      render:  function()  {          return  (              <NavigatorIOS                  style={styles.container}                  initialRoute={{                      title:  'Movies',                      component:  SearchScreen,                  }}              />          );      }   });   var  styles  =  StyleSheet.create({      container:  {          flex:  1,          backgroundColor:  'white',      },   }); Démos
43. React Native : Conclusion + React (+ Relay ?) Facilité d’écriture Bridge Js <=> Natif Flexbox pour le positionnement Débugging « à la » web - Tout neuf Peu de composants encore (Pull To Refresh, Vidéo …) iOs only pour le moment Xcode (et donc mac only)
44. React Native Ressource Impressions par JLongster: http://jlongster.com/First-Impressions-using- React-Native Tuto très complet: http://www.raywenderlich.com/99473/introducing-react- native-building-apps-javascript Facebook Login: http://brentvatne.ca/facebook-login-with-react-native/ http://blog.scottlogic.com/2015/03/26/react-native-retrospective.html …
45. React Conférence Ressource tech.m6web.fr/cr-react-conf-2015-day-one/ tech.m6web.fr/cr-react-conf-2015-day-two/