'

Using Ember for Cross-Device Development

Понравилась презентация – покажи это...





Слайд 0

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


Слайд 1

Hi @MichaelLNorth


Слайд 2

@MichaelLNorth Write once, run everywhere Media Queries Small Apache Cordova Medium Large NW.js Any @MichaelLNorth


Слайд 3

//TODO The state of HTML5 Cross-Device Tech Ember.js & Friends Case Study @MichaelLNorth


Слайд 4

The state of HTML5 Great places to start HTML5 Mobile Beginnings 2007 @MichaelLNorth 2008 2009-2010


Слайд 5

The state of HTML5 Great places to start 2012 @MichaelLNorth


Слайд 6

The state of HTML5 Great places to start 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


Слайд 7

The state of HTML5 Great places to start Newest iPhone Now iPhone 6 1612 iPhone 4s 215 7.5X It’s time to reconsider Newest iPhone 2012 2015 @MichaelLNorth


Слайд 8

The state of HTML5 Great places to start @MichaelLNorth


Слайд 9

The state of HTML5 Great places to start @MichaelLNorth


Слайд 10

The state of HTML5 Great places to start @MichaelLNorth


Слайд 11

The state of HTML5 Great places to start 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 @MichaelLNorth • • Layout Style


Слайд 12

The state of HTML5 Great places to start Shelf life of the web > Shelf life of native @MichaelLNorth


Слайд 13

The state of HTML5 Great places to start Use cases we’ll focus on • • • • Menus 2D views CRUD Notifications, etc… @MichaelLNorth


Слайд 14

//TODO The state of HTML5 Cross-Device Tech Ember.js and friends Case Study @MichaelLNorth


Слайд 15

Cross-Deviceto start Great places Tech NW.js @MichaelLNorth


Слайд 16

Cross-Deviceto start Great places Tech Your App XHR WebView Native App WebView Method XHR Application API @MichaelLNorth


Слайд 17

Cross-Deviceto start Great places Tech image source: http://www.slideshare.net/hakimrie/phonegapcordova-vs-native-application @MichaelLNorth


Слайд 18

Cross-Deviceto start Great places Tech NW.js image source: http://www.slideshare.net/Products123/nwjs-essentials-sample-chapter @MichaelLNorth


Слайд 19

Cross-Deviceto start Great places Tech These are very similar abstractions OS HTML/JS/CSS “Web App” JS API to invoke native functionality @MichaelLNorth “Native” part of your app


Слайд 20

Cross-Deviceto start Great places Tech @MichaelLNorth


Слайд 21

Cross-Deviceto start Great places Tech #PROTIP - Facade Design Pattern function sendNotification(title, message, icon) Desktop Native Mobile Native navigator.notification.alert() Default @MichaelLNorth node-growl OS X notification show in-app notification


Слайд 22

//TODO The state of HTML5 Cross-Device Tech Ember.js and friends Case Study @MichaelLNorth


Слайд 23

Ember.js andto start friends Great places What’s • • • • • all about? Data binding Convention over configuration Productivity-focused Started as a fork of Lots of great companies use it @MichaelLNorth


Слайд 24

Ember.js andto start friends Great places 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


Слайд 25

Ember.js andto start friends Great places What do people love about • ? Opinionated, and many of the opinions are worth considering @MichaelLNorth


Слайд 26

Ember.js andto start friends Great places $  ember-­‐cli @MichaelLNorth


Слайд 27

Ember.js andto start friends Great places 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


Слайд 28

Ember.js andto start friends Great places 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


Слайд 29

Ember.js andto start friends Great places Ember addons http://emberaddons.com @MichaelLNorth


Слайд 30

Ember.js andto start friends Great places 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


Слайд 31

//TODO The state of HTML5 Cross-Device Tech Ember.js and friends Case Study @MichaelLNorth


Слайд 32

Case Study to start Great places @MichaelLNorth


Слайд 33

Case Study to start Great places Start with URLs /orgs list of Github orgs /org/jquery info about the jQuery org / or /org/jquery/repos list of repos in the jQuery org /org/jquery/repo/esprima @MichaelLNorth info about esprima


Слайд 34

Case Study to start Great places Start with URLs index orgs org / /orgs /org/jquery org.repos /org/jquery/repos org.repo /org/jquery/repo/esprima @MichaelLNorth


Слайд 35

Case Study to start Great places Start with URLs @MichaelLNorth


Слайд 36

Case Study to start Great places Add some models ORG name avatar_url description url REPO name url stargazers watchers issues @MichaelLNorth org.show /org/jquery a.g.c/orgs/jquery org.show.repo.show /org/jquery/repo/esprima a.g.c/repos/jquery/esprima


Слайд 37

Case Study to start Great places Add some models ORG name avatar_url description url REPO name url stargazers watchers issues @MichaelLNorth org.show /org/jquery a.g.c/orgs/jquery org.show.repo.show /org/jquery/repo/esprima a.g.c/repos/jquery/esprima


Слайд 38

Case Study to start Great places 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


Слайд 39

Case Study to start Great places Apply a responsive design @MichaelLNorth


Слайд 40

Case Study to start Great places Bring in a material design framework $ ember install ember-cli-materialize @MichaelLNorth


Слайд 41

Case Study to start Great places Time for hybridifying $ ember install ember-cli-cordova $ ember cordova:build $ ember serve @MichaelLNorth


Слайд 42

Case Study to start Great places @MichaelLNorth


Слайд 43

Case Study to start Great places Desktopification $ ember install ember-cli-cordova $ ember cordova:build $ ember serve @MichaelLNorth


Слайд 44

Case Study to start Great places Desktopification "window": { "title": "Write once, run everywhere", "toolbar": false, "min_width": 601, "min_height": 200, "width": 960, "height": 600 }, @MichaelLNorth


Слайд 45

Case Study to start Great places @MichaelLNorth


Слайд 46

//TODO Style Computed Properties Components Case Study @MichaelLNorth


Слайд 47

@MichaelLNorth @MichaelLNorth


Слайд 48


×

HTML:





Ссылка: