2. What is RN? 6. Bloomberg ... -...
27
Building with React Native Simon Ayzman Mobile Apps Developer @ Bloomberg
Transcript of 2. What is RN? 6. Bloomberg ... -...
Building withReact Native
Simon AyzmanMobile Apps Developer @ Bloomberg
Run-Down
1. Introductions
2. What is RN?
3. Pros/Cons
4. Basic Principles
5. DEMO!
5. Advanced Usage
6. Bloomberg Toolset
7. Awesome Links!
8. Credits
9. Fin!
Introductions
● Mobile App Developer @ 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
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
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
Cons
● Technically, still in beta
● Native code needs native knowledge
● Javascript (and its ~wonderful~ ecosystem)
● Minor platform divergences
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
Stylingimport { 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', },});
Componentsclass AwesomeComponent extends Component { render() { return ( <View style={styles.container}> <Image source={{ uri: ‘www.coolimages.com/123456’ }} 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> ); }}
Component Stateclass 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> }}
Component Propsclass 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> }}
Component Lifecycleclass AwesomeComponent extends Component { componentDidMount() { // Lifecycle this.fetchStuffFromTheInterwebs() }
componentWillReceiveProps(nextProps) { // Lifecycle this.doOtherStuffWithProps(this.props, nextProps); }
fetchStuffFromTheInterwebs() { fetch(‘www.geegle.com?q=c001+stUffZ’) .then((response) => doStuff(response)) .catch((error) => console.error(“ERROR”)) } render() { … }}
● node (since we’re using Javascript)
● yarn (an alternative to npm)
● create-react-native-app (as global npm module)
● Expo app on your smartphone
Installation Requirements
● Try building it yourself:
● But for a guided experience:
Startup Requirements
$ create-react-native-app MIT-IPHY$ cd MIT-IPHY$ yarn start
$ git clone https://github.com/simonayzman/MIT-IPHY.git$ cd MIT-IPHY$ yarn install$ git checkout stage0$ yarn start
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!
Quick Run
● 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
Demo Progression (I)
● 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
Demo Progression (II)
● 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
Demo Progression (III)
● 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
Demo Progression (IV)
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!
Bloomberg Toolset (I)
● Data management
○ redux-thunk, side effects for simple cases
○ redux-saga, side effects with robustness
● Navigation
○ react-navigation
Bloomberg Toolset (II)
● Styling
○ styled-components, so easy with props!
● Testing
○ storybook, easy to test component variations!
○ jest, ok with testing business logic
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
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
