This talk describes a possibility for building native Desktop applications in an web focused environment using the Electron framework. Especially the use in combination with modern single page application frameworks like Angular and React is focused.

1. Going Desktop with
Electron

2. Leo Lindhorst
@DevWurm
Working Student
Software Development

4. What do
we target?
Mobile
Desktop
Web Apps

5. But ...
Limited offline
functionality
Little system
access
Reduced user
awareness
Limited system
integration

6. Solutions
Mobile Desktop

7. Framework for building native
desktop apps with web technologies
Linux, MacOS, Windows
Open Source project by GitHub

8. Chromium
NodeAPIs
Structure

9. Getting Started
const {app, BrowserWindow} = require('electron');
let win;
function createWindow() {
// Create the browser window.
win = new BrowserWindow();
// and load the index.html of the app.
win.loadURL(`file://${__dirname}/index.html`);
// Emitted when the window is closed.
win.on('closed', () => win = null);
}
app.on('ready', createWindow);

10. Getting Started
electron ./entry.js

11. Features
Native App Full-featured
system access
App packages
and installers
Keyboard
shortcuts
System dialogues
Native menu, tray
and notification
integration
...
Provide protocol
handlers

12. Latest Feature
Apple MacBook
Touch Bar support

13. Examples
Atom (Editor)

14. Examples
Postman (REST Client)

15. Examples
GitKraken (Git Client)

16. Just plain Web
Technologies?

18. SPA Frameworks
with Electron
Powerful and
progressive
frontend
frameworks
Full-featured
native integrations
Vibrant ecosystem

19. Angular & Electron
Integration of the Angular-CLI
Setup with Electron
https://www.sogehtsoftware.de/blog/post/building-cross-
platform-desktop-apps-with-angular-2-and-electron
→ Streamlined and feature-rich development
environment for Desktop Apps
https://github.com/DevWurm/angular-2-electron-seed

20. ElectronMicroscope

21. Problems
Most Web UI-Toolkits are
optimized for mobile
Version conflicts and misbehavior of
frameworks and libraries occur more
often and get fixed lately
(Re-)Configurations of frameworks and
tools are sometimes “hacky”

22. Conclusion
Ideal if you can reuse code (Additional
web app, web tech based mobile app)
Good solution if you are focused
on web development, but native
features are required
In some cases not as powerful as
native-only frameworks

23. Conclusion
It depends

24. Thank you
@DevWurm