The document discusses building hybrid mobile applications using HTML5 and JavaScript. It recommends using frameworks like Apache Cordova, Ember.js and NW.js to write code once that can run on multiple platforms. The document provides an example case study of building a GitHub organization viewer app with Ember.js that could be deployed to mobile, desktop and the web using these technologies. It outlines setting up models, routes, APIs and responsive design for the app and "hybridifying" it to run on different devices and platforms.
7. @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?”
8. @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
12. @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
17. @MichaelLNorth
Great places to startCross-Device Tech
WebView Native App
Application API
XHR
XHR
WebView
Method
Your App
18. @MichaelLNorth
Great places to startCross-Device Tech
image source: http://www.slideshare.net/hakimrie/phonegapcordova-vs-native-application
19. @MichaelLNorth
Great places to startCross-Device Tech
NW.js
image source: http://www.slideshare.net/Products123/nwjs-essentials-sample-chapter
20. @MichaelLNorth
Great places to startCross-Device Tech
These are very similar abstractions
OS
HTML/JS/CSS
“Web App”
“Native” part of
your app
JS API to invoke native
functionality
22. @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
24. @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
25. @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
26. @MichaelLNorth
Great places to startEmber.js and friends
What do people love about ?
• Opinionated, and many of the opinions are
worth considering
28. @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…
29. @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
31. @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!
34. @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
35. @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
37. @MichaelLNorth
Great places to startCase Study
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
38. @MichaelLNorth
Great places to startCase Study
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
39. @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