React Native:
Awesome Offline Apps with GraphQL

@vilvaathibanpb

- Vilva athiban p b

About me

JavaScript + React + GraphQL  = 👨‍💻@Omio, Berlin

 

Creator of styled-wind, graphql-codegen (VS Code) and hql-tag

 

Contributing to Open-source libraries of Product ride (https://productride.com/)

 

Twitter is where I share my tech updates - @vilvaathibanpb

@vilvaathibanpb

@ Product ride

  • Building the next generation applications (Web & Mobile)
  • For early-stage products/startups:
    • One month MVP Program
    • Ideation to Deployment program
  • For existing products/startups:
    • Setup User-Tracking and Data analysis
    • Fix technical SEO issues
    • Improve Performance
  • OSS and community-focused Organization
  • https://productride.com/

Let's begin

@vilvaathibanpb

React native - the future (May be)

Rise of react native

@vilvaathibanpb

One code - Multiple platforms

 

Consistency in Product across platforms

 

Improved Developer experience

Future of react native: Fabric

@vilvaathibanpb

New threading model

 

Async rendering and multiple rendering capabilities

 

Simplified bridge between JS and native

are we ready for the future?

The PROBLEMs

@vilvaathibanpb

Heavy Animations

 

Latest iOS/Android features

 

Device-Specific APIs

 

Offline Mode

offline mode

Current Options

 

Problems

 

GraphQL to rescue

The SOLUTION

@vilvaathibanpb

React Native

+

Apollo Client

+

Apollo Cache persist

+

GraphQL codegen

 =  AWESOME

lets discuss the tools

APollo cache persist

Simple persistence for all Apollo Client cache implementations, including InMemoryCache

GraphqL codegen

GraphQL Code Generator is a CLI tool that can generate TypeScript typings out of a GraphQL schema.

GraphqL codegen - plugins

typescript - Generate types for TypeScript - those are usually relevant for both client-side and server-side code

 

typescript-operations - Generate client specific TypeScript types (query, mutation, subscription, fragment)

 

GraphqL codegen - plugins [contd.]

typescript-react-apollo - Generate TypeScript types, and React-Apollo Components

 

near-operation-file - Generates operation code near the source file

 

GraphqL codegen - SERVER

typescript-resolvers - generates TypeScript signature for resolve functions of your GraphQL API

 

 

cache with asyncstorage

cache with graphql - architecture

advantages

Organized Cache data management with queries/mutations instead of Nested JSON

 

Awesome DX with autocomplete and typescript support

 

Shared cache across devices and platforms

 

Better User Experience and performance by leveraging fetch-policy

 

other advantages? 

Local state management

With Apollo GraphQL, no external library is required for state management.

 

The local state can be managed with queries/mutations thereby making clean and maintainable code. 

SHARED cache data

The cache data is structured and works similar across devices. Hence cache/offline data can be shared across devices and platforms

 

React Native

Web

Native (iOS/Android)

Cache data

live code a demo! - 🤞

@vilvaathibanpb

if my live coding is messed :(

QA TIME

@vilvaathibanpb

follow me on twitter

React Native: Awesome Offline Apps with GraphQL

By Vilva Athiban

React Native: Awesome Offline Apps with GraphQL

  • 141