加收藏
Ember.js-Write Once, Run Everywhere by Mike North@Yahoo
第1页
Write Once,
Run Everywhere
Mike North Mobile+Web Devcon 2015
@MichaelLNorth github.com/truenorth
Run Everywhere
Mike North Mobile+Web Devcon 2015
@MichaelLNorth github.com/truenorth
第2页
@MichaelLNorth
Hi
Hi
第3页
@MichaelLNorth
Write once, run everywhere
Apache Cordova NW.js
@MichaelLNorth
Media Queries Small
Medium Large
Any
Write once, run everywhere
Apache Cordova NW.js
@MichaelLNorth
Media Queries Small
Medium Large
Any
第4页
//TODO
@MichaelLNorth
The state of HTML5 Cross-Device Tech Ember.js & Friends Case Study
@MichaelLNorth
The state of HTML5 Cross-Device Tech Ember.js & Friends Case Study
第5页
TGhreeasttaptlaecoesf HtoTsMtaLrt5
HTML5 Mobile Beginnings
@MichaelLNorth
2008 2009-2010
HTML5 Mobile Beginnings
@MichaelLNorth
2008 2009-2010
第6页
TGhreeasttaptlaecoesf HtoTsMtaLrt5
@MichaelLNorth
@MichaelLNorth
第7页
TGhreeasttaptlaecoesf HtoTsMtaLrt5
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
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
第8页
TGhreeasttaptlaecoesf HtoTsMtaLrt5
Newest iPhone Now
iPhone 6 iPhone 4s
7.5X
It’s time to reconsider
Newest iPhone 2012
@MichaelLNorth
Newest iPhone Now
iPhone 6 iPhone 4s
7.5X
It’s time to reconsider
Newest iPhone 2012
@MichaelLNorth
第9页
TGhreeasttaptlaecoesf HtoTsMtaLrt5
@MichaelLNorth
@MichaelLNorth
第10页
TGhreeasttaptlaecoesf HtoTsMtaLrt5
@MichaelLNorth
@MichaelLNorth
第11页
TGhreeasttaptlaecoesf HtoTsMtaLrt5
@MichaelLNorth
@MichaelLNorth
第12页
TGhreeasttaptlaecoesf HtoTsMtaLrt5
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
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
第13页
TGhreeasttaptlaecoesf HtoTsMtaLrt5
Shelf life of the web > Shelf life of native
@MichaelLNorth
Shelf life of the web > Shelf life of native
@MichaelLNorth
第14页
TGhreeasttaptlaecoesf HtoTsMtaLrt5
Use cases we’ll focus on
• Menus • 2D views • CRUD • Notifications,
etc…
@MichaelLNorth
Use cases we’ll focus on
• Menus • 2D views • CRUD • Notifications,
etc…
@MichaelLNorth
第15页
//TODO
@MichaelLNorth
The state of HTML5 Cross-Device Tech Ember.js and friends Case Study
@MichaelLNorth
The state of HTML5 Cross-Device Tech Ember.js and friends Case Study
第16页
CGroresast-DpleavciecsetoTesctahrt
@MichaelLNorth
NW.js
@MichaelLNorth
NW.js
第17页
CGroresast-DpleavciecsetoTesctahrt
Your App
WebView
XHR
Native App
WebView Method
XHR
Application API
@MichaelLNorth
Your App
WebView
XHR
Native App
WebView Method
XHR
Application API
@MichaelLNorth
第18页
CGroresast-DpleavciecsetoTesctahrt
image source: http://www.slideshare.net/hakimrie/phonegapcordova-vs-native-application @MichaelLNorth
image source: http://www.slideshare.net/hakimrie/phonegapcordova-vs-native-application @MichaelLNorth
第19页
CGroresast-DpleavciecsetoTesctahrt
NW.js
image source: http://www.slideshare.net/Products123/nwjs-essentials-sample-chapter @MichaelLNorth
NW.js
image source: http://www.slideshare.net/Products123/nwjs-essentials-sample-chapter @MichaelLNorth
第20页
CGroresast-DpleavciecsetoTesctahrt
These are very similar abstractions
HTML/JS/CSS “Web App”
OS
“Native” part of your app
@MichaelLNorth
JS API to invoke native functionality
These are very similar abstractions
HTML/JS/CSS “Web App”
OS
“Native” part of your app
@MichaelLNorth
JS API to invoke native functionality
第21页
CGroresast-DpleavciecsetoTesctahrt
@MichaelLNorth
@MichaelLNorth
第22页
CGroresast-DpleavciecsetoTesctahrt
#PROTIP - Facade Design Pattern
function sendNotification(title, message, icon)
Desktop Native
Mobile Native
Default
@MichaelLNorth
node-growl OS X notification navigator.notification.alert() show in-app notification
#PROTIP - Facade Design Pattern
function sendNotification(title, message, icon)
Desktop Native
Mobile Native
Default
@MichaelLNorth
node-growl OS X notification navigator.notification.alert() show in-app notification
第23页
//TODO
@MichaelLNorth
The state of HTML5 Cross-Device Tech Ember.js and friends Case Study
@MichaelLNorth
The state of HTML5 Cross-Device Tech Ember.js and friends Case Study
第24页
EGmrebaetr.pjslacaensdtofrisetnardts
What’s
all about?
• Data binding • Convention over
configuration • Productivity-focused • Started as a fork of • Lots of great
companies use it
@MichaelLNorth
What’s
all about?
• Data binding • Convention over
configuration • Productivity-focused • Started as a fork of • Lots of great
companies use it
@MichaelLNorth
第25页
EGmrebaetr.pjslacaensdtofrisetnardts
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
?
• 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
第26页
EGmrebaetr.pjslacaensdtofrisetnardts
What do people love about
?
• Opinionated, and many of the opinions are worth considering
@MichaelLNorth
What do people love about
?
• Opinionated, and many of the opinions are worth considering
@MichaelLNorth
第27页
EGmrebaetr.pjslacaensdtofrisetnardts
@MichaelLNorth
$
ember-‐cli
@MichaelLNorth
$
ember-‐cli
第28页
EGmrebaetr.pjslacaensdtofrisetnardts
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-cli: what can it do?
• Dependency management and setup • Code generation • Asset pipeline • Development web server • Mock http endpoints • API proxy • And more…
@MichaelLNorth
第29页
EGmrebaetr.pjslacaensdtofrisetnardts
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
• 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
第30页
EGmrebaetr.pjslacaensdtofrisetnardts
Ember addons
http://emberaddons.com
@MichaelLNorth
Ember addons
http://emberaddons.com
@MichaelLNorth
第31页
EGmrebaetr.pjslacaensdtofrisetnardts
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
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
第32页
//TODO
@MichaelLNorth
The state of HTML5 Cross-Device Tech Ember.js and friends Case Study
@MichaelLNorth
The state of HTML5 Cross-Device Tech Ember.js and friends Case Study
第33页
CGarseeatSptluadceys to start
@MichaelLNorth
@MichaelLNorth
第34页
CGarseeatSptluadceys to start
Start with URLs
/ or /orgs /org/jquery
list of Github orgs 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
/ or /orgs /org/jquery
list of Github orgs info about the jQuery org
/org/jquery/repos list of repos in the jQuery org
/org/jquery/repo/esprima info about esprima
@MichaelLNorth
第35页
CGarseeatSptluadceys to start
Start with URLs
index / orgs /orgs org /org/jquery org.repos /org/jquery/repos org.repo /org/jquery/repo/esprima
@MichaelLNorth
Start with URLs
index / orgs /orgs org /org/jquery org.repos /org/jquery/repos org.repo /org/jquery/repo/esprima
@MichaelLNorth
第36页
CGarseeatSptluadceys to start
Start with URLs
@MichaelLNorth
Start with URLs
@MichaelLNorth
第37页
CGarseeatSptluadceys to start
Add some models
ORG name avatar_url description url
org.show /org/jquery
a.g.c/orgs/jquery
REPO name url stargazers watchers issues
org.show.repo.show /org/jquery/repo/esprima
a.g.c/repos/jquery/esprima
@MichaelLNorth
Add some models
ORG name avatar_url description url
org.show /org/jquery
a.g.c/orgs/jquery
REPO name url stargazers watchers issues
org.show.repo.show /org/jquery/repo/esprima
a.g.c/repos/jquery/esprima
@MichaelLNorth
第38页
CGarseeatSptluadceys to start
Add some models
ORG name avatar_url description url
org.show /org/jquery
a.g.c/orgs/jquery
REPO name url stargazers watchers issues
org.show.repo.show /org/jquery/repo/esprima
a.g.c/repos/jquery/esprima
@MichaelLNorth
Add some models
ORG name avatar_url description url
org.show /org/jquery
a.g.c/orgs/jquery
REPO name url stargazers watchers issues
org.show.repo.show /org/jquery/repo/esprima
a.g.c/repos/jquery/esprima
@MichaelLNorth
第39页
CGarseeatSptluadceys to start
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
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
第40页
CGarseeatSptluadceys to start
Apply a responsive design
@MichaelLNorth
Apply a responsive design
@MichaelLNorth
第41页
CGarseeatSptluadceys to start
Bring in a material design framework
$ ember install ember-cli-materialize
@MichaelLNorth
Bring in a material design framework
$ ember install ember-cli-materialize
@MichaelLNorth
第42页
CGarseeatSptluadceys to start
Time for hybridifying
$ ember install ember-cli-cordova $ ember cordova:build $ ember serve
@MichaelLNorth
Time for hybridifying
$ ember install ember-cli-cordova $ ember cordova:build $ ember serve
@MichaelLNorth
第43页
CGarseeatSptluadceys to start
@MichaelLNorth
@MichaelLNorth
第44页
CGarseeatSptluadceys to start
Desktopification
$ ember install ember-cli-cordova $ ember cordova:build $ ember serve
@MichaelLNorth
Desktopification
$ ember install ember-cli-cordova $ ember cordova:build $ ember serve
@MichaelLNorth
第45页
CGarseeatSptluadceys to start
Desktopification
"window": { "title": "Write once, run everywhere", "toolbar": false, "min_width": 601, "min_height": 200, "width": 960, "height": 600
},
@MichaelLNorth
Desktopification
"window": { "title": "Write once, run everywhere", "toolbar": false, "min_width": 601, "min_height": 200, "width": 960, "height": 600
},
@MichaelLNorth
第46页
CGarseeatSptluadceys to start
@MichaelLNorth
@MichaelLNorth
第47页
//TODO
Style Computed Properties Components Case Study
@MichaelLNorth
Style Computed Properties Components Case Study
@MichaelLNorth
第48页
@MichaelLNorth
@MichaelLNorth
@MichaelLNorth