ElectronJs: Build cross platform Desktop Apps with JS, HTML, CSS

In brief, it’s a framework for building cross platform desktop application with web technology

Agenda

• What web app CAN’T do?
• Why desktop app?
• .Net + Mono + Xamarin
• What is Electron?
• Electron History?
• Electron Facts?
• App built in Electron
• Architecture
• Database
• Distribution
• Electron Forge

What web app CAN’T do?

• Work with peripheral devices and other local hardware
• Edit any local files
• For professional level applications

Why desktop app?

• Offline, printers, devices and other local hardware
• File Management, backup, Editor
• Time management, Games, Media Player

.Net + Mono + Xamarin

Pros: Shared .NET code base

Cons:

• Xamarin Mac !== Xamarin iOS/ Android
• Native UI is hard
• Licensing

What is Electron?

In brief, it’s a framework for building cross platform desktop application with web technology

Pros:

• HTML, CSS, Javascript
• NodeJs + Chrome
• No deployment dependencies

Cons:

• HTML, CSS, Javascript
• Seriously, Javascript
• Native modules in C/C++

Electron History?

https://image.slidesharecdn.com/electron-js-180914063616/95/electron-js-build-crossplatform-desktop-applications-with-web-technologies-9-638.jpg?cb=1537175740

Electron Facts?

• Open source library by Github.
• Was originally written for ATOM (Formerly known as Atom Shell)
• Shared code/ UI
• Use power of Node (6.3.0) and Chromium (52.0.2743.82 V8: 5.2.361.43) together, combine into a single runtime.
• Rapid development
• Only one latest and greatest Browser,
• App silently updates with Squirrel
• Windows, MacOS, Linux
• Native UX

App built in Electron

Architecture

• Architecture: IPC

IPC (Inter Process Communication)

• A protocol used on Election apps for enabling communication between its processes (Main, Render)
• Module: ipcMain, ipcRender
• Base on EventEmitter: Listening and emitting events

Database

Up to you (NodeJs supported):

• localStorage
• indexedDB
• Postgres
• MongoDb
• MySQL

Distribution

• Windows
• nsis (Installer), nsis-web (Web installer), portable
• AppX, Squirrel.Windows
• macOS: dmg, pkg, mas, mas-dev
• Linux: AppImage, snap, rpm, pacman, p5p, apk, deb

Electron Forge

A complete tool for building modern Electron Application

https://github.com/electron-userland/electron-forge

References

• https://electronjs.org
• https://dev.to/akramsaouri_79/common-gotchas-when-working-with-electron-js-4m7n
• https://medium.com/js-imaginea/clustering-inter-process-communication-ipc-in-node-js-748f981214e9
• https://jlord.us/essential-electron/

Thanks for reading, please feel free to comment with this post.

nphausg - Overview