write once, run everywhere
TRANSCRIPT
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
Great places to startThe state of HTML5
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
Great places to startThe state of HTML5
It’s time to reconsider
Newest iPhone Now
Newest iPhone 2012
iPhone 6
iPhone 4s
1612
215
2015
7.5X
@MichaelLNorth
Great places to startThe state of HTML5
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
Great places to startThe state of HTML5
Use cases we’ll focus on
• Menus • 2D views • CRUD • Notifications,
etc…
@MichaelLNorth
Great places to startCross-Device Tech
WebView Native App
Application API
XHR
XHR
WebView Method
Your App
@MichaelLNorth
Great places to startCross-Device Tech
image source: 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
@MichaelLNorth
Great places to startCross-Device Tech
These are very similar abstractionsOS
HTML/JS/CSS “Web App”
“Native” part of your app
JS API to invoke native functionality
@MichaelLNorth
Great places to startCross-Device Tech
#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
configuration • Productivity-focused • Started as a fork of • Lots of great
companies use it
@MichaelLNorth
Great places to startEmber.js and friends
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
Great places to startEmber.js and friends
What do people love about ?
• Opinionated, and many of the opinions are worth considering
@MichaelLNorth
Great places to startEmber.js and friends
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
Great places to startEmber.js and friends
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
Great places to startEmber.js and friends
Ember addons
http://emberaddons.com
@MichaelLNorth
Great places to startEmber.js and friends
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
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
Great places to startCase Study
Start with URLs/
/orgs
/org/jquery
/org/jquery/repos
/org/jquery/repo/esprima
index
orgs
org
org.repos
org.repo
@MichaelLNorth
Great places to startCase Study
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
@MichaelLNorth
Great places to startCase Study
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
@MichaelLNorth
Great places to startCase Study
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
Great places to startCase Study
Bring in a material design framework
$ ember install ember-cli-materialize
@MichaelLNorth
Great places to startCase Study
Time for hybridifying
$ ember install ember-cli-cordova$ ember cordova:build$ ember serve
@MichaelLNorth
Great places to startCase Study
Desktopification
$ ember install ember-cli-cordova$ ember cordova:build$ ember serve
@MichaelLNorth
Great places to startCase Study
Desktopification
"window": { "title": "Write once, run everywhere", "toolbar": false, "min_width": 601, "min_height": 200, "width": 960, "height": 600 },