Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Thorsten Hans

May 24, 2018
Tweet

More Decks by Thorsten Hans

Other Decks in Technology

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 [email protected] https://thorsten-hans.com @ThorstenHans Thorsten Hans
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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