React Conference 2015 le 28 et 29 Janvier 2015 

Sommaire La React Conference Pourquoi React ? ImmutableJs Relay et GraphQL React Native 

La React Conférence Facebook HQ 1 Hacker Way, 
 Menlo Park, 
 Californie 

Texte 

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. 

Pourquoi React ? Parce que ! 

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 

Hype! Démo de @ryanflorence 

Immutable Js 

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). 

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, … 

No content

Installation npm install immutable var Immutable = require('immutable'); ou dans le browser : 

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); 

Relay & GraphQL Comment Facebook traite le DataFetching avec React/Flux 

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. 

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 

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 ! 

No content

Relay, GraphQL : Exemple http://facebook.github.io/react/blog/ 2015/03/19/building-the-facebook-news- feed-with-relay.html 2 composants : … 

No content

No content

No content

No content

No content

No content

No content

No content

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 ! 

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) 

React Native Créer des applications iOs et Android avec ReactJs 

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 

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 

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 

-Gilles Allain Not "write once run anywhere" but "learn once, write anywhere" 

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 

No content

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 ! 

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 

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 

Créer une application React Native npm install -g react-native-cli react-native init cd npm start Ouvrir le fichier .xcodeproject dans xcode, et lancer le build. That’s all ! 

'use  strict';   var  React  =  require('react-­‐native/addons');   var  {      AppRegistry,      NavigatorIOS,      StyleSheet,   }  =  React;   var  SearchScreen  =  require('./SearchScreen');   var  MoviesApp  =  React.createClass({      render:  function()  {          return  (                        );      }   });   var  styles  =  StyleSheet.create({      container:  {          flex:  1,          backgroundColor:  'white',      },   }); Démos 

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) 

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 … 

React Conférence Ressource tech.m6web.fr/cr-react-conf-2015-day-one/ tech.m6web.fr/cr-react-conf-2015-day-two/ 

No content