Slide 1

Slide 1 text

EVOLUTION OF ELECTRON NODEFEST 2016

Slide 2

Slide 2 text

EVOLUTION OF ELECTRON WHO AM I ▸ 摼౮ / Cheng Zhao / υϰη̴ώδЀ ▸ Creator of Electron framework ▸ Working at GitHub ▸ GitHub: https://github.com/zcbenz

Slide 3

Slide 3 text

EVOLUTION OF ELECTRON Electron was born because of Atom editor.

Slide 4

Slide 4 text

EVOLUTION OF ELECTRON FIRST EDITION OF ATOM EDITOR ▸ A simple Cocoa app with embedded webview ▸ Only works on Mac OS X ▸ Native abilities were provided by writing bindings to Cocoa webview

Slide 5

Slide 5 text

EVOLUTION OF ELECTRON CEF BASED ATOM EDITOR ▸ The native layer was rewritten with CEF (Chromium Embedded Framework) ▸ Native abilities were provided by writing V8 bindings ▸ Used Chromium for rendering ▸ Possibility to run on all platforms

Slide 6

Slide 6 text

EVOLUTION OF ELECTRON Then Node.js was getting popular.

Slide 7

Slide 7 text

EVOLUTION OF ELECTRON PORT ATOM EDITOR TO NODE-WEBKIT ▸ Use Node.js and node-webkit APIs in Atom editor ▸ Port custom bindings to Node.js native modules ▸ This try failed

Slide 8

Slide 8 text

EVOLUTION OF ELECTRON WHY THE TRY TO USE NODE-WEBKIT FAILED ▸ node-webkit crashed a lot ▸ It was hard to convert all of Atom’s code at once ▸ node-webkit lacked lots of features

Slide 9

Slide 9 text

EVOLUTION OF ELECTRON WHY THE TRY TO USE NODE-WEBKIT FAILED ▸ node-webkit crashed a lot ▸ It was hard to convert all of Atom’s code at once ▸ node-webkit lacked lots of features SOLUTION: ▸ Hire the maintainer (me) to improve node-webkit ‣ Use a more progressive way to port Atom to node-webkit.

Slide 10

Slide 10 text

EVOLUTION OF ELECTRON NEW PLAN FOR MIGRATING ATOM TO NODE-WEBKIT CEF-based Atom Editor Add Node.js integration to CEF Atom Editor using Node.js Migrate Atom to use Node.js APIs Improve node-webkit Atom Editor running on node-webkit

Slide 11

Slide 11 text

EVOLUTION OF ELECTRON WHEN TRYING TO IMPROVE NODE-WEBKIT ▸ The architecture of node-webkit was not suitable for multi-windows apps ▸ The node-webkit project was more personal project than organization

Slide 12

Slide 12 text

EVOLUTION OF ELECTRON We need to rewrite node-webkit.

Slide 13

Slide 13 text

EVOLUTION OF ELECTRON NEW PLAN FOR MIGRATING ATOM TO NODE-WEBKIT CEF-based Atom Editor Atom Editor using Node.js Improve node-webkit Atom Editor running on node-webkit Write atom-shell atom-shell ATOM-SHELL Add Node.js integration to CEF Migrate Atom to use Node.js APIs

Slide 14

Slide 14 text

EVOLUTION OF ELECTRON THE DIFFERENCES BETWEEN ATOM-SHELL AND NODE-WEBKIT ▸ Allows running JavaScript in the main process ▸ No longer requires a powerful machine to build ▸ Changes node integration implementation to improve stability

Slide 15

Slide 15 text

EVOLUTION OF ELECTRON THE DIFFERENCES BETWEEN ATOM-SHELL AND NODE-WEBKIT ▸ Allows running JavaScript in the main process ▸ No longer requires a powerful machine to build ▸ Changes node integration implementation to improve stability IN SUMMARY: ▸ Better design ‣ Friendly to contributors

Slide 16

Slide 16 text

EVOLUTION OF ELECTRON ATOM-SHELL / ELECTRON TIMELINE 2013 atom-shell started 2014 atom-shell open sourced 2015 renamed to Electron 2016 Electron 1.0

Slide 17

Slide 17 text

EVOLUTION OF ELECTRON STARS ON GITHUB (0 TO 37607)

Slide 18

Slide 18 text

EVOLUTION OF ELECTRON WE HAVE LOTS OF CONTRIBUTORS ▸ 25 community maintainers ▸ 492 contributors ▸ Half of the changes in recent releases were from contributors ▸ (by Nov 6, 2016)

Slide 19

Slide 19 text

EVOLUTION OF ELECTRON ELECTRON TEAM GROWS

Slide 20

Slide 20 text

EVOLUTION OF ELECTRON HOW ELECTRON GROWS One major developer More users More maintainers More contributors

Slide 21

Slide 21 text

EVOLUTION OF ELECTRON HOW ELECTRON GROWS One major developer More users More maintainers More contributors Key for growth More contributors

Slide 22

Slide 22 text

EVOLUTION OF ELECTRON KEEP ATTRACTING CONTRIBUTORS ▸ Being responsive to issues and pull requests ▸ isitmaintained.com ▸ Make development easier ▸ bootstrap script ▸ Code review ▸ Refactor code for better readability ▸ …

Slide 23

Slide 23 text

THANK YOU