YOUR OPTIONS FOR BUILDING MOBILE APPS IN 2016

• Computer Science graduate from the American University of Beirut.

• Currently freelancing in software engineering and design

• Focused mainly on Mobile Development using best practices and Agile

methods

• Thriving to be an international speaker in different topics

A BRIEF ABOUT ME

Jad Salhani

What is a Hybrid App?

• HTML5 / CSS / JS

• Web View or Transpiled

• Hybrid Framework

Hybrid. It's Awesome.

• Use Existing Web Skills

• Single Codebase

• Java is Terrible

• Hot-fixes - No Review

• Mostly Platform-Agnostic

• Objective-C is MoonMan

But Isn’t it True That…

• “…hybrid is slow?”

• “…native is more performant?”

• “…hybrid has janky animations?”

• “…hybrid can’t access native features?”

The Short Answer

Devices Have Evolved!

Year Device Processor RAM2008 iPhone 3 620 MHz 128 MB 2010 iPhone 4 1 GHz 512 MB 2012 iPhone 5 1.3 GHz dual-core 1GB 2014 iPhone 6 1.4 GHz dual-core 1 GB 2016 iPhone 7 2.3 GHz quad-core 2 GB

iOS Adoption…

It’s Awesome!

And Android…

And Android…

Also Awesome!

And Best of All

WKWebView Chromium

Nitro V8

So Awesome

• JIT Machine Code

• Native Scrolling

• Faster Rendering

• Faster Compute

• Latest Device APIsArt by Christopher Hastings

“So Why Isn’t Everyone Doing Hybrid?”

¯\_(ツ)_/¯

JS for Mobile is Hard =(

• No Touch Events

• No Native UI Components

• No Performance Optimization

• No SDK

• No Style

A LITTLE BIT OF NATIVE IN MY LIFE

NATIVE +

• No middle-man translator

• Access to latest SDK on release and latest device features

• Machine-code optimizations

• Best performance

• Native design

NATIVE -

• Supporting more platforms = More codebases

• Language migration obstacles (For ex, Swift 2 -> 3)

• Responsive design is hard

• Self-write almost every UI component

• Slow development

ENTER HYBRID FRAMEWORKS

A little bit of Hybrid, by my side

OUR STARS FOR TODAY

• Ionic Framework

• NativeScript

• React-Native

• Xamarin

• Appcelerator

What is Ionic?

• Hybrid mobile framework

• Built with AngularJS

• Written in Typescript

• Open Source - MIT License

• Built on Web/Browser Standards

ionicframework.com

Install Ionic

$ npm install -g ionic cordova

$ ionic start myApp blank —v2

Why Angular2?

• Component-based • Designed for Mobile • Module-based DI • Ahead-of-Time Compiling

What About Typescript?

• Superset of Javascript • ES6 Support • Type Checking • Improves Tooling

Everything is a Component

SPA Frameworks are Popular

Angular is SUPER Popular

BAM, SUCKA!

UI Components

UI Components

Theming

• Plain ol’ CSS + Sass

• Easy to override

• Variables based

• 80+ mixins

ionicons

ionicons.com

• Cross-platform • MIT license• 700+ Icons

Ionic Native

• Access Native Device APIs

• Wraps Cordova Plugins

• Written in Typescript

• Adds Promises/Observables

• Framework Agnostic

github.com/driftyco/ionic-native

Ionic Native

Performance Obsessed

• Minimal DOM Manipulation

• Native Scrolling

• Jank-free Page Transitions

• Hardware Accelerated Animations

• Optimized for Touch Events

AoT Compiling

• Build-time Compilation

• Tree Shaking

• Smaller Bundles

• Faster App Launch

• Faster Component Loading

What Else is Ionic?

ionic.io/cloud

Code Once. Run Everywhere.

One Team. One Codebase. Every Platform.

Code Once. Run Everywhere.

Deploying to a Device

• Enable Developer Options

• Enable USB Debugging

• Create Provisioning Profile

• Code Sign .IPA in Xcode

• npm install -g ios-deploy

• bit.ly/deploy-without-dev-account

THE UGLY

Ionic is strongly linked to Angular 2

If Angular 2 introduces breaking changes, most

probably Ionic will too

Still moody about their project architecture and

tools

NativeScript

WHAT IS NATIVESCRIPT?

A runtime for building and running native iOS

and Android apps with a single, JavaScript

code base

INSTALLATION

$ npm install -g nativescript

$ tns create my-app-name

Free and open source

CHOICE IN ARCHITECTURE

Write your

application

using plain

Javascript

Use TypeScript to

get Object

Oriented features

and compile time

error checking

Use Angular to

architect

application. Reuse

almost all code

between web and

mobile

USE LOTS OF PREBUILT CODE

• Use thousands of plugins from NPM

• Use free native controls from Cocoapods or Android Arsenal

Absolute Dock Grid Stack Wrap

NATIVE LAYOUTS

NATIVESCRIPT ANDROID EXAMPLE

Output:

Look! JavaScript can create and use Native Android Java objects!

NATIVESCRIPT IOS EXAMPLE

JavaScript can create and use Obj-C objects

too?

HOW DOES THIS WORK?

CALLING ANDROID API

NATIVESCRIPT MODULESCode Modules Platform API

NATIVESCRIPT FILE MODULE

WHAT IS REACT NATIVE?• Built by Facebook

• Uses the same architectural design as React

• Declarative components

• Promoted as “indistinguishable” from an app built using Objective-C or Java

• Embeds native components for use if needed

INSTALLATION

$ npm install -g react-native-cli

$ react-native init AwesomeProject

• Builds using Native projects

• index.{platform}.js

• Watchman for live-reload

Component-Driven, Easy to structure 1 export default class AwesomeProject extends 2 Component { 3 render() { 4 return ( 5 <View style={styles.container}> 6 <Text style={styles.welcome}> 7 Welcome to React Native! 8 </Text> 9 <Text style={styles.instructions}> 10 To get started, edit index.ios.js 11 </Text> 12 <Text style={styles.instructions}> 13 Press Cmd+R to reload,{'\n'} 14 Cmd+D or shake for dev menu 15 </Text> 16 </View> 17 ); 18 } 19 }

JS + NATIVE COMPONENTS

1 render() { 2 return ( 3 <ActivityIndicator 4 animating={this.state.animating} 5 style={[styles.centering, {height: 80}]} 6 size="large" 7 /> 8 ); 9 }

ANDROID NATIVE COMPONENTS

1 render: function() { 2 var progressBar = 3 <View style={styles.container}> 4 <ProgressBar styleAttr="Inverse" /> 5 </View>; 6 7 return ( 8 <MyLoadingComponent 9 componentView={componentView} 10 loadingView={progressBar} 11 style={styles.loadingComponent} 12 /> 13 ); 14 },

IOS EQUIVALENT 1 render() { 2 return ( 3 <View style={styles.container}> 4 <ProgressViewIOS style={styles. 5 progressView} 6 progress={this. 7 getProgress(0)}/> 8 </View> 9 ); 10 }, 11 });

Live-Reload on running device!

THE UGLY

• index.{platform}.js implies 2 code bases

• Native iOS support much greater than Android

• Less stable than others

WHAT IS XAMARIN?

• Microsoft’s take on Hybrid Mobile Apps

• Uses C# as main language

• Visual Studio support for native app projects and files

• Native SDKs ported to C# for easier use in code

• Supports wearables

• Not Open-Source, licensed by Microsoft

INSTALLATION

Download Xamarin Installer (https://www.xamarin.com/download)

C# IS YOUR FRIEND

ANDROID UI WIDGETS

IOS DESIGNER

WATCHOS SUPPORT

WRITE ONCE, RUN ANYWHERE..

• C# adapted to fit platform architecture

• Cross-compiled to platform native machine code

• Platform SDK APIs wrapped in C#

..BUT NOT SO MUCH

• One project per platform

• More than one Codebase

• Write once for a platform, run for that platform

NOT COMPLETELY FREE TOO

WHAT IS APPCELERATOR?

Mobile Hybrid framework that uses JavaScript

Has custom IDE with SDK Support

Immediate support for each new OS release

App designer that updates running app

INSTALLATION

$ npm install appcelerator -g

$ appc setup

$ appc new

FEATURES

• Appcelerator Studio

• Titanium SDK

• Hyperloop SDK for native access

• Analytics SDK

• Arrow DAL

DECLARING A VIEW

1 <Alloy> 2 <Window class="container"> 3 <Label id="label" onClick="doClick">Hello, 4 World</Label> 5 </Window> 6 </Alloy>

AND ITS JS

1 function doClick(e) { 2 alert($.label.text); 3 } 4 5 $.index.open();

THE UGLY

• Uses Vanilla Javascript with a jQuery-like SDK

• Counter-intuitive XML tags have to be used

• NOT Free

• When in-practice, has poor performance compared to other frameoworks

CLOSING NOTESo many more frameworks are available

Choose depending on your use case and your

skills

There is no “One Ring” of hybrid frameworks

THANK YOU!

@jadsalhani http://jadsalhani.com

Q & A