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

$whoami

Jen Looper

Senior Developer Advocate

Progress

DevRel for NativeScript

@jenlooper

@jenlooper

@jenlooper

Comparing mobile frameworks

@jenlooper

@jenlooper

I just wanna build a mobile app!

@jenlooper

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

@jenlooper

@jenlooper

@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

@jenlooper

The Cheese-Fest apps

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

@jenlooper

Agenda

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

@jenlooper

@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

@jenlooper

@jenlooper

dank je!

@jenlooper