ADDC 2018 - Nicola Zaghini: Introduction to React Native and GraphQL for App Development

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

- @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

- @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

- @nzaghini A bit on you. bit.ly/ADDC-RN bit.ly/ADDC-GQ The Repos!

- @nzaghini • Enable Live Reload • Let’s have a look at the project structure • Install ESlint and Conﬁguration for better experience • Consider using TypeScript for production codebase! Warm Up!

Introduction to React The Basics

- @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 ?

- @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 (diﬀ-ed) to the next one. • React will ﬁnd what’s changed, and update as little as it can on the actual display. How does it work ?

- @nzaghini • Deﬁnes 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.

- @nzaghini Native Code + React Native SDK Javascript Engine (custom thread) Test Device IDE Bundler Scaﬀold RN App ./ios ./android Bridge

- @nzaghini • Elements are the smallest building blocks of a React App • const helloElement = <h1>Hello World!</h1> • const helloElement = <Text>Hello World!</Text> • Elements are immutable! • JSX: a syntax extension to JavaScript (it is a pre- processor only, no runtime or fancy). Elements.

- @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

- @nzaghini • Component must act as pure functions with respect to their Props • Not suitable for data fetching or data that might change Functional Components

- @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

- @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

- @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!

- @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!

- @nzaghini • Project Structure • Imports / Javascript • Functional Components • Styles Baby Steps

- @nzaghini The App • List Component • Item Component

- @nzaghini The App Little hint const MovieItem = ( ??? ) => {  …  <???>  <???/>  <???/>  </???>  …  };

Break ☕ See you at 11:00 …

Introduction to GraphQL The Basics

- @nzaghini What is it ? https://graphql.org A query language for your API

- @nzaghini • A Data Query Language for your API and a Runtime for fulﬁlling queries with existing data • Powerful type system to describe what is possible • Get Many and Diﬀerent 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 ?

- @nzaghini What is it ? GET /movies/1 { “id”: 1, “version”: 1, “title”: “Interstellar” … } Database App REST API

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

- @nzaghini Schema is where you deﬁne the types and the relationship between types. How it works ?

- @nzaghini Resolvers is where the runtime fulﬁls Queries and Mutations by running actual code against data sources. How it works ? Every ﬁeld is a function.

- @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

- @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

- @nzaghini Graph Movie Director Id, Title, Year Id, First Name, Last Name 1..1 1..n

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

Apollo A GraphQL client

- @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

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

- @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

Q&A Fire ahead! bit.ly/ADDC-W-Survey Let’s hear your voice ✍

Thank you! @nzaghini [email protected] bit.ly/ADDC-W-Survey Let’s hear your voice ✍

- @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://ﬂexboxfroggy.com/ Links

ADDC 2018 - Nicola Zaghini: Introduction to Rea...

ADDC 2018 - Nicola Zaghini: Introduction to React Native and GraphQL for App Development

More Decks by ADDC - App Design & Development Conference

Other Decks in Technology

Featured

Transcript