Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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!

timgthomas

May 10, 2018
Tweet

More Decks by timgthomas

Other Decks in Programming

Transcript

  1. BROWSER INVASION
    DESKTOP APPS AND THE WEB
    @timgthomas

    View full-size slide

  2. User Experience
    Ease of Access
    APIs

    View full-size slide

  3. Ubiquity
    Extensibility
    Existing Skills*

    View full-size slide

  4. $ ember init
    $ ember install ember-electron
    $ ember electron

    View full-size slide

  5. $ electron .

    View full-size slide

  6. ARCHITECTURE

    View full-size slide

  7. Electron
    Client
    IPC

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. Menu
    Notification
    TouchBar
    Tray

    View full-size slide

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

    View full-size slide

  14. DISTRIBUTION

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. CONSIDERATIONS

    View full-size slide

  21. App Layout
    Visual Style
    OS UX

    View full-size slide

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

    View full-size slide

  23. ELECTRON
    THANKS!
    @timgthomas

    View full-size slide