Supercharge your next web app with Electron!

Size: px

Start display at page:

Download "Supercharge your next web app with Electron!"

Shanon Lloyd
6 years ago
Views:

1 Supercharge your next web app with Electron!

2 GET /user/techninja James Todd Drupal Dev for 10+ years from Nor Cal Full time developer at Four Kitchens Maker, promoter of STEAM for kids Co-Author for Arduino Book series Maintainer of 2 OSS Electron apps for robotic control (check out a demo our booth!)

3 Hold questions until the end Thank you :)

4 Quick Term Reference JavaScript: Programming language for web browsers Node.js: JavaScript for servers NPM: The node package manager API: Interface to let programs to something ReST/ful: Standard for APIs over the web

5 Quick Term Reference DOM: Object model for web page elements React: Web framework for state & UI management Express: node.js web server and ReST router Headless: Running just a backend without a frontend

6 What is Electron?

7 Electron is yours! = +

8 Electron is three things... =

9 Electron's architecture makes it better Main Process Renderer Processes

10 Creating with Electron means: Single codebase, cross platform native Use standard HTML 5 markup Use Bootstrap, Angular, React, jquery and more Incredibly powerful debugging w/chrome dev tools Only one browser version to target! No need to worry about download times for local files

11 Who uses Electron?

12 Atom Editor Infinitely hackable > 5k community packages to extend functionality > 1mm monthly users Dogfooding ensures purity and strong releases

13 WordPress Desktop Clean, uncluttered interface Built by small team in about 2 months Direct API access to remotes sites, or offline storage synced.

14 Visual Studio Code MS Open Source Different take on code editing Live code execution/debugging for node/php & more

15 electron.atom.io/apps

16 Quando a Roma...???

18 People are excited about the Desktop again -Paul Betts

19 Electron might NOT be for your app if......you answer NO to any of the following: Can your app run reliably and be useful while offline? Can your team meet user needs for application updates and OS specific install support? Does extending to desktop meet few additional needs and use cases beyond native notifications and interfaces?

20 Electron might be RIGHT for your app if... Do you need low level functionality not handled by existing APIs? Do you need to port a node or other server side app for client side use? Do you need extra async processing power beyond webworkers?

21 Just give it a try!

22 Ship Stuff Every Day Plato (or was it Snoop Dogg?)

25 CNCServer running on a Raspberry PI driving the WaterColorBot via API from native ipad app at the White House Science Fair 2013

26 <webview>

27 <webview> Mode links Mode Webview iframe Main Window

28 <webview> Mode links Mode Webview iframe Main Window

29 <webview> Mode links Mode Webview iframe Main Window

30 <webview> Each organization in Slack runs in its own webview process.

35 OS Specific Binary Raster to autotrace > < autotrace to SVG

36 Making Electron Work for you

37 Let s build a simple Electron App Development Prerequisites: Relatively new OS (minimum) Win 7, OS X 10.9, Ubuntu 12 Terminal/Command line access Node.js installed (nodejs.org) Working knowledge of how web browsers display HTML Electron Project Minimums: package.json main.js index.html

38 package.json { "name": "my-electron-project", "version": "1.0.0", "description": "A minimal Electron application", "main": "main.js", "scripts": { "start": "electron." }, "devdependencies": { "electron": "~1.6.2" } }

39 Main.js (Main Process) const electron = require('electron') const app = electron.app const BrowserWindow = electron.browserwindow const path = require('path') const url = require('url') function createwindow () { mainwindow = new BrowserWindow({width: 800, height: 600}) mainwindow.loadurl(url.format({ pathname: path.join( dirname, 'index.html'), protocol: 'file:', slashes: true })) app.on('ready', createwindow)

40 Index.html (Renderer Process) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello World!</title> </head> <body> <h1>hello World!</h1>  We are using Node.js <script>document.write(process.versions.node)</script>, Chromium <script>document.write(process.versions.chrome)</script>, and Electron <script>document.write(process.versions.electron)</script>. </body> <script> // You can also require other files to run in this process require('./renderer.js') </script> </html>

41 `npm install`, `npm start`

42 It works! (hopefully)

43 ...or just use electron-quick-start `git clone

44 Electron can use... Express server Electron Libraries: Native runtimes/compiled code Automatic babel/sass compilation Low level hardware connections Streamlined user configuration storage etc..

45 Native APIs File Open/Save Environment variables Native customizable dialogs for each OS IPC communication between processes Menus, keyboard shortcuts, clipboard Frameless windows Desktop capture Dynamic tray, dock or application icons Tons more!

46 Native API demo app github.com/electron/electron-api-demos

47 Integration Drupal 8, Waterwheel, React, and Electron

48 Drupal 8 inside electron

49 github.com/fourkitchens/waterwheel-training

50 All the Drupal 8 API/Headless sessions or trainings at DrupalCon Baltimore: API First Drupal 8 with React.js and Waterwheel Future of the CMS: Decoupled, multichannel, and content-as-a-service A look into a possible Future for all of us: React, GraphQL and Drupal Ain t No Body: Not Your Mama s Headless Drupal Decoupled Drupal and Angular 2 EmberJS: A Fitting Face for a D8 Backend Decoupled from the Inside Out Drupal, Alexa, and Big Mouth Billy Bass Walk into a Bar API-First Initiative Masters of the Universe: Live-coding a React Application using Drupal Services

51 Main.js (excerpt) function createwindow () { mainwindow = new BrowserWindow({width: 740, height: 500}) mainwindow.loadurl(url.format({ pathname: path.join( dirname, 'build', 'index.html'), protocol: 'file:', slashes: true })) app.on('ready', createwindow) app.on('window-all-closed', function () { app.quit() }

52 package.json (excerpt) { "name": "todomvc", "version": "0.0.1", "main": "main.js", "scripts": { "start": "electron.", "build": "react-scripts build" }, "devdependencies": { "electron": "~1.6.2", "enzyme": "^2.4.1", "react-scripts": "^0.9.0",...

53 `npm install`

54 `npm run build`, `npm start`

55 To do React app in Electron!

56 API, Devtools for debugging

57 It s really that easy

58 Squirrel!

59 Installation packaging Integrating an app should be easy Packaging can be automated, and supports delta updates Distributing should be straightforward with channels Installing is Wizard-Free with no UAC dialogs or reboot Updating is done in the background

60 Installation building electron-packager electron-packager electron-installer windows appname.exe appdmg appname.dmg electron-packager electron-installer [debian/redhat] appname.deb/ appname.rpm

62 Updates

63 autoupdater & update servers Nuts: Powered by GitHub project releases for files & data Quickly deployable to Heroku/docker/your own server as stateless service with minor configuration via environment variables Supports private repositories for closed source releases Supports Squirrel.Windows & Squirrel.Mac Electron Release Server : Full featured, provides hosted Angular powered UI interface for managing and displaying releases Docker deploy support, or run it on your own server Supports Squirrel.Windows & Squirrel.Mac

64 Security and sandboxes

65 Don t let Bobby ruin your week

66 Electron Security basics Always sanitize input and output Don t allow giant or executable file uploads Only ever load local source files into windows Otherwise, disable node integration and use caution

67 Crash reporting const {crashreporter} = require('electron') crashreporter.start({ productname: 'YourName', companyname: 'YourCompany', Mini Breakpad Server submiturl: ' uploadtoserver: true }) github.com/electron/mini-breakpad-server

68 That s pretty much it! Electron is very active and still somewhat new. It s not always the right solution When in doubt, just give it a try. Real companies ship with Electron every day

69 Electron Question Time!

70 Thank you!

71 Join Us for Contribution Sprints Friday, April 28, 2017 First-Time Sprinter Workshop 9:00am-12:00pm Room: Mentored Core Sprint 9:00am-12:00pm Room: General Sprints 9:00am-6:00pm Room: #drupalsprints

WHAT DID YOU THINK? Supercharge Your Next Web App with electron! https://events.drupal.

72 WHAT DID YOU THINK? Supercharge Your Next Web App with electron! arge-your-next-web-app-electron Take the survey! THANK YOU!

Quick Desktop Application Development Using Electron

Quick Desktop Application Development Using Electron Copyright Blurb All rights reserved. No part of this book may be reproduced in any form or by any electronic or mechanical means including information