Write Once, Run Everywhere - Mobile+Web Devcon 2015

Ember.js is an opinionated web framework, that allows developers to focus less on boilerplate, and focus more on what makes their app unique. We'll go over some of the best practices of using Ember for cross-device development, and then build an app from a single codebase that produces a standalone desktop app, an in-browser web app and an iOS/Android app.

Along the way we'll cover:
* A high level overview of the Ember.js ecosystem, including build tools and "add-ons"
* Recent improvements to Ember's view layer, and the ramifications on mobile performance
* Best practices for tooling & build pipelines, to maintain your cross-device compatibility

Transcript

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 Media Queries Small Medium Large Any @MichaelLNorth NW.js
4. @MichaelLNorth //TODO The state of HTML5 Case Study Cross-Device Tech Ember.js & Friends
5. @MichaelLNorth Great places to start The state of HTML5 2007 2008 HTML5 Mobile Beginnings 2009-2010
6. @MichaelLNorth Great places to start The state of HTML5 2012
7. @MichaelLNorth Great places to start The 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 start The state of HTML5 It’s time to reconsider Newest iPhone Now Newest iPhone 2012 iPhone 6 iPhone 4s 1612 215 2015 7.5X
9. @MichaelLNorth Great places to start The state of HTML5
10. @MichaelLNorth Great places to start The state of HTML5
11. @MichaelLNorth Great places to start The state of HTML5
12. @MichaelLNorth Great places to start The 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
13. @MichaelLNorth Great places to start The state of HTML5 Shelf life of the web > Shelf life of native
14. @MichaelLNorth Great places to start The state of HTML5 Use cases we’ll focus on • Menus • 2D views • CRUD • Notifications, etc…
15. @MichaelLNorth //TODO The state of HTML5 Case Study Cross-Device Tech Ember.js and friends
16. @MichaelLNorth Great places to start Cross-Device Tech NW.js
17. @MichaelLNorth Great places to start Cross-Device Tech WebView Native App Application API XHR XHR WebView Method Your App
18. @MichaelLNorth Great places to start Cross-Device Tech image source: http://www.slideshare.net/hakimrie/phonegapcordova-vs-native-application
19. @MichaelLNorth Great places to start Cross-Device Tech NW.js image source: http://www.slideshare.net/Products123/nwjs-essentials-sample-chapter
20. @MichaelLNorth Great places to start Cross-Device Tech These are very similar abstractions OS HTML/JS/CSS “Web App” “Native” part of your app JS API to invoke native functionality
21. @MichaelLNorth Great places to start Cross-Device Tech
22. @MichaelLNorth Great places to start Cross-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
23. @MichaelLNorth //TODO The state of HTML5 Case Study Cross-Device Tech Ember.js and friends
24. @MichaelLNorth Great places to start Ember.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 start Ember.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 start Ember.js and friends What do people love about ? • Opinionated, and many of the opinions are worth considering
27. @MichaelLNorth Great places to start Ember.js and friends $  ember-­‐cli
28. @MichaelLNorth Great places to start Ember.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 start Ember.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
30. @MichaelLNorth Great places to start Ember.js and friends Ember addons http://emberaddons.com
31. @MichaelLNorth Great places to start Ember.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!
32. @MichaelLNorth //TODO The state of HTML5 Case Study Cross-Device Tech Ember.js and friends
33. @MichaelLNorth Great places to start Case Study
34. @MichaelLNorth Great places to start Case Study Start with URLs / /orgs or 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 start Case Study Start with URLs / /orgs /org/jquery /org/jquery/repos /org/jquery/repo/esprima index orgs org org.repos org.repo
36. @MichaelLNorth Great places to start Case Study Start with URLs
37. @MichaelLNorth Great places to start Case 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 start Case 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 start Case 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
40. @MichaelLNorth Great places to start Case Study Apply a responsive design
41. @MichaelLNorth Great places to start Case Study Bring in a material design framework $ ember install ember-cli-materialize
42. @MichaelLNorth Great places to start Case Study Time for hybridifying $ ember install ember-cli-cordova $ ember cordova:build $ ember serve
43. @MichaelLNorth Great places to start Case Study
44. @MichaelLNorth Great places to start Case Study Desktopification $ ember install ember-cli-cordova $ ember cordova:build $ ember serve
45. @MichaelLNorth Great places to start Case Study Desktopification "window": { "title": "Write once, run everywhere", "toolbar": false, "min_width": 601, "min_height": 200, "width": 960, "height": 600 },
46. @MichaelLNorth Great places to start Case Study
47. @MichaelLNorth //TODO Style Case Study Computed Properties Components
48. @MichaelLNorth @MichaelLNorth