Write Once, Run Everywhere

Write Once,
Run Everywhere
Mike North
Mobile+Web Devcon 2015
@MichaelLNorth
github.com/truenorth

@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
Beneﬁts 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
• Notiﬁcations,
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

@MichaelLNorth
NW.js
image source: http://www.slideshare.net/Products123/nwjs-essentials-sample-chapter

@MichaelLNorth
These are very similar abstractions
OS
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
Great places to startEmber.js and friends
What’s all about?
• Data binding
• Convention over
conﬁguration
• 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

@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
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
REPO
name
url
stargazers
watchers
issues
ORG
name
avatar_url
description
url
/org/jquery
org.show
a.g.c/orgs/jquery
a.g.c/repos/jquery/esprima
/org/jquery/repo/esprima
org.show.repo.show

@MichaelLNorth
Let’s talk, API…
• Ember gives us two objects with very speciﬁc
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
Desktopiﬁcation
$ ember install ember-cli-cordova
$ ember cordova:build
$ ember serve

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

@MichaelLNorth
//TODO
Style
Case Study
Computed Properties
Components

Write Once, Run Everywhere

Related slideshows

More Related Content

Write Once, Run Everywhere