Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Solving a react-native tooling problem Mike Grabowski @grabbou Alexey Kureev @kureev React Amsterdam 2016
Slide 2
Slide 2 text
Mike Grabowski @grabbou Alexey Kureev @kureev 2
Slide 3
Slide 3 text
Tooling is important 3 Motivation The language or a framework is as good as it’s tooling and ecosystem. Without it - it’s worth nothing.
Slide 4
Slide 4 text
Dependencies 4
Slide 5
Slide 5 text
5 $ react-native init MyApp
Slide 6
Slide 6 text
$ npm install react-native-side-menu 1. Install package using npm: import SideMenu from ‘react-native-side-menu’; 2. Import package where it’s needed 3. Profit! Dependencies 6 Motivation
Slide 7
Slide 7 text
7
Slide 8
Slide 8 text
$ npm install react-native-vector-icons 1. Install package using npm: import Icon from ‘react-native-vector-icons/FontAwesome’; 2. Import package where it’s needed Dependencies 8 Motivation
Slide 9
Slide 9 text
9
Slide 10
Slide 10 text
10 React Native modules are more complex than JavaScript modules
Slide 11
Slide 11 text
11 React Native module JS module
Slide 12
Slide 12 text
12 JS Platform code Assets react-native-side-menu or react-native-navbar react-native-blur or react-native-camera like react-native-vector-icons
Slide 13
Slide 13 text
13 JS Platform code Assets JS JavaScript Module React Native Module
Slide 14
Slide 14 text
Platform code Assets This parts require a post-processing 14
Slide 15
Slide 15 text
Platform code 15 Post-processing
Slide 16
Slide 16 text
Platform code 16 Post-processing
Slide 17
Slide 17 text
Platform code 17 Post-processing
Slide 18
Slide 18 text
18
Slide 19
Slide 19 text
19 https://github.com/rnpm/rnpm
Slide 20
Slide 20 text
20 $ rnpm install react-native-vector-icons
Slide 21
Slide 21 text
21
Slide 22
Slide 22 text
Features 22
Slide 23
Slide 23 text
High adoption 23 Features 1. No config required $ npm install -g rnpm 2. Codebase agnostic $ ls ./my-app $ // code structure is up to you
Slide 24
Slide 24 text
Plugins 24 Features
Slide 25
Slide 25 text
Parameters 25 Features
Slide 26
Slide 26 text
Parameters 26 Features
Slide 27
Slide 27 text
Unlink 27 Features
Slide 28
Slide 28 text
What’s next? 28
Slide 29
Slide 29 text
Linking core libraries 29 What’s next
Slide 30
Slide 30 text
One tool to rule them all 30 What’s next
Slide 31
Slide 31 text
Thank you 31
Slide 32
Slide 32 text
Questions? 32 Also ask on twitter #reactamsterdam