Browser Invasion: Desktop Apps and the Web

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!

Af7acd01448753af3dfd648c3f5ea287?s=128

timgthomas

May 10, 2018
Tweet

Transcript

  1. BROWSER INVASION DESKTOP APPS AND THE WEB @timgthomas

  2. !

  3. @timgthomas

  4. @timgthomas

  5. Vectra AI

  6. None
  7. ELECTRON

  8. None
  9. None
  10. User Experience Ease of Access APIs

  11. None
  12. None
  13. Ubiquity Extensibility Existing Skills*

  14. None
  15. ELECTRON

  16. ELECTRON

  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. $ ember init $ ember install ember-electron $ ember electron

  26. $ electron .

  27. demo

  28. ARCHITECTURE

  29. None
  30. None
  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

  38. None
  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

  44. None
  45. None
  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’ }, };
  50. None
  51. None
  52. None
  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