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/

Transcript

1. Build Better Desktop Apps With Ember
2. @brzpegasus @edeblois Estelle DeBlois
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
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?
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
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
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
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!