Gouda, Edam, or Maasdammer: Comparing NativeScript, Ionic, and React Native for Mobile Apps

$whoami

Jen Looper

Senior Developer Advocate

Progress

DevRel for NativeScript

@jenlooper

I feel pretty good about

mobile development!

Comparing mobile frameworks

@jenlooper

I just wanna build a mobile app!

@jenlooper

Let's compare comparable things

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"

@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

@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

@jenlooper

at-a-glance

Differences

Different support for Windows, Desktop, Web
Different basic technology - hybrid, runtime, bridge
Different monetization strategies
Different licensing!*

@jenlooper

Let's build something

I want a master-detail display for cheeses with image, short + long description
Identical styling
Fed by Firebase

@jenlooper

Let's make three identical apps

celebrate the 'crystals'!

@jenlooper

beware the 'mold'!

The Cheese-Fest apps

https://github.com/jlooper/cheese-fest

@jenlooper

Agenda

Create / Emulate / Debug
Data Fetching (Firebase)
Styling
Gotchas
Goodies

@jenlooper

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)

Emulate in browser

or on device

ionic serve

ionic cordova emulate ios

Debug

@jenlooper

Debug in browser with Chrome Dev Tools
Use native tools (Xcode, ADB)
Use Visual Studio Code Cordova Dev Tools

Code: Fetch data

Build the master screen

Style it!

@jenlooper

The crystal

@jenlooper

Ionic apps always look nice out of the box. Plus Angular!

The mold

@jenlooper

reliance on Cordova

@jenlooper

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

Emulate using Expo

Emulate using souped-up Xcode / AVD simulators

@jenlooper

Debug in browser and on device

@jenlooper

Code! Get your data

Build the master screen

@jenlooper

Style it!

styles.js

The crystal

@jenlooper

Developer experience via the emulator

The mold

@jenlooper

Once you scaffold your app.....what then!?

example: DIY ActionBar!

@jenlooper

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

Emulate using emulator or on device

tns run ios || tns run android

@jenlooper

Debug

tns debug ios || android = Chrome DevTools!
Use native tools (Xcode, ADB)
Use Visual Studio Code NativeScript plugin
Use Sidekick or Playground

@jenlooper

Code! Get your data

@jenlooper

Build the master screen

@jenlooper

Style it!

@jenlooper

The crystal

@jenlooper

Getting started with templates

Helpful development tools

Themes

Vanilla / Angular / Vue.js

The mold

@jenlooper

installation can be challenging

so many delicious choices!

@jenlooper

dank je!

@jenlooper