Slide 1

Slide 1 text

How people build software ! " Electron GitHub Universe 2015

Slide 2

Slide 2 text

How people build software Hello! Jessica Lord Engineer, Atom, GitHub 2 #

Slide 3

Slide 3 text

How people build software Electron Origins, features and architecture 3 $

Slide 4

Slide 4 text

How people build software Electron Origins 4 $

Slide 5

Slide 5 text

How people build software Atom An editor built with web technology 5 %

Slide 6

Slide 6 text

! How people build software Finding the Right Fit 6 CEF NW.JS ELECTRON

Slide 7

Slide 7 text

How people build software Lead Developer Cheng Zhao, contributor to nw.js 7 $

Slide 8

Slide 8 text

How people build software ! Electron Timeline 8 January 2013 Project begins May 2014 Open sourced April 2015 Named Electron

Slide 9

Slide 9 text

How people build software What is Electron? A framework for building cross platform desktop applications with web technology 9

Slide 10

Slide 10 text

! How people build software Electron 10 & ' WEB TECHNOLOGY NO NATIVE SKILLS HTML, CSS, JS Unless you want to

Slide 11

Slide 11 text

How people build software How does Electron? Chromium web rendering and embedded Node.js 11

Slide 12

Slide 12 text

How people build software Chromium Content Lighter and easier to update 12

Slide 13

Slide 13 text

How people build software V8 Chrome and Node.js share a JavaScript engine 13

Slide 14

Slide 14 text

! How people build software Electron 14 ⚡ & LATEST AND GREATEST ONE BROWSER All the Chrome goodies Design once

Slide 15

Slide 15 text

! How people build software Electron 15 ) ' FILESYSTEM MODULES All of Node.js APIs npm ecosystem

Slide 16

Slide 16 text

! How people build software Electron 16 % * THREE PLATFORMS NATIVE MENUS Windows, Mac, Linux Dialogs & notifications

Slide 17

Slide 17 text

! How people build software Electron 17 + ' AUTOMATIC UPDATES WIN INSTALLERS Mac & Win with Squirrel No configuration

Slide 18

Slide 18 text

How people build software Using Electron Understanding the components 18

Slide 19

Slide 19 text

How people build software Tale of Two Processes Main and Renderer 19

Slide 20

Slide 20 text

How people build software ! The Main Process 20 Application Lifecycle Main

Slide 21

Slide 21 text

How people build software ! The Main Process 21 Application Lifecycle Main menu ipc dialog Node.js browser-window

Slide 22

Slide 22 text

How people build software ! The Main Process 22 Renderer Application Lifecycle Main Web Page Creates menu ipc dialog Node.js browser-window

Slide 23

Slide 23 text

How people build software ! The Renderer Process 23 Node.js DOM ipc menu ipc dialog Node.js browser-window remote web-frame Creates Application Lifecycle Renderer Main Web Page

Slide 24

Slide 24 text

How people build software ! 24 ipc ipc Communicates The Renderer Process menu dialog Node.js browser-window DOM remote web-frame Application Lifecycle Renderer Main Web Page Creates Node.js

Slide 25

Slide 25 text

How people build software ! 25 Main Renderer Application Lifecycle Web Page Renderer Renderer Renderer The Renderer Process

Slide 26

Slide 26 text

How people build software ! Main and Render Process Context 26 Chrome File Edit View Main Process Chrome App

Slide 27

Slide 27 text

How people build software ! Main and Render Process Context 27 Renderer Process Each tab Main Process Chrome App Chrome File Edit View

Slide 28

Slide 28 text

How people build software Example A minimal Electron application 28 #

Slide 29

Slide 29 text

How people build software ! Minimal Electron Application 29 package.json main.js index.html

Slide 30

Slide 30 text

How people build software ! package.json 30 { "main": “main.js" }

Slide 31

Slide 31 text

How people build software ! main.js (Main Process) 31 var app = require('app') var BrowserWindow = require('browser-window') var mainWindow = null app.on('ready', function () { mainWindow = new BrowserWindow({ width: 500, height: 300 }) mainWindow.loadUrl('file://' + __dirname + '/index.html') })

Slide 32

Slide 32 text

How people build software ! index.html (Renderer Process) 32 window.onload = function () { var fs = require('fs') var p = document.createElement('p') p.textContent = fs.readFileSync('octocat.txt') document.body.appendChild(p) }

Hello Universe

Slide 33

Slide 33 text

How people build software ! Global Electron 33 npm install -g electron-prebuilt electron .

Slide 34

Slide 34 text

How people build software ! Example App 34

Slide 35

Slide 35 text

How people build software ! Example App 35

Slide 36

Slide 36 text

How people build software 36 , Apps on Electron Companies and open source developers

Slide 37

Slide 37 text

How people build software ! Companies Building on Electron 37

Slide 38

Slide 38 text

How people build software ! Open Source Projects on Electron 38 github.com/muan/mojibar

Slide 39

Slide 39 text

How people build software ! 39 github.com/mafintosh/playback Open Source Projects on Electron

Slide 40

Slide 40 text

How people build software Electron Roadmap API, documentation, Chrome, community 40 -

Slide 41

Slide 41 text

How people build software API 1.0 Stable and standardized 41 #

Slide 42

Slide 42 text

How people build software Features Mac App Store, more Windows support 42 #

Slide 43

Slide 43 text

How people build software Documentation Interactive API Electron application 43 .

Slide 44

Slide 44 text

How people build software Chrome & Node Always updating 44 &

Slide 45

Slide 45 text

How people build software Community Support and enable tooling 45 /

Slide 46

Slide 46 text

How people build software ! Electron Community Built Tools 46 electron-prebuilt electron-packager electron-compile Electron binaries CLI Package on all Platforms Compile on the fly

Slide 47

Slide 47 text

How people build software electron.atom.io repository: github.com/atom/electron twitter: twitter.com/electronjs slack: atom-slack.herokuapp.com Like Electron? We’re hiring. github.com/about/jobs 47 #

Slide 48

Slide 48 text

How people build software Example App Repository github.com/jlord/electron-uiniverse-demo 48 #