Is React Native
a Game changer
?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623478/React-Android.jpg)
© Yariv Gilad
YES!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
What is the problem?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
Compared to web dev, mobile dev sucks
!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
Facebook released react-native on 2015
Which is very exciting news for everyone!
and made mobile dev much similar to web dev
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
What is so much worse about mobile dev
vs web dev?
You might ask...
but really...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
Global usage
86%
Device fragmentation
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3316596/android-logo.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3316599/ios-logo1.png)
12%
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
Device fragmentation
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3316596/android-logo.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3316599/ios-logo1.png)
50%
50%
Within the US
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
App store Revenue
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3316596/android-logo.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3316599/ios-logo1.png)
>
Device fragmentation
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
Which platform will you target?
This question btw, doesn’t exist on the web
You don’t target Firefox OR Chrome OR safari…
You target ALL of them!!!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
If you are serious about mobile dev You want to target both!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3316596/android-logo.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3316599/ios-logo1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
So how expensive is it to build
an app targeting both platforms?
VERY BLOODY EXPENSIVE!!!
$$$
Costs
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
Quick calculation:
Costs
iOS dev = $100k / yr
Android dev = $100k / yr
Coordination = $50k / yr
x 1.5 years
$375k just for the app!!!
What about back end dev?
What about Marketing?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
Costs
You actually need $ ½ million…
Which means raising capital
Makes it difficult for entrepreneurs and new projects to
create and test new buisness models on the market
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
Programming Languages
Objective C
Swift
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3316596/android-logo.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3316599/ios-logo1.png)
Java
Kotlin
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
Programming Languages
Designed for performance / reliability
NOT designed for dev productivity
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3316596/android-logo.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3316599/ios-logo1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
Programming Languages
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3317342/Screen_Shot_2016-12-07_at_10.03.31_PM.png)
Swift - a typical ajax request
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
Programming Languages
Kotlin - a typical ajax request
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
fun sendGetRequest(userName:String, password:String) {
var reqParam = URLEncoder.encode("username", "UTF-8") + "=" + URLEncoder.encode(userName, "UTF-8")
reqParam += "&" + URLEncoder.encode("password", "UTF-8") + "=" + URLEncoder.encode(password, "UTF-8")
val mURL = URL("<Yout API Link>?"+reqParam)
with(mURL.openConnection() as HttpURLConnection) {
// optional default is GET
requestMethod = "GET"
println("URL : $url")
println("Response Code : $responseCode")
BufferedReader(InputStreamReader(inputStream)).use {
val response = StringBuffer()
var inputLine = it.readLine()
while (inputLine != null) {
response.append(inputLine)
inputLine = it.readLine()
}
it.close()
println("Response : $response")
}
}
}
Programming Languages
(async ()=> {
const res = await fetch( url,options);
return await res.json();
})().catch(console.error)
Javascript - a typical ajax request
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
Tooling
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3317369/20161113035920_Xcode_icon.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3317371/Android_Studio_icon.svg.png)
Xcode
Android studio
Not the best productivity...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
Any editor of your choice
lightweight text editors
Important for productivity!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/2876321/js.png)
live-reloading updating in real time
Tooling
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3317394/web.png)
upload your files to a server
users get your latest version
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3317398/icon_52143.png)
users run your compiled app locally
You need to deal with the App stores
Distribution platforms
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3317405/App_Store_Badge_EN.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3317406/en_badge_web_generic.png)
a big pain for devs
Impossible to have CI/CD workflow
Bugfixes may be approved ~ a week
First submit ~ a month
Might be rejected or shut down anytime
utter disaster!!!
Distribution platforms
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3317433/user_male2-128.png)
User A
Version 1.1
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3317433/user_male2-128.png)
User B
Version 1.2
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3317433/user_male2-128.png)
User C
Version 1.3
You cannot assume the user has version X
You cannot enforce an update
You need to manage multiple versions simultaneously
all the time!!!
Version Management
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3317441/Screen_Shot_2016-12-07_at_10.33.00_PM.png)
updates cannot be submitted over the air
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3317446/Screen_Shot_2016-12-07_at_10.33.38_PM.png)
unless they are downloaded and run by the built in JavaScriptCore
Updates Management
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3317457/0erQFLu.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3317461/react-native.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3317474/FLrIEeNN.jpg)
Expo
The easiest way to:
-
Setup your project in seconds
-
Test your App locally on your device
-
Send a link to beta testers
-
Compile the final Build binaries
-
Over the air updates in production
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
Layout
React native uses
css flexbox for layout which is amazing!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3317506/llflex2-02.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
Other alternatives
Cross compilers
No new dev paradigm
Use your language with iOS api...
Commercial license
Closed source -
no transparency we are used to on the web and github
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3317549/improving-your-workflow-with-rubymotion-6-638.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3317550/xamarin-logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3317551/FireMonkey-Logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
Other alternatives
Containers
Awesome idea!
allow web devs have a great workflow with html/css/js
Bad performance limited by the webview container
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3317542/phonegap.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3317543/cordova_logo_normal_dark_large.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3317544/ionic.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
Other alternatives
JavascriptCore
Render actual native components via a native bridge
Was not adopted by the community
Costs a license per developer... Bad business model...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3317533/Appcelerator-Titanium-Development.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
Other alternatives
JavascriptCore
- Better tooling
- Free and open source
- Backed by Facebook
- Widely adopted
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3317461/react-native.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
Summery
- React Native is indeed a Game changer!
- allows us to write JS and compile native apps
- Target iOS and Android
- Use any text editor
- Live reloading
- Familiar Flexbox layout
- Easy updates over the air
- Easy beta testing
- Makes Mobile dev more like Web dev
- Will save your team a lot of headaches
- Will save you a whole lot of $$$!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
Thank you
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3317457/0erQFLu.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/365490/images/3623527/React-Android.jpg)
© Yariv Gilad
react-native
By Yariv Gilad
react-native
- 1,638