Beyond The Browser:

From Web to Desktop

Pratish Shrestha

Sr. Software Engineer

Frontend

Backend

DevOps

Electron JS

+

Slack

Slack

VSCode

Discord

What we've been using

Desktop App using Web Technologies

We ❤️ React

Type Safety

Local offline Database

Desktop Application

1. URLs and Routing

http://localhost:3000

/contact-us

/users/1/edit

/about

file://path/to/app/index.html

Development

Production

/users/1/edit

file://path/to/app/index.html

 /#/users/1/edit

Use Hash based router

<HashRouter/>

2. Copy and Paste

does not work on Mac

if (process.platform === 'darwin') {
    // Mac shortcuts
    Menu.setApplicationMenu(
      Menu.buildFromTemplate([
        {
          label: 'Edit',
          submenu: [
            { role: 'undo' },
            { role: 'redo' },
            { type: 'separator' },
            { role: 'cut' },
            { role: 'copy' },
            { role: 'paste' },
            { role: 'pasteandmatchstyle' },
            { role: 'delete' },
            { role: 'selectall' }
          ]
        }
      ])
    );
  }

3. Native Modules

npm install sqlite3

Modules written in C++

Native Modules

eg. sqlite3, bcrypt, ...

Needs to be compiled for the target platform

Native Modules

MacOS can build for all 3 platforms

Except when you include a native dependency

 

Use CI/CD

Windows

Linux / macOS

Performance

4. Start-up Time

Web App

Desktop

(() => {
  console.log('Hi');
})()
const knex = require('knex');

(() => {
  console.log('Hi');
})()
const knex = require('knex');
const rxjs = require('rxjs');
const React = require('react');
const lodash = require('lodash');
const moment = require('moment-js');
const requests = require('request');
const ReactDOM = require('react-dom');
const timezone = require('moment-timezone');

(() => {
  console.log('Hi');
})()
function doSomething() {
  const someModule = require('someModule');

  someModule.something();
}

Import only when you need it

Code Splitting

5. Resource Utilization

Performance Monitor

Repaints and FPS meter

Rendering a list

of 1000 users

6. Virtualized List

Normal List

Window / Viewport

Virtualized List

Window / Viewport

Slack with virtualized list

7. Don't run stuff in the main process

Main

Renderer

Node.js script

Browser Window

IPC

Inter Process Communication

Renderer

Browser Window

Renderer

Browser Window

IPC

IPC

Main

Renderer

Node.js script

Browser Window

Renderer

Browser Window

Renderer

Browser Window

Do: Expensive Task

You do it!

Done

show: false

 

show: false

 

Done

In Summary

  1. Use HashRouter 
  2. Copy and Paste support for Mac
  3. Native Dependency = Build in your targeted platform
  4. Take account of start up times
  5. Use DevTools, monitor resource utilization
  6. Use Virtualized List
  7. Don't run stuff in the main process

Thank You!

Beyond The Browser: From Web to Desktop (Frontend-Reunited)

By Pratish Shrestha

Beyond The Browser: From Web to Desktop (Frontend-Reunited)

  • 150
Loading comments...

More from Pratish Shrestha