Slide 1
Slide 1 text
NATIVE MOBILE APP
WITH JAVASCRIPT
PHP Indonesia
March 26st 2015
Slide 2
Slide 2 text
SONNY LAZUARDI
Frontend Engineer @
@sonnylazuardi
sonnylab.com
github.com/sonnylazuardi
Slide 3
Slide 3 text
REACT.ID
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
BACKGROUND
Slide 6
Slide 6 text
NATIVE MOBILE APP
DEVELOPMENT IS
HARD
No Code
Sharing
Low
Iteration
Speed
Hard To
Scale
https://speakerdeck.com/frantic/react-native-tutorial-nyc-15
Slide 7
Slide 7 text
WEB APP
DEVELOPMENT
IS EASY
R
Slide 8
Slide 8 text
HYBRID APP
Slide 9
Slide 9 text
NATIVE APPS
WHY
ARE GREAT?
Complex
Gestures &
Smooth
Animations
Fast,
Responsive
Consistent
With the
platform
https://speakerdeck.com/frantic/react-native-tutorial-nyc-15
Slide 10
Slide 10 text
REACT NATIVE
Slide 11
Slide 11 text
JAVASCRIPT IS FAST
THE DOM IS SLOW
Slide 12
Slide 12 text
DOM
Slide 13
Slide 13 text
UIKIT
Slide 14
Slide 14 text
REACT NATIVE
WRITE ONCE
RUN ANYWHERE
Slide 15
Slide 15 text
REACT NATIVE
LEARN ONCE
WRITE ANYWHERE
Slide 16
Slide 16 text
REACT
NATIVE
COMPONENT
Browser
DOM
Native
Component
![]()
Slide 17
Slide 17 text
REACT
NATIVE
STYLING
Slide 18
Slide 18 text
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
Slide 19
Slide 19 text
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
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
Deploy code updates
directly to users
No more waiting
App store approval
FAST ITERATION
Slide 22
Slide 22 text
LIVE DEMO
https://github.com/sonnylazuardi/phpindonesia-react-native
REACT.ID/PHPINDONESIA