AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

Ember.js-Write Once, Run Everywhere by Mike North@Yahoo

发布者 html5
发布于 1439254307540  浏览 3199 关键词 前端, 框架, HTML5, English 
分享到

第1页

Write Once,

Run Everywhere

Mike North Mobile+Web Devcon 2015

@MichaelLNorth github.com/truenorth



第2页

@MichaelLNorth



Hi



第3页

@MichaelLNorth

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



第5页

TGhreeasttaptlaecoesf HtoTsMtaLrt5

HTML5 Mobile Beginnings



@MichaelLNorth





2008 2009-2010



第6页

TGhreeasttaptlaecoesf HtoTsMtaLrt5



@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



第8页

TGhreeasttaptlaecoesf HtoTsMtaLrt5

Newest iPhone Now



iPhone 6 iPhone 4s



7.5X



It’s time to reconsider



Newest iPhone 2012





@MichaelLNorth



第9页

TGhreeasttaptlaecoesf HtoTsMtaLrt5

@MichaelLNorth



第10页

TGhreeasttaptlaecoesf HtoTsMtaLrt5

@MichaelLNorth



第11页

TGhreeasttaptlaecoesf HtoTsMtaLrt5

@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



第13页

TGhreeasttaptlaecoesf HtoTsMtaLrt5

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



第15页

//TODO



@MichaelLNorth



The state of HTML5 Cross-Device Tech Ember.js and friends Case Study



第16页

CGroresast-DpleavciecsetoTesctahrt



@MichaelLNorth



NW.js



第17页

CGroresast-DpleavciecsetoTesctahrt



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



第19页

CGroresast-DpleavciecsetoTesctahrt

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



第21页

CGroresast-DpleavciecsetoTesctahrt

@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



第23页

//TODO



@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



第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



第26页

EGmrebaetr.pjslacaensdtofrisetnardts



What do people love about



?



• Opinionated, and many of the opinions are worth considering



@MichaelLNorth



第27页

EGmrebaetr.pjslacaensdtofrisetnardts



@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



第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



第30页

EGmrebaetr.pjslacaensdtofrisetnardts

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



第32页

//TODO



@MichaelLNorth



The state of HTML5 Cross-Device Tech Ember.js and friends Case Study



第33页

CGarseeatSptluadceys to start

@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



第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



第36页

CGarseeatSptluadceys to start

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



第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



第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



第40页

CGarseeatSptluadceys to start

Apply a responsive design

@MichaelLNorth



第41页

CGarseeatSptluadceys to start

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



第43页

CGarseeatSptluadceys to start

@MichaelLNorth



第44页

CGarseeatSptluadceys to start

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



第46页

CGarseeatSptluadceys to start

@MichaelLNorth



第47页

//TODO

Style Computed Properties Components Case Study

@MichaelLNorth



第48页

@MichaelLNorth

@MichaelLNorth



支持文件格式:*.ppt, *.pptx, *.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。