Write Once, Run Everywhere - Ember.js Munich
2 likes703 views
The document discusses building applications that can run everywhere using Ember.js and Electron. It introduces Electron and how it allows packaging Ember apps with Chromium for desktop distribution. It also covers using Ember addons to integrate Cordova and native device capabilities. The document demonstrates building a sample Ember app that uses routing, components and animations, and packaging it into a desktop app with Electron.
Write Once, Run Everywhere - Ember.js Munich
- 1. WRITE ONCE, RUN EVERYWHERE Mike North | Ember Munich #11 | Apr 21, 2016 LEVANTO FINANCIAL
- 7. What our users need us to build
- 8. 2
- 10. What weâre sometimes tempted to build
- 11. What our users need us to build
- 15. MOBILE WEB BEGINNINGS 2007 2008 2009-2010
- 16. 2012
- 18. A LOT HAS CHANGED SINCE 2012
- 19. SHELF LIFE
- 22. Click here for more! THEREâS ANOTHER REASON⌠108.2MB of Swift Click here to download the native app for this presentation!
- 24. A FIRST-CLASS MOBILE-WEB EXPERIENCE IS MORE IMPORTANTTHAN EVER! HOW CAN WE MAKE REACHING ALL OF THESE DIFFERENT DEVICES EASY?
- 25. 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
- 26. WHAT PEOPLE LOVE ABOUT ⢠Solid conventions ⢠Abstractions that scale ⢠Commitment to fwd compatibility ⢠Core team must work on real apps ⢠Addresses the âwhole problemâ
- 27. ADDRESSINGTHE WHOLE PROBLEM ⢠UI Framework ⢠Build tools ⢠Animations ⢠Talking to an API ⢠Virtualized Lists ⢠Plugin Architecture ⢠Modular Apps ⢠Ember Inspector
- 28. CORDOVA
- 31. 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âŚ
- 32. HOW DOYOU EMBERTHESETHINGS? $ ember install ember-electron $ ember install ember-cli-cordoba $ ember install ember-cli-materialize
- 33. HOW DOYOU EMBERTHESETHINGS? http://emberaddons.com
- 35. `
- 36. ROUTING
- 37. application index application posts post author comments index index index indexindex /URL:
- 38. application posts posts/index application posts post author comments index index index indexindex /posts/URL:
- 39. application post post/index application posts post author comments index index index indexindex /post/31URL:
- 40. application post application posts post author comments index index index indexindex {{outlet}} /post/31/comments/URL:
- 41. application post application posts post author comments index index index indexindex post/comments post/comments/index /post/31/comments/URL:
- 43. 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
- 44. AMA
- 45. COMPONENTS
- 47. 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}}
- 48. AMA
- 49. LIQUID FIRE
- 51. CORDOVA
- 53. ELECTRON
- 54. ELECTRON ember electron Start up your electron app using ember-cli dev server ember electron:package --platform=darwin Package your app to distribute
- 57. ember electron:package --platform=darwin --icon=/Users/northm/Downloads/pirate.png.hqx --overwrite Package your app to distribute ICONS
- 58. RIGHT-CLICK MENU ⢠An extra event on window: contextmenu ⢠We can import Electron using require
- 59. 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());
- 60. 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"); });
- 63. WHAT DOES ALLTHIS MEAN?
- 64. 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 === $$$$
- 65. THANKS!
- 66. RESOURCES emberconf-state-api.herokuapp.com/api/organizations OBJECTIVES Organizations > Repositories > Pulls > Comments Clickable Breadcrumb Navigation using ember-crumbly Animations using liquid-ďŹre, including an âexplodeâ from Organization to Repo http://mike.works/ember-materialize-v1-site/
- 67. RESOURCES http://emberconf-state-api.herokuapp.com/api/organizations OBJECTIVES Organizations > Repositories > Pulls > Comments Clickable Breadcrumb Navigation using ember-crumbly Animations using liquid-ďŹre, 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 [email protected] SLIDES: ⨠http://bit.ly/ember- munich-electron