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
   

   View Slide

2. !
   

   View Slide

3. @timgthomas
   

   View Slide

4. @timgthomas
   

   View Slide

5. Vectra AI
   

   View Slide

6. View Slide

7. ELECTRON
   

   View Slide

8. View Slide

9. View Slide

10. User Experience
    Ease of Access
    APIs
    

    View Slide

11. View Slide

12. View Slide

13. Ubiquity
    Extensibility
    Existing Skills*
    

    View Slide

14. View Slide

15. ELECTRON
    

    View Slide

16. ELECTRON
    

    View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. $ ember init
    $ ember install ember-electron
    $ ember electron
    

    View Slide

26. $ electron .
    

    View Slide

27. demo
    

    View Slide

28. ARCHITECTURE
    

    View Slide

29. View Slide

30. View Slide

31. API
    Client
    

    View Slide

32. Electron
    Client
    IPC
    

    View Slide

33. const { ipcMain } = require(‘electron’);____
    const { ipcRenderer } = require(‘electron’);
    

    View Slide

34. // Main
    const { ipcMain } = require(‘electron’);
    ipcMain.on(‘ember-request’, evt => {
    evt.sender.send(‘electron-reply’, ‘yay!’);
    });
    

    View Slide

35. // “Browser”
    const { ipcRenderer } = require(‘electron’);
    ipcRenderer.on(‘electron-reply’, reply => {
    console.log(‘reply received!’, reply);
    });
    ipcRenderer.send(‘ember-request’)
    

    View Slide

36. const { readdir } = require(‘fs’);
    ipcMain.on(‘get-files’, evt => {
    readdir(‘/foo’, (err, files) => {
    evt.sender.send(‘files’, files);
    });
    });
    

    View Slide

37. NATIVE-ISH
    

    View Slide

38. View Slide

39. NATIVE-ISH
    

    View Slide

40. Menu
    Notification
    TouchBar
    Tray
    

    View Slide

41. const { Menu } = require(‘electron’);
    const applicationMenu = Menu.buildFromTemplate([
    {
    label: ‘Edit’,
    submenu: [ /* ... */ ],
    }
    ]);
    Menu.setApplicationMenu(applicationMenu);
    

    View Slide

42. demo
    

    View Slide

43. DISTRIBUTION
    

    View Slide

44. View Slide

45. View Slide

46. $ electron-forge make
    $ ember electron:make
    

    View Slide

47. module.exports = {
    make_targets: {
    darwin: [
    ‘zip’,
    ],
    linux: [
    ‘deb’,
    ],
    },
    electronPackagerConfig: {
    appCopyright: ‘Copyright © 2018’,
    name: ‘’,
    icon: ‘ember-electron/resources/icon.icns’
    },
    };
    

    View Slide

48. module.exports = {
    make_targets: {
    darwin: [
    ‘zip’,
    ],
    linux: [
    ‘deb’,
    ],
    },
    electronPackagerConfig: {
    appCopyright: ‘Copyright © 2018’,
    name: ‘’,
    icon: ‘ember-electron/resources/icon.icns’
    },
    };
    

    View Slide

49. module.exports = {
    make_targets: {
    darwin: [
    ‘zip’,
    ],
    linux: [
    ‘deb’,
    ],
    },
    electronPackagerConfig: {
    appCopyright: ‘Copyright © 2018’,
    name: ‘’,
    icon: ‘ember-electron/resources/icon.icns’
    },
    };
    

    View Slide

50. View Slide

51. View Slide

52. View Slide

53. // ✓ Runs on macOS or Windows____
    // ✓ Public GitHub repo__________
    // ✓ Uses GitHub releases________
    // ✓ Has code-signed builds______
    require(‘update-electron-app')();
    

    View Slide

54. CONSIDERATIONS
    

    View Slide

55. App Layout
    Visual Style
    OS UX
    

    View Slide

56. demo
    

    View Slide

57. ELECTRON
    electronjs.org
    www.electronforge.io
    ember-electron.js.org
    

    View Slide

58. ELECTRON
    THANKS!
    @timgthomas
    

    View Slide