Beyond The Browser:

From Web to Desktop

Pratish Shrestha

Sr. Software Engineer

Frontend

Backend

DevOps

Electron JS

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

Main

Renderer

Node.js script

Browser Window

Renderer

Browser Window

Renderer

Browser Window

Do: Expensive Task

You do it!

Done

show: false

Done

In Summary

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

Beyond The Browser:

Electron JS

What we've been using

1. URLs and Routing

2. Copy and Paste

does not work on Mac

3. Native Modules

Native Modules

Native Modules

Use CI/CD

Performance

4. Start-up Time

Import only when you need it

Code Splitting

5. Resource Utilization

Performance Monitor

6. Virtualized List

7. Don't run stuff in the main process

In Summary

Thank You!

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

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

Pratish Shrestha

Beyond The Browser:

Electron JS

What we've been using

1. URLs and Routing

2. Copy and Paste

does not work on Mac

3. Native Modules

Native Modules

Native Modules

Use CI/CD

Performance

4. Start-up Time

Import only when you need it

Code Splitting

5. Resource Utilization

Performance Monitor

6. Virtualized List

7. Don't run stuff in the main process

In Summary

Thank You!

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

More from Pratish Shrestha