Gouda, Edam, or Maasdammer: Comparing NativeScript, Ionic, and React Native for Mobile Apps
$whoami
Jen Looper
Senior Developer Advocate
Progress
DevRel for NativeScript
@jenlooper
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4577187/images.duckduckgo.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4508615/h5B39F396.jpg)
I feel pretty good about
mobile development!
Comparing mobile frameworks
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4550994/apples_oranges.fw.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4548489/images.duckduckgo-1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4548490/images.duckduckgo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484404/nativescript_kendo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484402/ionic-logo-300-300x248.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484401/images.duckduckgo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4548499/images.duckduckgo.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4548506/images.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4548508/download.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4548509/images.duckduckgo-2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
I just wanna build a mobile app!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4577216/511461968.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4577230/Speech_bubble.svg.png)
Let's compare comparable things
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484374/images.duckduckgo-1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484375/gouda.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484377/images.duckduckgo-2.jpg)
Maasdammer
"cheaper to produce than Emmenthal"
Edam
"ages and travels well, and does not spoil; it only hardens"
Gouda
"one of the oldest recorded cheeses in the world still made today"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
Ionic
The best way to build a hybrid mobile app - aka one that runs in a webview using Cordova
React Native
NativeScript
The best way to build a "JavaScript-to-Native" mobile app using React and a 'bridging' technology, via Facebook
The best way to build a "JavaScript-to-Native" mobile app using a 'runtime' technology and either no framework, or Angular, or Vue.js, via Progress
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484401/images.duckduckgo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484402/ionic-logo-300-300x248.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484404/nativescript_kendo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4507575/react-native.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484401/images.duckduckgo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4507576/ns-common.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484404/nativescript_kendo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4507739/hybrid-mobile-application-with-ionic-framework-18-638.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484402/ionic-logo-300-300x248.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
at-a-glance
Similarities
- All support building Android and iOS mobile apps
- All support integrating native code where the framework can't handle use cases out of the box
- All leverage JavaScript
- All are free Open Source projects
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4492880/images.duckduckgo-1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4492880/images.duckduckgo-1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4492880/images.duckduckgo-1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
at-a-glance
Differences
- Different support for Windows, Desktop, Web
- Different basic technology - hybrid, runtime, bridge
- Different monetization strategies
- Different licensing!*
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4410930/cheeses.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
Let's build something
- I want a master-detail display for cheeses with image, short + long description
- Identical styling
- Fed by Firebase
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
Let's make three identical apps
celebrate the 'crystals'!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484383/marieke_gouda.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484401/images.duckduckgo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484402/ionic-logo-300-300x248.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484404/nativescript_kendo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
beware the 'mold'!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4496054/images.duckduckgo.png)
The Cheese-Fest apps
https://github.com/jlooper/cheese-fest
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4492359/Screen_Shot_2018-01-08_at_12.12.02_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484404/nativescript_kendo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484402/ionic-logo-300-300x248.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484401/images.duckduckgo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4492367/flutter-mark-square-100.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4492372/IMG_9921.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
Agenda
- Create / Emulate / Debug
- Data Fetching (Firebase)
- Styling
- Gotchas
- Goodies
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4492352/ionic-cheese.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484402/ionic-logo-300-300x248.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484402/ionic-logo-300-300x248.png)
Getting Started
- install Ionic CLI and Cordova
-
ionic start myApp tabs
-
cd myApp
-
ionic serve
- build and run in browser
- when ready, run on device
basic - via CLI
with Ionic Creator (freemium)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4577478/Screenshot_2018-02-05_12.55.10.png)
Emulate in browser
or on device
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484402/ionic-logo-300-300x248.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4577490/Screenshot_2018-02-05_12.59.32.png)
ionic serve
ionic cordova emulate ios
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4577517/Simulator_Screen_Shot_-_iPhone_X_-_2018-02-05_at_13.06.44.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4577525/Screenshot_2018-02-05_13.07.38.png)
Debug
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484402/ionic-logo-300-300x248.png)
- Debug in browser with Chrome Dev Tools
- Use native tools (Xcode, ADB)
- Use Visual Studio Code Cordova Dev Tools
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4577582/Screenshot_2018-02-05_13.22.49.png)
Code: Fetch data
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484402/ionic-logo-300-300x248.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4577590/carbon.png)
Build the master screen
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484402/ionic-logo-300-300x248.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4577605/carbon__1_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4577606/carbon__2_.png)
Style it!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484402/ionic-logo-300-300x248.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4577619/carbon__3_.png)
The crystal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484383/marieke_gouda.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484402/ionic-logo-300-300x248.png)
Ionic apps always look nice out of the box. Plus Angular!
The mold
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4496054/images.duckduckgo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484402/ionic-logo-300-300x248.png)
reliance on Cordova
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484401/images.duckduckgo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4496001/react-native-cheese.gif)
- install node, watchman, and React Native CLI
-
react-native init myApp
-
cd myApp
-
react-native run-ios
- emulate directly on device or in simulator (without using Expo)
Getting Started
- install create-react-native-app
-
create-react-native-app myApp
-
cd myApp
-
npm start
- emulate in Expo app on device or in simulator
basic
advanced
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484401/images.duckduckgo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4548710/Screenshot_2018-01-26_13.05.39.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4548741/Screenshot_2018-01-26_13.21.40.png)
Emulate using Expo
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484401/images.duckduckgo.png)
Emulate using souped-up Xcode / AVD simulators
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4549156/Screenshot_2018-01-26_16.44.43.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4549186/Simulator_Screen_Shot_-_iPhone_X_-_2018-01-26_at_16.53.48.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484401/images.duckduckgo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
Debug in browser and on device
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484401/images.duckduckgo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4549330/Simulator_Screen_Shot_-_iPhone_X_-_2018-01-26_at_18.10.07.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4549331/ui-inspector.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4549332/ReactDevTools.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
Code! Get your data
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484401/images.duckduckgo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4552036/carbon__7_.png)
Build the master screen
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484401/images.duckduckgo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4552033/carbon__6_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
Style it!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484401/images.duckduckgo.png)
styles.js
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4552007/carbon__3_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4552014/carbon__4_.png)
The crystal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484383/marieke_gouda.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
Developer experience via the emulator
The mold
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4496054/images.duckduckgo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
Once you scaffold your app.....what then!?
example: DIY ActionBar!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484404/nativescript_kendo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4496007/ns-cheese.gif)
- install node, NativeScript CLI
-
tns create myApp
- Scaffold with a template
-
cd myApp
-
tns run ios
- emulate directly on device or in simulator
Getting Started
- Playground: play.nativescript.org
-
Sidekick (desktop app)
basic
advanced
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484404/nativescript_kendo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4577720/Screenshot_2018-02-05_14.06.16.png)
Emulate using emulator or on device
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484404/nativescript_kendo.png)
tns run ios || tns run android
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4577753/IMG_2BA071D0FB9C-1.jpeg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
Debug
- tns debug ios || android = Chrome DevTools!
- Use native tools (Xcode, ADB)
- Use Visual Studio Code NativeScript plugin
- Use Sidekick or Playground
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4577771/Screenshot_2018-02-05_14.28.35.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4577776/Screenshot_2018-02-05_14.30.33.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484404/nativescript_kendo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
Code! Get your data
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484404/nativescript_kendo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4577808/carbon__4_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4577833/carbon__6_.png)
Build the master screen
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484404/nativescript_kendo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4577834/carbon__5_.png)
Style it!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484404/nativescript_kendo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4577851/carbon__7_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484404/nativescript_kendo.png)
The crystal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484383/marieke_gouda.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
Getting started with templates
Helpful development tools
Themes
Vanilla / Angular / Vue.js
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4484404/nativescript_kendo.png)
The mold
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4496054/images.duckduckgo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
installation can be challenging
so many delicious choices!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4577877/images.duckduckgo-1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4508612/cb2a53b5f7372532e39e35c38ab5fcd3--cheese-meme-dead-zone.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4508613/10ff57c925ad4aaca24da2ef6c75ab23.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4508617/cheese-is-the-opium.jpg)
dank je!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/196305/images/4310587/images.duckduckgo.jpg)
@jenlooper