Deep Dive: Cross-Plattform-Desktopanwendungen mit Electron

Slides from my Electron Deep Dive Talk at BASTA! 2019 in Mainz

Es klingt so einfach: Mit GitHubs Electron Tooling werden bestehende Web-Apps einfach in funktionierende Cross-Plattform-Applikationen konvertiert. In der Praxis gilt es allerdings viele Dinge zu beachten um ein qualitativ hochwertiges Ergebnis zu liefern. Thorsten Hans zeigt Ihnen in seinem Vortrag eine Reihe von Tipps und Tricks aus realen Projekten, die Ihnen helfen werden, die User Experience Ihrer Anwendung noch weiter zu verbessern. Von Architekturvorlagen über effektives Debugging bis hin zu bewährten Patterns aus echten Projekten lernen Sie alles, was Sie benötigen, um eine erfolgreiche Cross-Plattform-Applikation zu erstellen. Wollten Sie schon Immer wissen, wie Sie existierenden C++ Code in einer Electron-App verwenden? Dann besuchen Sie diesen Vortrag und lernen Sie, wie es funktioniert.

Transcript

1. 1 § 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
2. Deep Dive Cross-Plattform-Desktopanwendungen mit Electron Thorsten Hans @ThorstenHans Consultant
3. Focus: Cloud Native & Infrastructure as Code Consultant @ Thinktecture AG thorsten.hans@thinktecture.com thorsten.hans@gmail.com thinktecture.com thorsten-hans.com https://thns.io/slides @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 -> Visual Studio Code • 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
11. Securing Electron Apps It’s your responsibility
12. 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 • Follow the Security Recommendations • https://electronjs.org/docs/tutorial/security#checklist-security-recommendations Securing Electron Apps Building real cross platform applications with Electron Tales from the Field
16. Native Node.js Add-Ons Reuse existing C++ Code in Electron Applications
17. 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
19. User Experience and OS Integration Provide great look and feel
20. 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
23. https://thns.io/2l6qfcM All code is open-sourced on GitHub
24. Q&A If you’ve further questions later on: shoot me a mail at thorsten.hans@thinktecture.com / thorsten.hans@gmail.com or tweet at @ThorstenHans slides at https://thns.io/slides