The document discusses React Native, a framework that allows developers to build native mobile apps using JavaScript and React. It highlights that native mobile app development is difficult due to issues like lack of code sharing and low iteration speed. React Native addresses these issues by allowing developers to write once and deploy their code to both Android and iOS. The document provides an overview of React Native concepts like components, styling, and setup instructions for Android development. It concludes by noting benefits like fast iteration and the ability to deploy code updates directly to users without app store approval.

1. NATIVE MOBILE APP
WITH JAVASCRIPT
PHP Indonesia
March 26st 2015

2. SONNY LAZUARDI
Frontend Engineer @
@sonnylazuardi
sonnylab.com
github.com/sonnylazuardi

3. REACT.ID

5. BACKGROUND

6. NATIVE MOBILE APP
DEVELOPMENT IS
HARD
No Code
Sharing
Low
Iteration
Speed
Hard To
Scale
https://speakerdeck.com/frantic/react-native-tutorial-nyc-15

7. WEB APP
DEVELOPMENT
IS EASY
R

8. HYBRID APP

9. NATIVE APPSWHY
ARE GREAT?
Complex
Gestures &
Smooth
Animations
Fast,
Responsive
Consistent
With the
platform
https://speakerdeck.com/frantic/react-native-tutorial-nyc-15

10. REACT NATIVE

11. JAVASCRIPT IS FAST
THE DOM IS SLOW

12. DOM

13. UIKIT

14. REACT NATIVE
WRITE ONCE
RUN ANYWHERE

15. REACT NATIVE
LEARN ONCE
WRITE ANYWHERE

16. REACT
NATIVE
COMPONENT
<div> <View>
Browser DOM
Native
Component
<img> <Image>
<span> <Text>
<ScrollView>
<MapView>
<TabBar>

17. REACT
NATIVE
STYLING

18. REACT
NATIVE
SETUP
• Requirements
• OSX
• Node 4.0 or newer
• Watchman
• Installing React Native CLI
npm install –g react-native-cli
• Starting React Native Project
react-native init ProjectName

19. ANDROID
SETUP
• Install JDK
• Install Android SDK
brew install android-sdk
• Add Android SDK path to your
~/.bashrc, ~/.zshrc
export
ANDROID_HOME=/usr/local/opt/android-
sdk

21. Deploy code updates
directly to users
No more waiting
App store approval
FAST ITERATION

22. LIVE DEMO
https://github.com/sonnylazuardi/phpindonesia-react-native
REACT.ID/PHPINDONESIA