Browser Invasion: Desktop Apps and the Web

The web’s biggest strength is that it’s universal: build a web site, and anyone with a browser and connection can access it. Desktop apps, however, have long been off-limits to web developers…but times change. Today, more and more apps are built with web technologies, and the benefits are many. In this session, you’ll learn how to use the tools and languages you already know to build rich, fully-featured desktop apps, and conquer a new galaxy of apps!

Transcript

1. BROWSER INVASION DESKTOP APPS AND THE WEB @timgthomas
2. !
3. @timgthomas
4. @timgthomas
5. Vectra AI
7. ELECTRON
10. User Experience Ease of Access APIs
13. Ubiquity Extensibility Existing Skills*
15. ELECTRON
16. ELECTRON
25. $ ember init $ ember install ember-electron $ ember electron
26. $ electron .
27. demo
28. ARCHITECTURE
31. API Client
32. Electron Client IPC
33. const { ipcMain } = require(‘electron’);____ const { ipcRenderer } = require(‘electron’);
34. // Main const { ipcMain } = require(‘electron’); ipcMain.on(‘ember-request’, evt => { evt.sender.send(‘electron-reply’, ‘yay!’); });
35. // “Browser” const { ipcRenderer } = require(‘electron’); ipcRenderer.on(‘electron-reply’, reply => { console.log(‘reply received!’, reply); }); ipcRenderer.send(‘ember-request’)
36. const { readdir } = require(‘fs’); ipcMain.on(‘get-files’, evt => { readdir(‘/foo’, (err, files) => { evt.sender.send(‘files’, files); }); });
37. NATIVE-ISH
39. NATIVE-ISH
40. Menu Notification TouchBar Tray
41. const { Menu } = require(‘electron’); const applicationMenu = Menu.buildFromTemplate([ { label: ‘Edit’, submenu: [ /* ... */ ], } ]); Menu.setApplicationMenu(applicationMenu);
42. demo
43. DISTRIBUTION
46. $ electron-forge make $ ember electron:make
47. module.exports = { make_targets: { darwin: [ ‘zip’, ], linux: [ ‘deb’, ], }, electronPackagerConfig: { appCopyright: ‘Copyright © 2018’, name: ‘<%= productName %>’, icon: ‘ember-electron/resources/icon.icns’ }, };
48. module.exports = { make_targets: { darwin: [ ‘zip’, ], linux: [ ‘deb’, ], }, electronPackagerConfig: { appCopyright: ‘Copyright © 2018’, name: ‘<%= productName %>’, icon: ‘ember-electron/resources/icon.icns’ }, };
49. module.exports = { make_targets: { darwin: [ ‘zip’, ], linux: [ ‘deb’, ], }, electronPackagerConfig: { appCopyright: ‘Copyright © 2018’, name: ‘<%= productName %>’, icon: ‘ember-electron/resources/icon.icns’ }, };
53. // ✓ Runs on macOS or Windows____ // ✓ Public GitHub repo__________ // ✓ Uses GitHub releases________ // ✓ Has code-signed builds______ require(‘update-electron-app')();
54. CONSIDERATIONS
55. App Layout Visual Style OS UX
56. demo
57. ELECTRON electronjs.org www.electronforge.io ember-electron.js.org
58. ELECTRON THANKS! @timgthomas