Write Once, Run Everywhere

Write Once, Run Everywhere

Mike North Mobile+Web Devcon 2015

@MichaelLNorth github.com/truenorth

http://github.com/truenorth

@MichaelLNorth

Hi

@MichaelLNorth

Write once, run everywhere

Apache Cordova

Media Queries

Small

Medium

Large

Any

@MichaelLNorth

NW.js

@MichaelLNorth

//TODO

The state of HTML5

Case Study

Cross-Device Tech

Ember.js & Friends

@MichaelLNorth

Great places to startThe state of HTML5

2007 2008

HTML5 Mobile Beginnings

2009-2010

@MichaelLNorth


2012

@MichaelLNorth


Common opinion of hybrid apps

“Hybrid app performance sucks, so build native or go home” — Mark Z.

And now many businesses are asking“Do we have the $$$$$ required to build and

maintain several native apps, or should we neglect mobile?”

@MichaelLNorth


It’s time to reconsider

Newest iPhone Now

Newest iPhone 2012

iPhone 6

iPhone 4s

1612

215

2015

7.5X

@MichaelLNorth


@MichaelLNorth


@MichaelLNorth


@MichaelLNorth


Benefits of the hybrid app approach

• Web developers know the drill already • Functionality is not all that limited • Core “modern web” concepts are still valuable• URLs • HTTP

• Layout • Style

@MichaelLNorth


Shelf life of the web > Shelf life of native

@MichaelLNorth


Use cases we’ll focus on

• Menus • 2D views • CRUD • Notifications,

etc…

@MichaelLNorth

//TODO

The state of HTML5

Case Study

Cross-Device Tech

Ember.js and friends

@MichaelLNorth

Great places to startCross-Device Tech

NW.js

@MichaelLNorth


WebView Native App

Application API

XHR

XHR

WebView Method

Your App

@MichaelLNorth


image source: http://www.slideshare.net/hakimrie/phonegapcordova-vs-native-application

http://www.slideshare.net/hakimrie/phonegapcordova-vs-native-application

@MichaelLNorth

Great places to startCross-Device TechNW.js

image source: http://www.slideshare.net/Products123/nwjs-essentials-sample-chapter

http://www.slideshare.net/Products123/nwjs-essentials-sample-chapter

@MichaelLNorth


These are very similar abstractionsOS

HTML/JS/CSS “Web App”

“Native” part of your app

JS API to invoke native functionality

@MichaelLNorth


@MichaelLNorth


#PROTIP - Facade Design Pattern

function sendNotification(title, message, icon)

Desktop Native

Mobile Native

Default

node-growl OS X notification

navigator.notification.alert()

show in-app notification

@MichaelLNorth

//TODO

The state of HTML5

Case Study

Cross-Device Tech


@MichaelLNorth

Great places to startEmber.js and friends

What’s all about?

• Data binding • Convention over

configuration • Productivity-focused • Started as a fork of • Lots of great

companies use it

@MichaelLNorth


What do people love about ?

• Solid conventions • Abstractions that scale • Addresses the “whole problem” • Steers you toward consistent architecture • Core team

• All must work on their own apps • Work closely with TC39, WHATWG

@MichaelLNorth


What do people love about ?

• Opinionated, and many of the opinions are worth considering

@MichaelLNorth


$ ember-‐cli

@MichaelLNorth


Ember-cli: what can it do?

• Dependency management and setup • Code generation • Asset pipeline • Development web server • Mock http endpoints • API proxy • And more…

@MichaelLNorth


Ember addons

• As easy to build as an app • Written in ES2015 • Pulled in as NPM dependencies • Can do lots of stuff to consuming app

• Make new ember objects available • Add preprocessors • Add new commands to ember-cli

@MichaelLNorth


Ember addons

http://emberaddons.com

http://emberaddons.com

@MichaelLNorth


Why does this matter for this discussion?

• Capable framework, suitable for complexity • Long shelf life • Easy to implement and set up tooling • Addons are ready and waiting for us!

@MichaelLNorth

//TODO

The state of HTML5

Case Study

Cross-Device Tech


@MichaelLNorth

Great places to startCase Study

@MichaelLNorth


Start with URLs

/ /orgsor list of Github orgs

/org/jquery info about the jQuery org

/org/jquery/repos list of repos in the jQuery org

/org/jquery/repo/esprima info about esprima

@MichaelLNorth


Start with URLs/

/orgs

/org/jquery

/org/jquery/repos

/org/jquery/repo/esprima

index

orgs

org

org.repos

org.repo

@MichaelLNorth


Start with URLs

@MichaelLNorth


Add some models

REPOname url stargazers watchers issues

ORGname avatar_url description url

/org/jqueryorg.show

a.g.c/orgs/jquery

a.g.c/repos/jquery/esprima

/org/jquery/repo/esprimaorg.show.repo.show

https://a.g.c/orgs/jquery

https://api.github.com/repos/jquery/esprima

@MichaelLNorth


Add some models

REPOname url stargazers watchers issues

ORGname avatar_url description url

/org/jqueryorg.show

a.g.c/orgs/jquery

a.g.c/repos/jquery/esprima

/org/jquery/repo/esprimaorg.show.repo.show

https://a.g.c/orgs/jquery

https://api.github.com/repos/jquery/esprima

@MichaelLNorth


Let’s talk, API…

• Ember gives us two objects with very specific

roles • Adapter - Build URLs, send/rcv ajax request • Serializer - transform API Object / UI Object

@MichaelLNorth


Apply a responsive design

@MichaelLNorth


Bring in a material design framework

$ ember install ember-cli-materialize

@MichaelLNorth


Time for hybridifying

$ ember install ember-cli-cordova$ ember cordova:build$ ember serve

@MichaelLNorth


@MichaelLNorth


Desktopification

$ ember install ember-cli-cordova$ ember cordova:build$ ember serve

@MichaelLNorth


Desktopification

"window": { "title": "Write once, run everywhere", "toolbar": false, "min_width": 601, "min_height": 200, "width": 960, "height": 600 },

@MichaelLNorth


@MichaelLNorth

//TODO

Style

Case Study

Computed Properties

Components

@MichaelLNorth

@MichaelLNorth

Write Once, Run Everywhere

Internet

michaellnorth great

michaellnorth todo

michaellnorth github

great companies

startthe state of html5

html5 mobile beginnings

native apps

app notication