React Native & GraphQL - ADDC 2018 - Nicola Zaghini React Native 
 & GraphQL - ADDC 2018 Workshop - An introduction to 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini - @nzaghini • Solution Architect & Lead iOS Engineer • Leader of a team of 5 aimed at researching on React Native and GraphQL in early 2018 @ Travelport Digital • Twitter —> @nzaghini • Email —> [email protected] About Me 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini - @nzaghini • Introduction to the Workshop • Warm Up with some code! • Introduction to React • The Movies App • Introduction to GraphQL • Play with Queries • Integrate Apollo Client • Write a Jest test! Agenda 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini - @nzaghini A bit on you. bit.ly/ADDC-RN bit.ly/ADDC-GQ The Repos! 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini - @nzaghini • Enable Live Reload • Let’s have a look at the project structure • Install ESlint and Configuration for better experience • Consider using TypeScript for production codebase! Warm Up! 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini Introduction to React The Basics 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini - @nzaghini • A Library to create Graphical User Interfaces • Renders UI and responds to events mostly • Rendering logic is coupled with other UI logic
 ( handling of events, state changes, data prep for display ) • React separates concerns via the use of Components vs technologies • Components are easily unit testable, as they are unit after all • Immutable by default, re-renders the whole app on every update! What is it ? 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini - @nzaghini • A React app is a tree of components. React takes the tree, walks through it, and creates a virtual model of the end result. • The virtual model is then translated into a platform dependent representation for actual display. • As the app updates, the process of creating the virtual result happens over and over again. Each time the previous virtual tree is compared (diff-ed) to the next one. • React will find what’s changed, and update as little as it can on the actual display. How does it work ? 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini - @nzaghini • Defines how a Component works and behaves • Handles the tree of Components and make them work together React React Native • Takes the Component’s output and knows how to place it on the screen • Provides many out of the box default components such as images, text … • Runs on Javascript Engine, in a custom Thread, not the Main Thread. 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini - @nzaghini Native Code + React Native SDK Javascript Engine (custom thread) Test Device IDE Bundler Scaffold RN App ./ios ./android Bridge 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini - @nzaghini • Elements are the smallest building blocks of a React App • const helloElement =

Hello World!

• const helloElement = Hello World! • Elements are immutable! • JSX: a syntax extension to JavaScript (it is a pre- processor only, no runtime or fancy). Elements. 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini - @nzaghini • A Javascript function. • Accepts arbitrary input parameters called Props • Returns Elements describing what should appear on the Screen. • A React Application is the result of a collection of Components. Components 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini - @nzaghini • Component must act as pure functions with respect to their Props • Not suitable for data fetching or data that might change Functional Components 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini - @nzaghini • Lifecycle methods available! • http://bit.ly/ADDC-LIFE • State is similar to props, but it is private and fully controlled by the component. • Do Not Modify State Directly • State Updates are Merged • (State Updates May Be Asynchronous) • One Way Data Flow (data flows down) • Any state is always owned by some specific component, and any data or UI derived from that state can only affect components “below” them in the tree. Class Components 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini - @nzaghini • Render Function • It should examine this.props and this.state and return React Elements • It should be pure, meaning that it does not modify component state Class Components 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini - @nzaghini • Step 1 —> Break The UI Into A Component Hierarchy!
 Single responsibility principle, that is, a component should ideally only do one thing. • Step 2 —> Build A Static Version in React!
 Static version of your app that renders your data model via components that reuse other components • Step 3 —> Identify The Minimal Representation Of UI State!
 Don’t Repeat Yourself. Compute when possible. Thinking in React! 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini - @nzaghini • Step 4 —> Identify Where Your State Should Live!
 Find a common owner component when needed. • Step 5 —> Add Inverse Data Flow!
 Components should only update their own state, pass callback function as param down the hierarchy Thinking in React! 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini - @nzaghini • Project Structure • Imports / Javascript • Functional Components • Styles Baby Steps 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini - @nzaghini The App • List Component • Item Component 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini - @nzaghini The App Little hint const MovieItem = ( ??? ) => {
 …
 
 
 
 
 …
 }; 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini Break ☕ See you at 11:00 … 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini Introduction to GraphQL The Basics 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini - @nzaghini What is it ? https://graphql.org A query language for your API 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini - @nzaghini • A Data Query Language for your API and a Runtime for fulfilling queries with existing data • Powerful type system to describe what is possible • Get Many and Different Resources on a single request • Network optimised requests & responses • No over or under fetching • Single Evolving Version vs API versioning • Integrated documentation & introspection What is it ? 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini - @nzaghini What is it ? GET /movies/1 { “id”: 1, “version”: 1, “title”: “Interstellar” … } Database App REST API 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini - @nzaghini What is it ? Database App GraphQL GET /graphql { “data”: { “allMovies” { “title”: “Interstellar” … “director”: { “name”: … … } } } GET /graphql allMovies{ title year director{ firstName lastName } } 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini - @nzaghini Schema is where you define the types and the relationship between types. How it works ? 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini - @nzaghini Resolvers is where the runtime fulfils Queries and Mutations by running actual code against data sources. How it works ? Every field is a function. 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini - @nzaghini Entities Prop Name Type ID Id Title String! Year Int DirectorID Id Movie Prop Name Type ID Id First Name String! Last Name Int Director 1 n 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini - @nzaghini REST Prop Name Type ID Id Title String! Year Int Director Id Movie Prop Name Type ID Id First Name String! Last Name Int Movies [Id] Director 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini - @nzaghini Graph Movie Director Id, Title, Year Id, First Name, Last Name 1..1 1..n 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini - @nzaghini How to use it ? 1. Invoke operation (Query or Mutation) 2. Get exactly what you asked for! Demo bit.ly/ADDC-GQi 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini Apollo A GraphQL client 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini - @nzaghini What is it ? 1. Popular & quick to setup GraphQL client 2. Supports caching, subscriptions, pre-fetching and more 3. Designed with React echo-system in mind 4. Production ready (KLM, The New York Times, OpenTable, Ticketmaster, Coursera, Khan Academy … ) 5. OSS & community focused: over 700 contributors and counting 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini - @nzaghini Apollo Provider How it works ? React App Apollo Client GraphQL Server Apollo Client: Makes actual calls to a GraphQL server Apollo Provider: Connects the Apollo Client to React by wrapping the App. 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini - @nzaghini • Project setup and ESLint • Introduction to React • The Movies App • A simple component • List and Items • Introduction to GraphQL • Play with Queries • Integrate Apollo Client • Write a Jest test! What did we see today 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini Q&A Fire ahead! bit.ly/ADDC-W-Survey Let’s hear your voice ✍ 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini Thank you! @nzaghini [email protected] bit.ly/ADDC-W-Survey Let’s hear your voice ✍ 

React Native & GraphQL - ADDC 2018 - Nicola Zaghini - @nzaghini • Styling Cheat Sheet - https://github.com/vhpoet/react- native-styling-cheat-sheet • Awesome React Native - https://github.com/jondot/ awesome-react-native • Flex Box Froggy - https://flexboxfroggy.com/ Links