Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Write Once, Run Everywhere - Ember.js Munich

499 views

Published on

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, introduce Cordova and NW.js, and then discuss modular design, testing, encapsulation of native functionality in the context of an open source case study project.

Published in: Technology
  • Be the first to comment

Write Once, Run Everywhere - Ember.js Munich

  1. 1. WRITE ONCE, RUN EVERYWHERE Mike North | Ember Munich #11 | Apr 21, 2016 LEVANTO FINANCIAL
  2. 2. http://bit.ly/ember-munich-electron
  3. 3. What our users need us to build
  4. 4. 2
  5. 5. What we’re sometimes tempted to build
  6. 6. What our users need us to build
  7. 7. Apache Cordova Media Queries Small Medium Large Any Electron
  8. 8. MOBILE WEB BEGINNINGS 2007 2008 2009-2010
  9. 9. 2012
  10. 10. A LOT HAS CHANGED SINCE 2012
  11. 11. SHELF LIFE
  12. 12. TIMETOTAKE ANOTHER LOOK
  13. 13. Click here for more! THERE’S ANOTHER REASON… 108.2MB of Swift Click here to download the native app for this presentation!
  14. 14. A FIRST-CLASS MOBILE-WEB EXPERIENCE IS MORE IMPORTANTTHAN EVER! HOW CAN WE MAKE REACHING ALL OF THESE DIFFERENT DEVICES EASY?
  15. 15. EMBER.JS • Opinionated framework, aligned with web standards • Focus on productivity • “SDK for the web” • Focus on your app, not on debates over build tools and module loaders
  16. 16. WHAT PEOPLE LOVE ABOUT • Solid conventions • Abstractions that scale • Commitment to fwd compatibility • Core team must work on real apps • Addresses the “whole problem”
  17. 17. ADDRESSINGTHE WHOLE PROBLEM • UI Framework • Build tools • Animations • Talking to an API • Virtualized Lists • Plugin Architecture • Modular Apps • Ember Inspector
  18. 18. CORDOVA
  19. 19. WebView Native App Application API XHR XHR WebVie w
  20. 20. ELECTRON / NW.JS • Node.js libs available alongside your usual UI libs • Packages your app with its own Chromium shell • Lots of native functionality (menu bar, right click menu, etc…) available • Distribute your app as a .exe, .app, etc…
  21. 21. HOW DOYOU EMBERTHESETHINGS? $ ember install ember-electron $ ember install ember-cli-cordoba $ ember install ember-cli-materialize
  22. 22. HOW DOYOU EMBERTHESETHINGS? http://emberaddons.com
  23. 23. LET’S BUILD SOMETHING!
  24. 24. `
  25. 25. ROUTING
  26. 26. application index application posts post author comments index index index indexindex /URL:
  27. 27. application posts posts/index application posts post author comments index index index indexindex /posts/URL:
  28. 28. application post post/index application posts post author comments index index index indexindex /post/31URL:
  29. 29. application post application posts post author comments index index index indexindex {{outlet}} /post/31/comments/URL:
  30. 30. application post application posts post author comments index index index indexindex post/comments post/comments/index /post/31/comments/URL:
  31. 31. CREATE SOME ROUTES / /org/123/repos /org/123/repo/456
  32. 32. activate () Called when router enters the route beforeModel (transition) First entry validation hook model (params, transition) Convert URL to a model afterModel (modelObj, transition) Called after model is resolved redirect (modelObj, transition) Similar to afterModel setupController (controller, model) Setup the controller for the current route renderTemplate (controller, model) Render the template for the current route deactivate () Called when router leaves route Promise Aware ROUTE HOOKS
  33. 33. AMA
  34. 34. COMPONENTS
  35. 35. LIST OF ORGS {{#md-card title='Organizations' as |c|}} {{#c.content}} {{#md-collection as |c|}} {{#each model as |org|}} {{#c.link-to 'org.repos' org.id class='avatar'}} <img src={{org.iconUrl}} alt="" class='circle'> <span class="title">{{org.name}}</span> {{/c.link-to}} {{/each}} {{/md-collection}} {{/c.content}} {{/md-card}}
  36. 36. AMA
  37. 37. LIQUID FIRE
  38. 38. export default function(){ this.transition( this.fromRoute('index'), this.toRoute('org'), this.use('toLeft'), this.reverse('toRight') ); this.transition( this.fromRoute('org.repos'), this.toRoute('org.repo'), this.use('toLeft'), this.reverse('toRight') ); }
  39. 39. CORDOVA
  40. 40. ELECTRON
  41. 41. ELECTRON ember electron Start up your electron app using ember-cli dev server ember electron:package --platform=darwin Package your app to distribute
  42. 42. ICONS https://iconverticons.com/online/
  43. 43. ICONS @sugarpirate_
  44. 44. ember electron:package --platform=darwin --icon=/Users/northm/Downloads/pirate.png.hqx --overwrite Package your app to distribute ICONS
  45. 45. RIGHT-CLICK MENU • An extra event on window: contextmenu • We can import Electron using require
  46. 46. const remote = require('electron').remote; const Menu = remote.Menu; const MenuItem = remote.MenuItem; const menu = new Menu(); menu.append(new MenuItem({ label: 'MenuItem1', click() { Ember.run.next(() => { console.log('item 1 clicked'); }); } })); menu.popup(remote.getCurrentWindow());
  47. 47. OPEN A NEW BROWSER WINDOW const BrowserWindow = require('electron').remote.BrowserWindow; let win = new BrowserWindow({ width: 800, height: 600, show: false }); win.on('closed', function() { console.log("window was closed"); });
  48. 48. APP ICON BADGES require('electron').remote.app.dock .setBadge('123'); require('electron').remote.app.dock .bounce(‘critical’); BOUNCINGTHE ICON
  49. 49. …AND WAY MORE… https://github.com/electron/electron/tree/master/docs/api
  50. 50. WHAT DOES ALLTHIS MEAN?
  51. 51. WHAT DOES ALLTHIS MEAN? Browsers are evolving from being document views to app platforms Building for the web is more important than ever Ember aims to make leveraging third party code and plugins easy Maximizing focus on what makes your app special === $$$$
  52. 52. THANKS!
  53. 53. RESOURCES emberconf-state-api.herokuapp.com/api/organizations OBJECTIVES Organizations > Repositories > Pulls > Comments Clickable Breadcrumb Navigation using ember-crumbly Animations using liquid-fire, including an “explode” from Organization to Repo http://mike.works/ember-materialize-v1-site/
  54. 54. RESOURCES http://emberconf-state-api.herokuapp.com/api/organizations OBJECTIVES Organizations > Repositories > Pulls > Comments Clickable Breadcrumb Navigation using ember-crumbly Animations using liquid-fire, including an “explode” from Organization to Repo http://mike.works/ember-materialize-v1-site/ KICK OFF ember new anyember cd anyember ember install ember-cli-materialize@mike-north/ember-cli-materialize#v1 ember install liquid-fire ember install ember-electron ssh ember@172.30.124.136 SLIDES: 
 http://bit.ly/ember- munich-electron

×