Creating 'Native' Cross-Platform AppsBrameshmadhav S ( @sbmadhav )

The Fourth City

• To the Future!• React Native• Native Script• Demo

Agenda

To the FuturePhoneGap took us this far, but is it time to move on?

App Development Approaches

Native Mobile Experience/Capabilities/Services/

Portability (Cross Device Reusability)

Maintenance Cost (TCO)

Mobile Web App Hybrid App Mixed Hybrid App Native App

Write once ; Run anywhere

Learn once ; Write anywhere

React NativeThe website you want to convert to an app

React Native• Uses similar philosophy to React• Virtual DOM is the new playground•  In brief, the application UI is simply expressed as a function of the

current application state• Application logic is written and runs in JavaScript, whereas your

application UI is fully native.

• Therefore you have none of the compromises typically associated with HTML5 UI.

• Open source!

Why React Native

Instant Reload

Why React Native

Single Environment for Multiple Platforms

Why React Native

npm install -g react-native-cli react-native init <project-name> For iOS :• <project-name>/ios/<project-name>.xcodeproj

For Android :• react-native run-android from the project folder

This will open a terminal which will help live reload the project

Usually at : http://localhost:8081/index.ios.bundle

Getting started with React Native

Demo

• All the goodness to React packaged out of the Web• The concept of virtual DOM driving React is so amazing• Amazing Community support and traction• React native for Android was released less than a month ago• Production ready? Yes and No• Facebook Groups app runs completely on this

Summary – React Native

NativeScriptDo you need to know the web to write cross platform mobile apps?

NativeScript

No DOM

!=

!=

No cross compilation

!=Direct access to native APIs in JS

A runtime for building and running native iOS, Android, and (soon) Windows Phone apps with a single, JavaScript code base

Why NativeScript?

Skills Code

Access to native APIsCode ReuseSkills Reuse

How Does NativeScript work ?NativeScript runs JavaScript on a JavaScript VM

• JavaScriptCore on iOS

• V8 on Android

NativeScript Modules

https://www.npmjs.com/search?q=nativescript

Getting Started with NativeScript• CLI

• npm install –g nativescript (https://github.com/nativescript/nativescript-cli)

• tns create <project name> & tns platform add ios | android , tns run ios | android –emulator

• • Backend-as-a-service - Push notifications, cloud data, file

storage, etc.• Analytics• AppBuilder• Paid service with 30-day free trial

Demo

• The power of true native apps at your disposal! As simple as that

• Hybrid mobile apps are of the past. Time to look at the Future-Past

• https://www.nativescript.org/showcases shows all the apps built with Native script. It’s pretty nascent.

• Backed by Telerik with their Telerik Platform model • Community support is excellent

Summary – NativeScript

Philosophy matters

Mixed Hybrid Apps are the way forward

React Native & Native Script are easier and better ways to build Native Apps

Key Takeaways

© 2015 SAPIENT CORPORATION

Thank you