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
