From Web to Desktop
Pratish Shrestha
Sr. Software Engineer
Frontend
Backend
DevOps
+
Slack
VSCode
Discord
Desktop App using Web Technologies
We ❤️ React
Type Safety
Local offline Database
Desktop Application
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/>
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' }
]
}
])
);
}
npm install sqlite3
Modules written in C++
eg. sqlite3, bcrypt, ...
Needs to be compiled for the target platform
MacOS can build for all 3 platforms
Except when you include a native dependency
Windows
Linux / macOS
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();
}
Repaints and FPS meter
Rendering a list
of 1000 users
Normal List
Window / Viewport
Virtualized List
Window / Viewport
Slack with virtualized list
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