React Native talk

Transcript

1. React Native Saritasa 1
2. Topics 1. ! React Native basics 2. " Components 3. # Redux 4. $ Tools 5. % Unit testing 6. & Android, iOS builds (+ CI) Saritasa 2
3. ! 1. React Native ! Javascript language ! React.js as a view layer ! Native components (+predefined) ! iOS, Android, tvOS used in Facebook, Instagram, WiX, Artsy, Airbnb Saritasa 3
4. ! 1. React Native ! One code for platforms (reusable) ! Fast development (Hot reloading, js, live reload) " Different OS (iOS vs Android written in js) " Young Saritasa 4
5. ! 2. Components // Basic class View extends React.Component { render() { return ( <View> <Text>Hello world</Text> </View> ) } } Saritasa 5
6. ! 2. Components // Lifecycle class View extends React.Component { // props from parent, state is inside constructor(props) {} shouldComponentUpdate(nextProps, nextState) {} componentWillMount() {} componentDidMount() {} // ... render() {} } Saritasa 6
7. Demo #1 Components Saritasa 7
8. ! 3. Redux Saritasa 8
9. ! 3. Redux // State const initialState = { todos: { list: [ { text: 'Mess with React Native', isDone: true }, { text: 'Tell everyone how cool redux is', isDone: false } ] } } Saritasa 9
10. ! 3. Redux // Action Creator const addTodo(text) { return { type: 'ADD_TODO', payload: { todo: { text: text, isDone: false } } } } Saritasa 10
11. ! 3. Redux // Reducer const todosReducer = (state = initialState.todos, action) { switch action.type { case 'ADD_TODO': return { ...state, list: [ ...state.list, action.payload.todo // Append todo item ] } default: return state } } Saritasa 11
12. Demo #2 Actions, Reducers, State Saritasa 12
13. 4. Tools. Language Why not Typescript? ! Full type control (compiler) ! Enums! 'default'/'disabled' ! Long integration ! Overhead sometimes ! Libraries without typescript headers ! Javascript is evolving, and sometimes is OK Saritasa 13
14. 4. Tools. Persistence // It was realm at first import { persistStore } from 'redux-persist'; import storage from 'redux-persist-filesystem-storage'; const config = { storage }; const reducer = persistReducer(config, rootReducer); const store = createStore(reducer, initialState); const persistor = persistStore(store); Saritasa 14
15. 5. Unit tests THEY'RE GREAT! Use jest, custom matchers ! Runs in node process ! TDD approved ! Pure functions are testable. (Redux) Test reducers, action creators, utils. If you want - components are testable too. Saritasa 15
16. Demo #3 Unit tests Saritasa 16
17. ! 6. Build Android => Build for Android :) Use gradle and /android folder. iOS => Build for iOS :) Use fastlane and /ios folder. Saritasa 17
18. 6. Build # Before anything: npm install ☎ Android Setup profiles + IDs Gradle! All setup in build.gradle ./gradlew clean assembleRelease ! iOS Setup profiles + IDs Same as we do on Jenkins Saritasa 18
19. # Sum up. ! React Native is OK for simple apps. ! Integration with native modules (i.e. Bluetooth) is pain in the ass. ! After iOS - Hot reloading & VS Code is SOOOO GOOD! ! Code reuse & Developer-friendly (front-end should feel good in RN, cause it's mainly React + Redux + JS) Saritasa 19
20. FIN. Saritasa 20