Building Desktop Apps with Ember and Node-Webkit

Ember SF Meetup - April 29, 2014

Source code used in the demos will be published at blog.nitrous.io soon, please follow @NitrousIO on Twitter for updates.

Transcript

1. Building Desktop Apps with and node-webkit Ember SF Meetup - April 29, 2014
2. PeterJihoon Kim Co-founder & CTO at NITROUS.IO @raingrove
3. Demo:
 Nitrous.IO and
 Nitrous Desktop
4. Desktop Apps
5. Responsive
6. Convenient
7. Works Offline
8. Platform Features
10. is awesome
12. App.UiSwitchComponent = Ember.Component.extend({ classNames: ['ui-switch'], classNameBindings: ['enabled:on'], enabled: false, ! click: function() { this.toggleProperty('enabled'); } }); {{ui-switch enabled=enabled}}
13. Demo:
 Building a Custom UI Component with Ember
14. a framework for creating ambitious web applications
15. a framework for creating ambitious web applications *html5 runtime required
16. 
17. Chromium
19. node-webkit
20. 
22. Demo:
 Ember Starter Kit
 in node-webkit
23. node-webkit Overview
24. var gui = require('nw.gui'); GUI module
25.  MyApp 7:40 PM File Edit gui.Menu gui.Tray gui.Window gui.App gui.Clipboard gui.Shell
26. File Dialog <input id="open-file" type="file"> $('#open-file').click(); $('#open-file').val();
27. <input type="file"> <input type=“file" nwdirectory> <input type=“file" nwsaveas>
28. App.UiFileDialogComponent = Ember.Component.extend({ classNames: ['ui-file-dialog'], tagName: 'input', attributeBindings: [ 'type', 'accept', 'style', 'directory:nwdirectory', 'save:nwsaveas' ], type: 'file', style: 'display: none', ! value: '', accept: null, directory: false, save: false, ! open: function() { this.$().click(); }, ! change: function() { this.set('value', this.$().val()); } });
29. {{ui-file-dialog id="open-file" value=fileToOpen}}
30. Demo:
 File Dialog
31. Persisting State html5 local storage Web SQL IndexedDB node fs module
32. Debugging Dev Tools Refresh var gui = require('nw.gui'), win = gui.Window.get(); ! $('#debug .refresh').click(function() { win.reloadIgnoringCache(); }); ! $('#debug .devtools').click(function() { win.showDevTools(); });
33. Testing Run Tests $('#debug .run-tests').click(function() { gui.Window.open(location.href + '?test', { toolbar: true }); });
34. On/Offline Detection MyDesktopApp = Ember.Application.extend({ online: navigator.onLine, offline: Em.computed.not('online') }); ! App = MyDesktopApp.create(); ! $(window).on('online offline', function() { App.set('online', navigator.onLine); }); {{#if App.offline}} No Internet Connection? :-( {{else}} Yay! {{/if}}
35. Platform Detection var os = require('os'); ! MyDesktopApp = Ember.Application.extend({ platform: { isWindows: os.type() == 'Windows_NT', isMac: os.type() == 'Darwin', isLinux: os.type() == 'Linux' } });
 ! App = MyDesktopApp.create(); {{#if App.platform.isMac}} Hi, I am a Mac. {{else}}{{#if App.platform.isWindows}} I am a PC. {{/if}}{{/if}}
36. Window Reuse App.SignInRoute App.MainRoute
37. var win = require('nw.gui').Window.get(); ! App.SignInRoute = Em.Route.extend({ deactivate: function() { win.hide(); } }); ! App.MainRoute = Em.Route.extend({ activate: function() { win.resizeTo(1000, 500); win.moveTo(...); win.show(); } });
38. Packaging
39. Mac or folder containing
 app code named ‘app.nw’ zip archive containing
 app code named ‘app.nw’
40. Windows or place a folder containing
 app code named ‘package.nw’ place a zip archive containing
 app code named ‘package.nw’ copy /b nw.exe+package.nw myapp.exe optional
41. Thanks & We’re hiring! www.nitrous.io/jobs
42. PeterJihoon Kim pete@nitrous.io @raingrove @NitrousIO