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

I feel pretty good about

mobile development!

Comparing mobile frameworks

@jenlooper

@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

@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

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

@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

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

By Telerik DevRel

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

For FrontendLove Conference, Amsterdam

  • 5,357