Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Electron

1,708 views

Published on

electron

Andreas Gerlach

http://dotnet-paderborn.azurewebsites.net/

Published in: Software
  • Be the first to comment

  • Be the first to like this

Electron

  1. 1. Electron Cross Platform desktop applications with Web Technologies
  2. 2. Agenda  Motivation  Introduction  OS Interoperability  Deployment Options  Integrate legacy code
  3. 3. Motivation On the need for going cross platform
  4. 4. History Desktop Mobile / Tablet Hybrid Web ♥ Native > 1990 > 2008 > 2011 > 2016 C/C++ Java C#/Mono later: Chrome Apps Objective-C (iOS) Java (Android) C# (Windows Phone) Cordova Xamarin React Native PWA Native Web Views W3C Standards
  5. 5. Mobile OS Market Share 0 10 20 30 40 50 60 70 80 90 100 Android iOS Series 40 SymbianOS Windows BlackBerry OS
  6. 6. Desktop OS Market Share 0 10 20 30 40 50 60 70 80 90 100 Windows OS X Linux
  7. 7. One Codebase for Everything
  8. 8. Introduction An overview of the Electron framework
  9. 9. What is Electron?
  10. 10. How does Electron work?
  11. 11. Some real world projects MICROSOFT TEAMS GITHUB DESKTOP SLACK GITHUB ATOM NYLAS N1 MICROSOFT VSCODE
  12. 12. Usage stats for Electron
  13. 13. Anatomy of an Electron application
  14. 14. Anatomy of an Electron application
  15. 15. Anatomy of an Electron application
  16. 16. Anatomy of an Electron application
  17. 17. Sample Basic Electron application in JavaScript - un-opinionated, lets you choose a frontend framework that fits best for you - shows code / structure to boot up a minimal Electron application - https://github.com/electron/electron- quick-start
  18. 18. OS Interoperability Jumping out of the browser’s sandbox
  19. 19. OS Integration  Native Dialogs  Clipboard  Menu / Context Menu  Desktop Capturer  Notifications  File System Access  Databases  Global Shortcut  Power Save Blocker  Tray Icons  Recent Item List (Windows, macOS)  Dock Item Menu  TouchBar support (macOS)  … (based on Node.js module system) https://electron.atom.io/docs/
  20. 20. Electron API Demos  The Electron API Demos app interactively demonstrates the most important features of the Electron API. See what's possible with Electron with sample code and helpful tips for building your app. https://github.com/electron/electron-api- demos
  21. 21. Deployment Options Building, Packaging and Distributing it
  22. 22. Electron-Forge Bootstrap project creation (supports different templates) Build and package your app (including native modules) Publish to the Cloud (supports GitHub, S3)
  23. 23. Electron-Packager Archive Disk Image Mac App Store Archive Installer Windows Store Archive RPM / DEB FlatPak
  24. 24. Sample Build and Package an Electron Application - Uses Electron-Forge to bootstrap an Electron Application - Configures Electron-Packager to build and package the application - https://electronforge.io/ / https://github.com/electron- userland/electron-packager
  25. 25. Integrate legacy code I’ve already a library for that
  26. 26. C/C++ Sources OS dependent static-linked library Native Build Tools V8 JavaScript Wrapper Node.js Runtime Node.js JS Libs JavaScript Application Electron Process C/C++ Source Code
  27. 27. Sample Integrate existing C/C++ source code - Build a native V8 module via NAN (C) - Build a native V8 module via N-API (C++) - Call the native V8 module from JavaScript - https://github.com/nodejs/abi-stable- node-addon-examples
  28. 28. Native shared libraries V8 node-ffi Node.js Runtime Node.js JS Libs JavaScript Application Electron Process OS dependent shared library
  29. 29. Sample Integrate existing native shared libraries - Using node-ffi for declaring external function definitions - Mapping parameter types - Call the native library from JavaScript - https://github.com/node-ffi/node-ffi
  30. 30. .net Source Code / Libraries V8 edge Node.js Runtime Node.js JS Libs JavaScript Application Electron Process .net Library CLR
  31. 31. Sample Integrate existing .net source code / libraries - Using edge.js for calling .net source code / referring to existing assemblies - Call the .net code from JavaScript - https://github.com/agracio/edge-js
  32. 32. Q&A Now it’s your turn

×