Desktop Apps

with web technologies

Desktop Apps vs WebApps



or: Why Desktop Apps are not died-out yet.

When desktop apps do convince us:

  • Git-/SVN-Client
  • picture & video editing
  • offline
  • processing large amounts of data
  • low operating costs

... and when not:

  • updates
  • user experience
    • design
    • screen sizes
    • devices and operating systems
  • installation process

And what about web apps?

Build cross platform desktop apps with JavaScript, HTML, and CSS
  • JavaScript UI libraries (Angular, React)
  • responsive design frameworks
  • no latency while loading JS and CSS
  • file access via NodeJs core modules
  • native menues & notificatios
  • automatic updates
  • creation of installation packages
  • crash reporting
     

Examples


more at: https://electron.atom.io/apps/

minimal necessary dev setup

  • NodeJs Project
  • electron dependencies
  • initialization JavaScript file
  • initial HTML file
  • Github repository for distribution


see example code at: https://github.com/alxlchnr/electron-desktop-app

NodeJS package.json

            
              {
                "name": "electron-boilerplate",
                "version": "1.0.0",
                "main": "main.js",
                "description": "electron boilerplate for it-economics Conference Day",
                "author": "alxlchnr",
                "devDependencies": {
                  "electron": "1.6.14",
                  "electron-builder": "^19.34.1",
                  "electron-builder-squirrel-windows": "^19.34.0"
                },
                "dependencies": {
                  "electron-log": "^2.2.9",
                  "electron-updater": "^2.10.1"
                },
                "build": {
                  "appId": "your.app.id",
                  "publish": [
                    {
                      "provider": "github",
                      "owner": "YOUR_USERNAME",
                      "repo": "YOUR_REPOSITORY"
                    }
                  ],
                  "mac": {
                    "category": "your.app.category.type",
                    "target": "dmg"
                  },
                  "win": {
                    "target": "squirrel"
                  }
                },
                "scripts": {
                  "postinstall": "install-app-deps",
                  "start": "electron .",
                  "build": "build -m -w --x64",
                  "release": "build -m -w --x64 "
                }
              }

initialization code

            
              const {app, BrowserWindow} = require('electron');
              const {autoUpdater} = require("electron-updater");

              autoUpdater.on('update-downloaded', function () {
                  autoUpdater.quitAndInstall();
              });

              app.on('ready', function () {
                  let win = new BrowserWindow();
                  win.on('closed', function () {
                      win = null;
                  });
                  win.loadURL(`file://${__dirname}/index.html`);

                  autoUpdater.checkForUpdates();
              });

              app.on('window-all-closed', function () {
                  app.quit();
              });

add a frontend technology of your choice

i.e. Angular

challenges to overcome

  • usage of electron framework functionality in frontend code
  • some development tools are useless in the electron context
  • increased build complexity
  • system dependent NodeJS modules usually cannot be used in frontend build processes or browser runtime

points of critisism

  • slower than native desktop apps
  • high ressource consumption
  • no accessability features for users with special needs
  • demarcation between Chrome Apps and Electron Apps

Any Questions?