Building with React Native. Simon Ayzman Mobile Apps Bloomberg

Transcription

1 Building with React Native Simon Ayzman Mobile Apps Bloomberg

2 Run-Down 1. Introductions 5. Advanced Usage 2. What is RN? 6. Bloomberg Toolset 3. Pros/Cons 7. Awesome Links! 4. Basic Principles 8. Credits 5. DEMO! 9. Fin!

3 Introductions Mobile App Bloomberg hackny Fellow 2015 & Mentor 2016/2017 CS Adjunct Lecturer at Hunter College (CUNY) Long-time dancer in ballet, ballroom, & modern Beginner martial artist & improviser

4 What is React Native? An open source, cross-platform framework for building native mobile apps with JavaScript and React using declarative components. -- Facebook s React Native Documentation

5 React Native Framework

6 Pros Multi-platform with native wrappings Vibrant open source, developer community Faster development time, day-to-day & over time Declarative flows aid code comprehension Great debugging tools for logic and rendering

7 Cons Technically, still in beta Native code needs native knowledge Javascript (and its ~wonderful~ ecosystem) Minor platform divergences

8 Basic Principles Components Props vs. State State represents internal component data Props represent data passed from parent Lifecycle Styling Stylesheets are CSS-like; Flexbox support

9 Styling import { StyleSheet } from react-native ; const styles = StyleSheet.create({ container: { flex: 1, justifycontent: 'center', }, headerview: { margintop: 15, borderwidth: 10, bordercolor: red, }, headertext: { color: #111111, fontsize: 65, fontweight: 'bold', }, });

10 Components class AwesomeComponent extends Component { render() { return ( <View style={styles.container}> <Image source={{ uri: }} style={styles.header} /> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, edit your index.js file. </Text> </View> ); } }

11 Component State class AwesomeComponent extends Component { constructor() { super(); this.state = { isloading: false }; } fetchdata() { this.setstate({ isloading: true }); fetch(url).then(res => this.setstate({ isloading: false })); } render() { const { isloading } = this.state; const loadingdependenttext = isloading? Hi : Bye ; return <Text>{loadingDependentText}</Text> } }

12 Component Props class AwesomeComponent extends Component { static proptypes = { data: PropTypes.arrayOf(PropTypes.number).isRequired, shouldshowdata: PropTypes.bool, }; static defaultprops = { shouldshowdata: true, }; render() { const { data, shouldshowdata } = this.props; if (!shouldshowdata) { return null; } const elements = transformdataintoelements(data); return <View>{elements}</View> } }

13 Component Lifecycle class AwesomeComponent extends Component { componentdidmount() { // Lifecycle this.fetchstufffromtheinterwebs() } componentwillreceiveprops(nextprops) { // Lifecycle this.dootherstuffwithprops(this.props, nextprops); } fetchstufffromtheinterwebs() { fetch( ).then((response) => dostuff(response)).catch((error) => console.error( ERROR )) } render() { } }

14 DEMO!

15 Installation Requirements node (since we re using Javascript) yarn (an alternative to npm) create-react-native-app (as global npm module) Expo app on your smartphone

16 Startup Requirements Try building it yourself: $ create-react-native-app MIT-IPHY $ cd MIT-IPHY $ yarn start But for a guided experience: $ $ $ $ $ git clone cd MIT-IPHY yarn install git checkout stage0 yarn start

17 Quick Run Open Expo app, scan the QR code output from the npm start script, and watch the app come to life......a bit anti-climactic, I know. Try changing the text in App.js yourself! Reload! Voila!

18 Demo Progression (I) start/stage0 to stage1 Added an extra line of text to the screen! stage1 to stage2 Created a simple HomeFeed stub component stage2 to stage3 Added a list of stub cells representing gifs

19 Demo Progression (II) stage3 to stage4 Added helpers and created directory structure Added header, footer, and multiple columns stage4 to stage5 Add giphy API client to app Added fetch related state to HomeFeed

20 Demo Progression (III) stage5 to stage6 Refactored gif list into separate component stage6 to stage7 Added data & limit props to GifList stage7 to stage8 Added MIT gifs toggle to HomeFeed

21 Demo Progression (IV) stage8 to stage9 Added new app images Updated gif list layout and individual gif styling Added automatic layout animations stage9 to stage10/finish Added sharing functionality on gif tap

22 Advanced Usage Redux, an application state management system Navigation, a must for most modern apps Styling frameworks, for simpler view styling Native modules, for when the JS is not enough React Native API galore!

23 Bloomberg Toolset (I) Data management redux-thunk, side effects for simple cases redux-saga, side effects with robustness Navigation react-navigation

24 Bloomberg Toolset (II) Styling styled-components, so easy with props! Testing storybook, easy to test component variations! jest, ok with testing business logic

25 Awesome Links Official React Native Documentation Chain React 2017 Conference Videos awesome-react-native GitHub Repo Rewriting a Large Hybrid App with React Native Ignite React Native App Boilerplate Generator MIT-IPHY Expo & Codebase

26 Credits React Native by Artyom Trityak A Tour of React Native by Tadeu Zagallo Intro to React Native by Jay Garcia React Native by Varun Vachhar React Native Introduction by Kobkrit Viriyayudhakorn

27 FIN (Thank you!)