Pro Yearly is on sale from $80 to $50! »

Deep Dive: Cross-Plattform-Desktopanwendungen mit Electron

6848c06ef647ab606c668cc5264c0fc9?s=47 Thorsten Hans
September 26, 2019

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.

6848c06ef647ab606c668cc5264c0fc9?s=128

Thorsten Hans

September 26, 2019
Tweet

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
  9. None
  10. None
  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
  13. None
  14. None
  15. None
  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
  18. None
  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
  21. None
  22. None
  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