React Native - Thinking Offline

A highlight on building React Native applications with an offline first pattern as presented on both the August 2017 Toronto React Meetup and DevTO's November 2017 Meetup.

Transcript

1. Thinking Offline @hdjirdeh @djirdehh React Native Hassan Djirdeh Houssein Djirdeh
4. First Paint
5. First Paint Time to interactive
6. OFFLINE SUPPORT
7. Persist Data
8. AsyncStorage
9. class TitleComponent extends Component { async componentDidMount() { const title = await AsyncStorage.getItem("title"); this.setState({ title }); } render() { const { title } = this.state; return ( <View style={styles.container}> <Text> {title} </Text> <TextInput onChangeText={this.persistTitle} /> </View> ); } persistTitle = async title => { await AsyncStorage.setItem(“title”, title); this.setState({ title }); }; } class TitleComponent extends Component { async componentDidMount() { const title = await AsyncStorage.getItem("title"); this.setState({ title }); } render() { const { title } = this.state; return ( <View style={styles.container}> <Text> {title} </Text> <TextInput onChangeText={this.persistTitle} /> </View> ); } persistTitle = async title => { await AsyncStorage.setItem("title", title); this.setState({ title }); }; } async componentDidMount() { const title = await AsyncStorage.getItem("title"); this.setState({ title }); } render() { const { title } = this.state; return ( <View style={styles.container}> <Text> {title} </Text> <TextInput onChangeText={this.persistTitle} /> </View> ); } persistTitle = async title => { await AsyncStorage.setItem("title", title); this.setState({ title }); };
10. class TitleComponent extends Component { async componentDidMount() { const title = await AsyncStorage.getItem("title"); this.setState({ title }); } render() { const { title } = this.state; return ( <View style={styles.container}> <Text> {title} </Text> <TextInput onChangeText={this.persistTitle} /> </View> ); } persistTitle = async title => { await AsyncStorage.setItem(“title”, title); this.setState({ title }); }; } async componentDidMount() { const title = await AsyncStorage.getItem("title"); this.setState({ title }); }
11. class TitleComponent extends Component { async componentDidMount() { const title = await AsyncStorage.getItem("title"); this.setState({ title }); } render() { const { title } = this.state; return ( <View style={styles.container}> <Text> {title} </Text> <TextInput onChangeText={this.persistTitle} /> </View> ); } persistTitle = async title => { await AsyncStorage.setItem(“title”, title); this.setState({ title }); }; } render() { const { title } = this.state; return ( <View style={styles.container}> <Text> {title} </Text> <TextInput onChangeText={this.persistTitle} /> </View> ); }
12. class TitleComponent extends Component { async componentDidMount() { const title = await AsyncStorage.getItem("title"); this.setState({ title }); } render() { const { title } = this.state; return ( <View style={styles.container}> <Text> {title} </Text> <TextInput onChangeText={this.persistTitle} /> </View> ); } persistTitle = async title => { await AsyncStorage.setItem(“title”, title); this.setState({ title }); }; } persistTitle = async title => { await AsyncStorage.setItem("title", title); this.setState({ title }); };
13. class TitleComponent extends Component { async componentDidMount() { const title = await AsyncStorage.getItem("title"); this.setState({ title }); } render() { const { title } = this.state; return ( <View style={styles.container}> <Text> {title} </Text> <TextInput onChangeText={this.persistTitle} /> </View> ); } persistTitle = async title => { await AsyncStorage.setItem(“title”, title); this.setState({ title }); }; } class TitleComponent extends Component { async componentDidMount() { const title = await AsyncStorage.getItem("title"); this.setState({ title }); } render() { const { title } = this.state; return ( <View style={styles.container}> <Text> {title} </Text> <TextInput onChangeText={this.persistTitle} /> </View> ); } persistTitle = async title => { await AsyncStorage.setItem("title", title); this.setState({ title }); }; } async componentDidMount() { const title = await AsyncStorage.getItem("title"); this.setState({ title }); } render() { const { title } = this.state; return ( <View style={styles.container}> <Text> {title} </Text> <TextInput onChangeText={this.persistTitle} /> </View> ); } persistTitle = async title => { await AsyncStorage.setItem("title", title); this.setState({ title }); };
14. State
15. Redux
16. State Rendered State Action Dispatcher Reducer Store State
17. State
18. redux-persist
19. import { compose, applyMiddleware, createStore } from "redux"; import { persistStore, autoRehydrate } from "redux-persist"; const store = createStore( reducer, compose( applyMiddleware(), autoRehydrate() ) ) // in the root of your app persistStore(store, { storage: AsyncStorage });
23. Fetched data with AsyncStorage
 (first paint) New async calls
24. persistStore(store, { storage: AsyncStorage, whitelist: ['auth'] });
25. persistStore(store, { storage: AsyncStorage, blacklist: ['home', 'settings'] });
26. redux-optimist
28. Thinking Offline @hdjirdeh @djirdehh React Native Hassan Djirdeh Houssein Djirdeh