Cross Platform Desktop apps with Electron

Welcome to the latest conquest of JavaScript: The Desktop. Yes, the toy language that leaped out of the browser onto the server through Node.js has also made a leap onto the desktop.

Electron is the open source framework developed by GitHub, which allows for the development of desktop apps using node.js. Building a desktop app that runs on OSX, Windows and linux has not only become super easy, it is great fun.

At this talk Paul Sutherland will take you through Electron framework and show you how to get up to speed quickly building your own desktop apps. He will also show you how to build mobile apps that run on the desktop with the Ionic Framework and how to port your existing web apps to run on the desktop, with very little changes to your code.

Transcript

1. Cross Platform Desktop apps with Electron
2. The code for this talk is now on GitHub as Polyonic https://github.com/paulsutherland/Polyonic
3. About Me Paul Sutherland Surveyor, Web and Mobile Developer at Black & Veatch Currently Head of IT at ESD JV Organiser for Tech Talks and Member of Dundee MakerSpace @ipaulsutherland mail@paulsutherland.net
4. What will we cover tonight What is Electron History Getting Started Examples Combining Electron with Ionic2 Apps made with Electron What we are using Electron for
5. What is Electron A framework for building cross platform desktop applications with web technology Built with HTML, CSS and JS A single runtime bundling Chromium (content library) and Node.js Access to the native node APIs and over 250,000 npm packages Build once then run on Windows Mac OSX and Linux, with native menus, dialogs and notifications Build desktop and/or tray applications
6. History Began as Atom Shell Mission was to build a desktop application with web technologies. The CEF and NW.js didn’t quite do what they wanted so they built Atom Shell Began Jan 2013 Open sourced in May 2014 Renamed to Electron in 2015
7. Main Process browser-window ipc Node.js menu dialog The Main and Render processes dom remote Node.js web-frame ipc Renderer Process dom remote Node.js web-frame ipc Renderer Process dom remote Node.js web-frame ipc Renderer Process
8. Pros and Cons Pros: No dependencies required to deploy and run the applications Build your App using web technologies: HTML, CSS and JavaScript Cons: JavaScript Not mature, best practise still to be developed. There is a lot of things you can do and tools, frameworks, libraries you can use. You can quickly get into trouble!
9. Features Build: 1.3.2 Node: 6.3.0 Chromium: 52.0.2743.82 V8: 5.2.361.43 Automatic Updates Rapid development Native menus & notifications App crash reporting Debugging and profiling Windows installers
10. In the world of Web, why build for the Desktop? Offline Storage Single browser Work with files Use the file system Make use of printing and connect to local hardware Kiosk Apps SQL Editor Applications
11. Apps made with Electron Apps that are using Electron
18. Getting Started: Node and Binaries Install node.js Install the binaries Either globally npm install electron-prebuilt -g or locally npm install electron-prebuilt --save-dev Installing globally allows you to run the command in your app (example later): electron .
19. Download the quick start To understand what a minimal application requires, dwnload the quick start from: https://github.com/electron/electron-quick-start git clone https://github.com/electron/electron-quick-start cd electron-quick-start npm install && npm start
20. Some Example Apps demoing the APIs Quick Start Api App Sample Apps Boilerplate
21. Combining Electron with Ionic2 + = ?
22. What we are using Electron for + + +
23. Dev and Build Tools electron-debug electron-reload electron-packager electron-builder electron-updater electron-mocha electron-boilerplate
24. Devtron - Application Debugging Download from: http://electron.atom.io/devtron/ Very neat tool that: Graphs out your app dependencies Explorer view of your event listeners Monitor you IPC messaging Lint your code ;) Getting started npm install --save-dev devtron require(‘devtron’).install() //in the console of chrome devtools!!
25. UI Frameworks Photon Kit Editor Framework Topcoat React Desktop
26. Thanks...