Learn Electron for Web Developers
Download as PPTX, PDF2 likes361 views
The document provides a comprehensive overview of Electron, a framework for building cross-platform desktop applications using web technologies like HTML, CSS, and JavaScript. It discusses the use of existing web development skills, application packaging, updating methods, crash reporting, and software certificates necessary for app distribution on platforms such as Windows and macOS. Additionally, it outlines resources for further learning and selling options for the developed applications.
Learn Electron for Web Developers
- 1. Electron for Web Developers and other people who know (or can learn) a bit of HTML, CSS, and JavaScript
- 3. Things built using Electron • Atom (the original Electron app circa 2013) • Skype • GitHub Desktop • Discord • Slack • Visual Studio Code
- 5. How do I use my existing skills? • Since Electron is pretty much a web browser you’ll be using HTML, CSS, and JavaScript to build your UI and functionality
- 6. How do I use my existing skills? • Since Electron is pretty much a web browser you’ll be using HTML, CSS, and JavaScript to build your UI and functionality • This also means if you want to use Sass for your CSS, or jQuery, TypeScript, React, Angular, or Vue you can
- 7. How do I use my existing skills? • Since Electron is pretty much a web browser you’ll be using HTML, CSS, and JavaScript to build your UI and functionality • This also means if you want to use Sass for your CSS, or jQuery, TypeScript, React, Angular, or Vue you can • You can also include binaries to run things like PHP and Ruby
- 8. How do I use my existing skills? • Since Electron is pretty much a web browser you’ll be using HTML, CSS, and JavaScript to build your UI and functionality • This also means if you want to use Sass for your CSS, or jQuery, TypeScript, React, Angular, or Vue you can • You can also include binaries to run things like PHP and Ruby • You can use Node.js modules in your application. Simply require them as if you were building a Node.js application: require(’aws-sdk/clients/s3’)
- 9. Things to be aware of when using Electron Sample sizes for an Electron application packaged up: • Linux (32-bit) - 60.3 MB • Linux (64-bit) - 55.2 MB • Windows (32-bit) - 47.8 MB • Windows (64-bit) - 66.2 MB • OSX - 117.3 MB* * Apps such as Slack use Electron for Windows/Linux and MacGap for OSX (< 1MB base size)
- 10. Things to be aware of when using Electron • Your source code is not fully encrypted • Code is packaged up using Asar archive format to conceal from cursory inspection • Can be extracted using asar utility
- 11. Things to be aware of when using Electron • Vulnerabilities now live on the user’s system • Node package vulnerabilities distributed to each user
- 12. Express Framework • Fast, unopinionated, minimalist web framework for Node.js
- 13. Express Framework • Fast, unopinionated, minimalist web framework for Node.js • At the time of this vulnerability there were 291 installed module dependencies in the Express framework
- 14. Express Framework • Fast, unopinionated, minimalist web framework for Node.js • At the time of this vulnerability there were 291 installed module dependencies in the Express framework var http = require(“http”) http.request({ method: “POST”, hostname: “api.twitter.com”, path: “/hotpockets/status/501511389320470528”, }) Dependency yummy/like-tweet.js:
- 15. Express Framework Dependency - yummy
- 16. Environment Setup • NodeJS - https://nodejs.org/en/download/ • Windows - On the screen that allows you to configure the installation, make sure to select the Node.js runtime, npm package manager, and Add to PATH options.
- 17. Environment Setup – Windows Windows 7 or later
- 18. Environment Setup – Windows (Alternatives) Microsoft offers Windows 10 Enterprise (evaluation editions) virtual machines for VMWare, Hyper-V, Virtualbox, or Parallels https://developer.microsoft.com/en-us/windows/downloads/virtual-machines
- 19. Environment Setup – OSX Mac OSX 10.9+ (all versions named macOS) Apple doesn’t allow running macOS in virtual machines unless the host computer is already an Apple computer.
- 20. Environment Setup – OSX (Alternatives) • Hackintosh - https://hackintosh.com/ • Cloud Services: • https://xcloud.me (49 CHF swiss francs/month), based in Switzerland • MacInCloud - https://www.macincloud.com/ starting at $20/month or $1/hour pay-as-you-go
- 21. Hello World Clone the Electron Quick Start repository: git clone https://github.com/electron/electron-quick-start
- 22. Hello World Clone the Electron Quick Start repository: git clone https://github.com/electron/electron-quick-start npm install && npm start Then install and run:
- 24. Hello World – Behind the Scenes package.json main.js index.html
- 25. Hello World – Behind the Scenes package.json Standard NPM file, defines the application name, version, author, etc. but also defines the main process main.js index.html
- 26. Hello World – Behind the Scenes package.json Standard NPM file, defines the application name, version, author, etc. but also defines the main process main.js The script that runs in the main process, can display a GUI by creating web pages (renderer processes) index.html
- 27. Hello World – Behind the Scenes package.json Standard NPM file, defines the application name, version, author, etc. but also defines the main process main.js The script that runs in the main process, can display a GUI by creating web pages (renderer processes) index.html The content for a renderer process
- 28. Hello World – Behind the Scenes Main Process (main.js) BrowserWindow index.html Renderer Process
- 29. Hello World – Behind the Scenes Main Process (main.js) BrowserWindow Renderer Process BrowserWindow index.html BrowserWindow Renderer Process Renderer Process
- 30. Packaging Up Your Application npm install electron-builder -g Install the Electron Builder package globally:
- 31. Packaging Up Your Application npm install electron-builder -g electron-builder . Install the Electron Builder package globally: Run the builder in/on your application directory:
- 32. Packaging Up Your Application 1. Electron Builder packages your app into an asar archive 2. Creates binary/executable version of your application 3. Creates installers for your application 4. Creates update configuration and files (metadata files and artifacts) for your application
- 33. Updating Your Application electron-updater vs. built-in autoUpdater • It doesn't require a dedicated release server • Code signature validation on macOS and Windows • electron-builder produces and publishes all required metadata files and artifacts. • Download progress • Staged rollouts • Different providers supported out of the box (GitHub Releases, Amazon S3, Digital Ocean Spaces, Bintray, and generic HTTP(s) server). • You need only 2 lines of code to make it work.
- 34. Updating Your Application import { autoUpdater } from “electron-updater” autoUpdater.checkForUpdatesAndNotify()
- 35. Crash Reporting const {crashReporter} = require(‘electron’) crashReporter.start({ productName: ‘YourName’, companyName: ‘YourCompany’, submitURL: ‘https://example.com/my-crash-logger’ })
- 36. Crash Reporting Sends the following fields as POST data: • ver String - The version of Electron. • platform String - e.g. 'win32'. • process_type String - e.g. 'renderer'. • guid String - e.g. '5e1286fc-da97-479e-918b-6bfb0c3d1c72'. • _version String - The version in package.json. • _productName String - The product name in the crashReporter options object. • prod String - Name of the underlying product. In this case Electron. • _companyName String - The company name in the crashReporter options object. • upload_file_minidump File - The crash report in the format of minidump. • All level one properties of the extra object in the crashReporter options object.
- 37. Software Certificates • Software certificates make installing your app less scary
- 38. Software Certificates • Software certificates make installing your app less scary • If you don’t have a software certificate users will see an alert asking them to trust your application
- 39. Software Certificates • Software certificates make installing your app less scary • If you don’t have a software certificate users will see an alert asking them to trust your application • On OSX users can’t install unverified apps without disabling security settings
- 40. Software Certificates – OSX Default sudo spctl –master-disable
- 41. Software Certificates – Windows • Buy a Code Signing certificate from the vendors listed at: https://docs.microsoft.com/en-us/windows-hardware/drivers/dashboard/get-a- code-signing-certificate • ~$100-300+ / year • Need to validate address and phone number for the company/individual. This required being listed in an online business directory such as https://connect.data.com/
- 42. Software Certificates – OSX • Need an Apple Developer account - $99/year • Need a government issued photo ID or equivalent documentation • Create a macOS certificate
- 43. Software Certificates – OSX • Need an Apple Developer account - $99/year • Need a government issued photo ID or equivalent documentation • Create a macOS certificate If you’re an organization (don’t want your individual name showing up for your app): • D-U-N-S number or business documents to verify identity
- 44. Software Certificates – Using Them If you use Electron Builder it will automatically apply them if they are accessible
- 45. Software Certificates – Using Them (Windows) 1. Download the certificate file from your vendor of choice 2. Generate a .p12 file 3. Specify the path to your certificate: setx CSC_LINK “CERTIFICATE_PATH” Where “CERTIFICATE_PATH” is the HTTPS link (or base64-encoded data, or file:// link, or local path) to certificate (.p12 or .pfx file).
- 46. Software Certificates – Using Them (OSX) 1. Create a macOS certificate 2. Add it to your keychain
- 47. Selling Your App – Windows Store • Need to use Windows 10 “Anniversary Update” since it’s able to run win32 .exe binaries by launching them together with a virtualized filesystem and registry. Pairing the executable with a virtual filesystem and virtual registry allows Windows to enable one-click install/uninstall. • Also need: • Windows 10 SDK • Node 4 or later
- 48. Selling Your App – Windows Store • Use Microsoft developed electron-windows-store tool https://github.com/felixrieseberg/electron-windows-store to turn your app into a Windows AppX package. • Can follow the sequence to reserve an app name: https://docs.microsoft.com/en-us/windows/uwp/publish/create- your-app-by-reserving-a-name then configure app pricing, availability, etc. Then submit to the store to get certified.
- 49. Selling Your App – Mac App Store • Sign your app following instructions and upload it to the store, submit it for review. https://electronjs.org/docs/tutorial/mac-app-store- submission-guide • Unfortunately to satisfy requirements for app sandboxing need to disable two of the more important modules: • CrashReporter • AutoUpdater (electron-updater works though)
- 50. Selling Your App – Independently Gumroad • Can sell directly on site or through a service like Gumroad - https://gumroad.com/features#sell-digital • Also has the ability to generate licenses on the fly. Easy Digital Downloads • If you already have EDD plugin installed - https://easydigitaldownloads.com/ can add the software licensing add-on https://easydigitaldownloads.com/downloads/software-licensing/ and do it from there as well. Or roll your own…
- 51. Diving Deeper https://www.learnelectron.com/ Additional content, resources, and useful packages for developing Electron apps.
Editor's Notes
- #2: Comfortable building experiences for the browser A wall between the browser and OS, not just with access/security, but the code as well Electron bridges the gap between existing skills and the OS Creates a lot interesting possibilities Concept introduced around the time of Sass, LESS, precompilers coming on the scene. CodeKit (mac only) -> Prepros, digging into node-webkit (now nw.js)
- #4: Electron was originally known as Atom Shell when introduced in April 2013 as the framework to build the Atom editor, renamed in April 2015
- #5: Electron only uses the rendering library (content module libchromiumcontent) from Chromium. The "content" module is the core code needed to render a page using a multi-process sandboxed browser. It includes all the web platform features (i.e. HTML5) and GPU acceleration. It does not include Chrome features, i.e. extensions/autofill/spelling etc.
- #10: The downside of the Electron approach is that each app comes with a copy of two large software frameworks, Node.js and Chromium. Electron itself right now is ~33MB
- #16: Every time you downloaded Express, you favorite this tweet from Hot Pockets.
- #29: The main process controls the life of the application. It has the full Node.js API built in and it opens dialogs, and creates render processes. It also handles other operating system interactions and starts and quits the app By convention, this process is in a file named main.js. But it can have whatever name you’d like Bear in mind that there can be only one main process.
- #30: The render process is a browser window in your app. Unlike the main process, there can be many render processes and each is independent Because every render process is separate, a crash in one won’t affect another. This is thanks to Chromium’s multi-process architecture These browser windows can also be hidden, good for concurrent CPU processes
- #34: The build-in auto-updater uses the Squirrel framework, and requires a server that speaks its language. Made easier with a package such as “electron-release-server” (as I’ve done for WP Express) but can be easier with electron-updater package.
- #41: macOS Sierra hides the “Anywhere” setting unless you run a console command
- #42: I went with Digicert. They needed to validate my address and phone number for the company. This required being listed in an online business directory such as https://connect.data.com/ - or if you get OSX certificate with D-U-N-S number can use that as well. They have extended validation code signing certificates as well. Supposedly with the standard you will need to be installed on up to 100 systems before a warning message does not display, then after that you’re “validated”. The extended validation circumvents this and doesn’t show a warning.
- #44: The D‑U‑N‑S Number is a unique nine-digit identifier for businesses. It is used to establish a D&B® (Dun and Bradstreet) business credit file, which is often referenced by lenders and potential business partners to help predict the reliability and/or financial stability of the company in question. "D‑U‑N‑S," which stands for data universal numbering system, is used to maintain up-to-date and timely information on more than 285 million global businesses.