Build Better Desktop Apps With Ember

Build Better Desktop Apps With Ember

Talk from Wicked Good Ember 2015.

Abstract:

Ember.js describes itself as a framework for creating ambitious web applications. But “ambitious” doesn’t have to stop at the boundaries of the web world.

Projects such as NW.js have shown that it was possible to write cross-platform desktop applications using web technologies. NW.js goes even further, letting you interact with Node modules directly in the browser. But here’s the catch: without proper guards and good code organization, issues can arise quickly, leaving you fighting your way through an environment where Node and browser contexts don’t always play well together.

In this talk, we will explore some of the challenges you may face, and how you can overcome them with simple tools and techniques. You don’t have to look very far for answers. Ember and Ember CLI provide just the right hooks to make desktop applications a breeze to develop and test.

Wicked Good Ember: http://wickedgoodember.com
DockYard: https://dockyard.com/

48c14a3bb73c1cd19478d62991c659b9?s=128

Estelle DeBlois

June 16, 2015
Tweet

Transcript

  1. Build Better Desktop Apps With Ember

  2. @brzpegasus @edeblois Estelle DeBlois

  3. None
  4. Wicked Good Ember 2014

  5. Wicked Good Ember 2014

  6. Wicked Good Ember 2014

  7. DockYard

  8. Web Mobile Desktop

  9. A Look at Desktop Apps Ember for the Desktop Development

    Testing Packaging
  10. A Look at Desktop Apps Ember for the Desktop Development

    Testing Packaging
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. NW.js (node-webkit)

  18. Chromium + Node.js

  19. Chromium + Node.js + Native UI

  20. DEMO 1/5

  21. Got Views?

  22. Got Routes?

  23. Got Models?

  24. Got State?

  25. None
  26. A Look at Desktop Apps Ember for the Desktop Development

    Testing Packaging
  27. nw-demo/
 —— app/
 —— bower_components/
 —— config/
 —— dist/
 ——

    node_modules/
 —— public/
 —— tests/
 —— vendor/
 —— bower.json
 —— Brocfile.js
 —— package.json ember new nw-demo
  28. nw-demo/
 —— app/
 —— bower_components/
 —— config/
 —— dist/
 ——

    node_modules/nw/
 —— public/
 —— tests/
 —— vendor/
 —— bower.json
 —— Brocfile.js
 —— package.json npm install —-save-dev nw
  29. nw-demo/
 —— app/
 —— bower_components/
 —— config/
 —— dist/
 ——

    node_modules/nw/
 —— public/
 —— tests/
 —— vendor/
 —— bower.json
 —— Brocfile.js
 —— package.json { “main”: “dist/index.html” }
  30. nw-demo/
 —— app/
 —— bower_components/
 —— config/environment.js
 —— dist/
 ——

    node_modules/nw/
 —— public/
 —— tests/
 —— vendor/
 —— bower.json
 —— Brocfile.js
 —— package.json ENV.locationType = ‘hash’;
  31. $ ember build --watch $ nw

  32. None
  33. Could not find module nw.gui

  34. window.require function require(name) {
 if (name === ‘nw.gui’) {
 return

    nwDispatcher.requireNwGui();
 } else {
 return global.require(name);
 }
 } (NW.js)
  35. window.require function require(name) {
 // load modules transpiled from ES2015

    to AMD
 } (loader.js)
  36. window.require window.require = function() { try { return requireAMD.apply(null, arguments);

    } catch () { return requireNode.apply(null, arguments); } }; (your own)
  37. brzpegasus/
 ember-cli-node-webkit

  38. DEMO 2/5

  39. NW.js Ember Meets NW.js Development Testing Packaging

  40. None
  41. Ember Inspector

  42. Detect the environment.

  43. app/nw/environment.js const nw = window.nwDispatcher; export default { isNW: typeof

    nw !== 'undefined' };
  44. app/nw/menu-bar.js import env from ‘./environment’; export default Ember.Object.extend({ createMenuBar: on(‘init’,

    function() { if (!env.isNW) { return; } // ... }) });
  45. Handling menu events.

  46. const fileMenu = new gui.MenuItem({ label: ‘Save’, key: ’s’, modifiers:

    env.ctrlKey, click() { // ... } }); app/nw/menu.js
  47. const fileMenu = new gui.MenuItem({ label: ‘Save’, key: ’s’, modifiers:

    env.ctrlKey, click() { this.sendAction(‘fileSave’); } }); app/nw/menu.js
  48. const fileMenu = new gui.MenuItem({ label: ‘Save’, key: ’s’, modifiers:

    env.ctrlKey, click() { this.sendAction(‘fileSave’); } }); app/nw/menu.js
  49. Ember.Evented trigger() / on() / off()

  50. trigger() / on() / off() Ember.Service.extend(Ember.Evented)

  51. const fileMenu = new gui.MenuItem({ label: ‘Save’, key: ’s’, modifiers:

    env.ctrlKey, click() { get(this, ‘nw’).trigger(‘fileSave’); } }); app/nw/menu.js
  52. setup: on(‘init’, function() { const nw = get(this, ‘nw’);
 nw.on(‘fileSave’,

    this, ‘doSomething’); }), doSomething() { // ... } app/components/document-pane.js
  53. setup: on(‘init’, function() {
 // Set up handlers from `menuEvents`

    }), menuEvents: { fileSave() { }, fileOpen() { } } app/components/document-pane.js
  54. DEMO 3/5

  55. NW.js Ember Meets NW.js Development Testing Packaging

  56. app/adapter/document.js export default DS.Adapter.extend({ find(store, type, id, snapshot) { const

    fs = require(‘fs’); const path = require(‘path’); const wrench = require(‘wrench’); // ... } });
  57. app/adapter/document.js export default DS.Adapter.extend({ fileService: inject.service(‘file’), find(store, type, id, snapshot)

    { const fs = require(‘fs’); const path = require(‘path’); const wrench = require(‘wrench’); // ... } });
  58. {
 “main”: “dist/index.html”,
 “node-main”: “dist/index.js”
 }

  59. {
 “main”: “dist/index.html”,
 “node-main”: “dist/index.js”
 } // dist/index.js module.exports =

    { fileService: require(‘./lib/file’) };
  60. export default Ember.Service.extend({ main: get(window, ‘process.mainModule.exports’), fileService:
 computed.alias(‘main.fileService’) }; app/services/nw.js

  61. Steven Edouard
 @sedouard

  62. http://azure-storage.github.io/xplat/

  63. ember nw:test

  64. • Configure Testem to launch NW.js. • Log test results

    to process output stream. • Terminate NW.js when all tests have run. ember nw:test
  65. ember nw:test —-server • Configure Testem to launch NW.js. •

    Open a web socket connection to Testem’s server. • Transmit test results to be displayed in the terminal.
  66. DEMO 4/5

  67. NW.js Ember Meets NW.js Development Testing Packaging

  68. nw-demo/
 |_ app/
 |_ bower_components/
 |_ config/
 |_ dist/*
 |_

    node_modules/*
 |_ public/
 |_ tests/
 |_ vendor/
 |_ bower.json
 |_ Brocfile.js
 |_ package.json app.nw
  69. app.nw

  70. app.nw + NW =

  71. app.nw + nw.exe = app.exe + DLLs

  72. nwjs.app/Contents/Resources/app.nw

  73. mllrsohn/
 node-webkit-builder

  74. ember-cli—node-webkit

  75. ember nw:package

  76. DEMO 5/5

  77. NW.js Ember Meets NW.js Development Testing Packaging

  78. Desktop Apps in the Wild

  79. Internal Applications

  80. None
  81. A New Way to Distribute Software

  82. We’re Hiring!

  83. That’s all, Folks! Made with Love by @rwjblue’s wife Cupcakes

    specially ordered by @sugarpirate_… and you can’t have any!