10 things to know about Electron

Slide 1

Slide 1 text

10 THINGS TO KNOW ABOUT ELECTRON

Slide 2

Slide 2 text

KEVIN SAWICKI GITHUB @KEVINSAWICKI [email protected]

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

WHAT IS ELECTRON? #1

Slide 5

Slide 5 text

BUILD CROSS PLATFORM DESKTOP APPS WITH WEB TECHNOLOGIES http://electron.atom.io WHAT IS ELECTRON?

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

5.10 49.0

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

WHO IS ELECTRON FOR? #2

Slide 11

Slide 11 text

IF YOU CAN BUILD A WEBSITE, YOU CAN BUILD A DESKTOP APP

Slide 12

Slide 12 text

FREE, OPEN SOURCE STARTED BY GITHUB RELEASED 02/2014

Slide 13

Slide 13 text

THE HARD PARTS MADE EASY

Slide 14

Slide 14 text

HOW DOES ELECTRON WORK? #3

Slide 15

Slide 15 text

main process

Slide 16

Slide 16 text

main process node

Slide 17

Slide 17 text

main process menu tray dialog node

Slide 18

Slide 18 text

main process menu tray dialog window renderer process node ipc

Slide 19

Slide 19 text

main process menu tray dialog window renderer process node DOM node ipc

Slide 20

Slide 20 text

main process menu tray dialog window window window renderer process node DOM renderer process renderer process node DOM node DOM node ipc

Slide 21

Slide 21 text

HOW DOES YOUR ELECTRON WORK? #4

Slide 22

Slide 22 text

ELECTRON IS NOT PRESCRIPTIVE

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

REACT? BABEL? BROWSERIFY? GO FOR IT!

Slide 25

Slide 25 text

ANGULAR? BOOTSTRAP? WEBPACK? GO FOR IT!

Slide 26

Slide 26 text

OR ENJOY THE PURITY OF CHROME

Slide 27

Slide 27 text

CUSTOM ELEMENTS? CSS VARIABLES? ES6? GO FOR IT!

Slide 28

Slide 28 text

USE ANY OF THE 273,000 PACKAGES ON NPM

Slide 29

Slide 29 text

YOU CHOOSE WHEN TO UPGRADE

Slide 30

Slide 30 text

ELECTRON APPS FEEL NATIVE #5

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

TRAY API

Slide 33

Slide 33 text

TRAY API FRAMELESS WINDOW

Slide 34

Slide 34 text

TRAY API FRAMELESS WINDOW TRANSPARENT WINDOW

Slide 35

Slide 35 text

TRAY API FRAMELESS WINDOW NOTIFICATIONS TRANSPARENT WINDOW

Slide 36

Slide 36 text

TRAY API FRAMELESS WINDOW NOTIFICATIONS PHOTON CSS TOOLKIT TRANSPARENT WINDOW

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

★ TAKE SCREENSHOTS ★ ACCESS MICROPHONE AND CAMERA ★ NATIVE OPEN, SAVE, MESSAGE DIALOGS ★ ADD CONTEXT AND SYSTEM MENUS ★ REGISTER GLOBAL KEYBOARD SHORTCUTS ★ PREVENT SLEEP MODE ★ REPORT CRASHES

Slide 40

Slide 40 text

ELECTRON MAKES DEBUGGING EASY #6

Slide 41

Slide 41 text

JAVASCRIPT DEBUGGER

Slide 42

Slide 42 text

RENDER TIMELINE

Slide 43

Slide 43 text

HEAP SNAPSHOTS

Slide 44

Slide 44 text

BUNDLE AND SHIP ADDITIONAL EXTENSIONS

Slide 45

Slide 45 text

ELECTRON CAN BE TEST DRIVEN #7

Slide 46

Slide 46 text

ELECTRON SUPPORTS WEBDRIVER & CHROMEDRIVER

Slide 47

Slide 47 text

WEBDRIVER IS AN OPEN SOURCE TOOL FOR AUTOMATED TESTING OF WEB APPS ACROSS MANY BROWSERS. ChromeDriver docs WHAT IS WEBDRIVER?

Slide 48

Slide 48 text

CHROMEDRIVER IS A STANDALONE SERVER WHICH IMPLEMENTS WEBDRIVER'S WIRE PROTOCOL FOR CHROMIUM. ChromeDriver docs WHAT IS CHROMEDRIVER?

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

ELECTRON APPS ARE OUT THERE #8

Slide 51

Slide 51 text

SLACK NYLAS N1 ATOM VISUAL STUDIO CODE

Slide 52

Slide 52 text

WEBTORRENT DESKTOP

Slide 53

Slide 53 text

★ Streaming torrent client implemented in JavaScript ★ Uses WebRTC for peer connections ★ Free and open source

Slide 54

Slide 54 text

JIBO

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

ELECTRON HAS AN AMAZING COMMUNITY #9

Slide 57

Slide 57 text

★ 350 CONTRIBUTORS ★ 1,600 PULL REQUESTS ★ 27,000 STARS ★ 2,800 FORKS ★ 850 PACKAGES ON NPM

Slide 58

Slide 58 text

NATIVEFIER

Slide 59

Slide 59 text

SINDRESORHUS/AWESOME-ELECTRON

Slide 60

Slide 60 text

BAY AREA ELECTRON USER GROUP MAY 25TH @ 6:30 PM MICROSOFT SF OFFICE HTTP://WWW.MEETUP.COM/BAY-AREA-ELECTRON-USER-GROUP