going hybridmobile apps

with HTML5

Hugo Rodrigues

Full-stack Developer (and Full-time HackHands expert)

www.hackhands.com/hugorodrigues www.hugorodrigues.com mail@hugorodrigues.com

@hugorodrigues

WARNINGOpinionated Talk ahead

( haters will hate )

WTF is Hybrid Mobile/Desktop HTML5?

HYBRID HTML5APPS

HTML5APPS

Everything you already know

about HTML5

All from HTML5 +

Native OS API’s

runs in browser runs inside a native app

When you need to go Hybrid?

HYBRID HTML5APPS

Hybrid Desktop

- Full filesystem access - Use NPM Packages - Shell Access - Interact with system …

Hybrid Mobile

Access Native OS API - Plugin Access -

Hardware Access - Camera, GPS, Vibration -

…

html 5 is tricky

hybrid

there are hundreds of

different devices

we really need to UNDERSTANDhow it works

how to get started?

You think you havemany options?

Let me tell you a secret…

is the base of everything!

They all depend on Cordova

Cordova?

★ Phonegap started everything ★ Phonegap Core moved to Apache foundation when Adobe acquires Phonegap. ★ I like to call it “the abstraction layer” ★ Can be used without any other tool ★ It’s extendable by using plugins

Plugins… Plugins everywhere!

Battery Status Camera Console

Contacts

Device

FileSystem

File Transfer

GeolocationMediaVibration

Using the Camera plugin to Take a picture!

let’s see how MOBILE STACK

works

Native stack

Phone Operative System (iOS, Android, Windows Phone)

Native stack

Phone Operative System (iOS, Android, Windows Phone)

CameraAPI

FileAPI

GPSAPI

MediaAPI

Native stack

Phone Operative System (iOS, Android, Windows Phone)

Your NATIVE App(Java, objectiveC, swift)

CameraAPI

FileAPI

GPSAPI

MediaAPI

Hybrid HTML5 Stack

Phone Operative System (iOS, Android, Windows Phone)

Hybrid HTML5 Stack

Phone Operative System (iOS, Android, Windows Phone)

CameraAPI

FileAPI

GPSAPI

MediaAPI

Hybrid HTML5 Stack

Phone Operative System (iOS, Android, Windows Phone)

CameraAPI

FileAPI

GPSAPI

MediaAPI

Cordova bridge (Abstraction layer)

Hybrid HTML5 Stack

Phone Operative System (iOS, Android, Windows Phone)

CameraAPI

FileAPI

GPSAPI

MediaAPI

Cordova bridge (Abstraction layer)

CameraJS

FileJS

GPSJS

MediaJS

Hybrid HTML5 Stack

Phone Operative System (iOS, Android, Windows Phone)

CameraAPI

FileAPI

GPSAPI

MediaAPI

Cordova bridge (Abstraction layer)

Rendering layer (Safari, Chrome, webkit)

CameraJS

FileJS

GPSJS

MediaJS

Hybrid HTML5 Stack

Phone Operative System (iOS, Android, Windows Phone)

CameraAPI

FileAPI

GPSAPI

MediaAPI

Cordova bridge (Abstraction layer)

Your HTML5 App(Html5 + CSS3 + JS)

Rendering layer (Safari, Chrome, webkit)

CameraJS

FileJS

GPSJS

MediaJS

Hybrid HTML5 vs NATIVE stack

Phone Operative System (iOS, Android, Windows Phone)

CameraAPI

FileAPI

GPSAPI

MediaAPI

Cordova bridge (Abstraction layer)

Your HTML5 App(Html5 + CSS3 + JS)

Rendering layer (Safari, Chrome, webkit)

CameraJS

FileJS

GPSJS

MediaJS

Phone Operative System (iOS, Android, Windows Phone)

Your NATIVE App(Java, objectiveC, swift)

CameraAPI

FileAPI

GPSAPI

MediaAPI

Hybrid HTML5 Native APP

Hybrid HTML5 vs NATIVE stack

Phone Operative System (iOS, Android, Windows Phone)

CameraAPI

FileAPI

GPSAPI

MediaAPI

Cordova bridge (Abstraction layer)

Your HTML5 App(Html5 + CSS3 + JS)

Rendering layer (Safari, Chrome, webkit)

CameraJS

FileJS

GPSJS

MediaJS

Phone Operative System (iOS, Android, Windows Phone)

Your NATIVE App(Java, objectiveC, swift)

CameraAPI

FileAPI

GPSAPI

MediaAPI

Hybrid HTML5 Native APP

Plugins

Cordova App

Webview

The same codebase runs everywhereYour HTML5 App

(Html5 + CSS3 + JS)

Phone Operative System iOS

CameraAPI

FileAPI

GPSAPI

MediaAPI

Cordova bridge (Abstraction layer)

Rendering layerSafari

CameraJS

FileJS

GPSJS

MediaJS

Phone Operative SystemAndroid

CameraAPI

FileAPI

GPSAPI

MediaAPI

Cordova bridge (Abstraction layer)

Rendering layerChrome or webkit

CameraJS

FileJS

GPSJS

MediaJS

Phone Operative System Windows Phone

CameraAPI

FileAPI

GPSAPI

MediaAPI

Cordova bridge (Abstraction layer)

Rendering layerInternet Explorer

CameraJS

FileJS

GPSJS

MediaJS

Nexus iPhone Lumia

So what the other projects do?

?

So what the other projects do?

★ Extra Tools (CLI/Console tools) ★ Helpers (IDE’s, WYSIWYG tools) ★ Mobile UI Frameworks (User Interface) ★ Cloud building ★ CI & Deployment ★ Auto submission to App store’s ★ Extra Cordova Plugins ★ …

hum… i see moving parts

everywhere

it’s all about USER INTERFACE

performance

Do Hybrid html5 apps suck because

they are slow?

Does Hybrid html5 suck because

it has ugly UI & bad UX?

it’s all about

USER INTERFACEperformance & usability

Some popular UI frameworks

What makes a great user Mobile UI framework?

✓ Performance

What makes a great user Mobile UI framework?

✓ Performance ✓ Native look and feel

What makes a great user Mobile UI framework?

✓ Performance ✓ Native look and feel ✓ Usability ( for users and developers )

What makes a great user Mobile UI framework?

✓ Performance ✓ Native look and feel ✓ Usability ( for users and developers ) ✓ SPA ( Single-page application )

What makes a great user Mobile UI framework?

✓ Performance ✓ Native look and feel ✓ Usability ( for users and developers ) ✓ SPA ( Single-page application ) ✓ Large number of UI components/widgets

What makes a great user Mobile UI framework?

✓ Performance ✓ Native look and feel ✓ Usability ( for users and developers ) ✓ SPA ( Single-page application ) ✓ Large number of UI components/widgets ✓ Well tested agains multiple devices

What makes a great user Mobile UI framework?

✓ Performance ✓ Native look and feel ✓ Usability ( for users and developers ) ✓ SPA ( Single-page application ) ✓ Large number of UI components/widgets ✓ Well tested agains multiple devices

ionic + ngCordova = Epic win!

✓ Great Documentation ✓ Quality set of JS Components ✓ Large set of CSS Components ✓ Build on AngularJS ✓ ngCordova for efective use of Cordova plugins on Angular

Key points for build great apps

✓ Understand how it works ( To avoid common pitfalls )

Key points for build great apps

✓ Understand how it works ( To avoid common pitfalls ) ✓ Know that everything is Cordova ( To find plugins & know how they are connected )

Key points for build great apps

✓ Understand how it works ( To avoid common pitfalls ) ✓ Know that everything is Cordova ( To find plugins & know how they are connected ) ✓ How Native plugins work ( So you can write you own )

Key points for build great apps

✓ Understand how it works ( To avoid common pitfalls ) ✓ Know that everything is Cordova ( To find plugins & know how they are connected ) ✓ How Native plugins work ( So you can write you own ) ✓ Choose a great UI Framework ( To deliver great UX and smooth UI )

Key points for build great apps

✓ Understand how it works ( To avoid common pitfalls ) ✓ Know that everything is Cordova ( To find plugins & know how they are connected ) ✓ How Native plugins work ( So you can write you own ) ✓ Choose a great UI Framework ( To deliver great UX and smooth UI )

got it, butSHOW US THE CODE!

Install SDK for your target platforms

Xcodefor building iOS Apps

Android SDKfor building Android Apps

Install NodeJS from website or brew/apt-get it

Installing Cordova + Ionic

$ npm install -g ionic

$ npm install -g cordova

Common development workflow

RunningScaffolding DebuggingCoding

Common development workflow

RunningScaffolding DebuggingCoding

Common development workflow

RunningScaffolding DebuggingCoding

Common development workflow

RunningScaffolding DebuggingCoding

Common development workflow

RunningScaffolding DebuggingCoding

Common development workflow

RunningScaffolding DebuggingCoding

.Scaffolding

Scaffolding your Project

$ ionic start myApp tabs

Scaffolding your Project - Add Platforms

$ ionic platform add ios

$ ionic platform add android

Scaffolding your Project - Add Plugins

$ cordova plugin add org.apache.cordova.camera

Find more plugin: http://plugins.cordova.io/

Installing "org.apache.cordova.camera" for android Installing "org.apache.cordova.camera" for ios

Scaffolding your Project - Directory tree

myApp|-- platforms| |-- android| `-- ios|-- plugins| `-- org.apache.cordova.camera`-- www |-- css |-- img |-- js |-- lib `-- templates

Scaffolding your Project - Directory tree

myApp|-- platforms| |-- android| `-- ios|-- plugins| `-- org.apache.cordova.camera`-- www |-- css |-- img |-- js |-- lib `-- templates

One folder for everyplatform you have targeted

Scaffolding your Project - Directory tree

myApp|-- platforms| |-- android| `-- ios|-- plugins| `-- org.apache.cordova.camera`-- www |-- css |-- img |-- js |-- lib `-- templates

All the installedplugins will go here

Scaffolding your Project - Directory tree

myApp|-- platforms| |-- android| `-- ios|-- plugins| `-- org.apache.cordova.camera`-- www |-- css |-- img |-- js |-- lib `-- templates

This is whereyou will code!

.Running

Running on Emulator

$ ionic emulate ios

$ ionic emulate android

Running on Real Device

$ ionic run ios

$ ionic run android

Running on Browser

$ ionic serve

.Debugging

Debugging - Android

$ adb logcat

$ adb logcat "CordovaLog:D *:S"

Debugging - Android - Chrome

chrome://inspect/

https://www.jshybugger.com

Android 4.4+

Previous versions

Debugging - iOS

$ defaults write com.apple.Safari IncludeDebugMenu 1

Activate Safari Dev/Debug Menu (or use the GUI)

Select the simulator or a connected device and start debugging

don’t be shy!Q & A

( hope you like it )THANK YOU

www.hugorodrigues.com