Building real cross platform apps using Electron - Tales from the Field

Slides from my talk at TechoramaBE in Antwerp about tips, tricks and interesting things you should know when building cross-platform applications using Electron.

Transcript

1. Building real cross platform applications with Electron Tales from the Field Thorsten Hans @ThorstenHans Consultant
2. 2 § What to EXPECT § Quick introduction into Electron § Using Native C++ Node.js Add-Ons in Electron § Securing Electron Applications § Dealing with unexpected errors in Electron § Developer Tooling / Workflow § What to NOT EXPECT § Good looking UIs / Apps ! § Node.js / JavaScript introduction Building real cross platform applications with Electron Tales from the Field Building real cross platform applications with Electron Tales from the Field
3. Consultant @ Thinktecture AG Focus on • Cross platform desktop applications • Kubernetes • Azure • Cloud-native application architectures thorsten.hans@thinktecture.com https://thorsten-hans.com @ThorstenHans Thorsten Hans
4. Electron Headstart A quick introduction
5. 5 § Create desktop applications from web apps § Hybrid approach, similar to Apache Cordova § Target Windows desktop, macOS, and Linux § Marriage of Chromium and Node.js § Independent of installed browsers on target machines § Does not need native SDKs to build final artifact § Access to native platform features § Electron API § Node modules ecosystem Desktop applications with Electron Tales from the Field Building real cross platform applications with Electron
6. 6 Electron architecture Desktop OS Electron Renderer Process (technically Chromium) Electron Main Process (technically Node.js) MacOS Windows Linux Your Single Page Application Electron API Your custom Node.js modules IPC Remote Node.js Tales from the Field Building real cross platform applications with Electron
7. Essentials for Devs Stuff for every Electron developer
8. Stuff for every Electron developer • Debugging Main Process • Unit Testing Electron using Spectron • https://github.com/electron/spectron • Inspecting Electron Apps using Devtron • https://github.com/electron/devtron • Crashpad and Crashpad-Server Essentials for Devs Building real cross platform applications with Electron Tales from the Field
9. Securing Electron Apps It’s your responsibility
10. It‘s your responsibility • Obviously: HTTPS over HTTP • Define Content-Security-Policy • Disable Node.js integration for Renderer Process • Bridge APIs for Renderer • !-Patch window.eval for Renderer Process Securing Electron Apps Building real cross platform applications with Electron Tales from the Field
11. Native Node.js Add-Ons Reuse existing C++ Code in Electron Applications
12. Reuse existing C++ Code in Electron Applications • Add it as a dependency to your app manifest • Rebuild the dependencies either using • npm rebuild runtime=electron • electron-rebuild • For Windows build-tools are required • npm --add-python-to-path install --global windows-build-tools Native Node.js Add-Ons Building real cross platform applications with Electron Tales from the Field
13. User Experience and OS Integration Provide great look and feel
14. Provide great look and feel • Optimize App start • Remember Window Dimensions / Positions • Provide Menus • Dock and Taskbar Integration • Support platform features like Apple’s TouchBar User Experience and OS Integration Building real cross platform applications with Electron Tales from the Field
15. https://thns.io/2KPKCC9 All code is open-sourced on GitHub