Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Electron — GitHub Universe 2015

Jessica
April 25, 2016

Electron — GitHub Universe 2015

A talk covering the history and near future of Electron given at the GitHub Universe conference in October 2015 in San Francisco.

Jessica

April 25, 2016
Tweet

More Decks by Jessica

Other Decks in Programming

Transcript

  1. How people build software ! Electron Timeline 8 January 2013

    Project begins May 2014 Open sourced April 2015 Named Electron
  2. How people build software What is Electron? A framework for

    building cross platform desktop applications with web technology 9
  3. ! How people build software Electron 10 & ' WEB

    TECHNOLOGY NO NATIVE SKILLS HTML, CSS, JS Unless you want to
  4. ! How people build software Electron 14 ⚡ & LATEST

    AND GREATEST ONE BROWSER All the Chrome goodies Design once
  5. ! How people build software Electron 15 ) ' FILESYSTEM

    MODULES All of Node.js APIs npm ecosystem
  6. ! How people build software Electron 16 % * THREE

    PLATFORMS NATIVE MENUS Windows, Mac, Linux Dialogs & notifications
  7. ! How people build software Electron 17 + ' AUTOMATIC

    UPDATES WIN INSTALLERS Mac & Win with Squirrel No configuration
  8. How people build software ! The Main Process 21 Application

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

    Application Lifecycle Main Web Page Creates menu ipc dialog Node.js browser-window
  10. 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
  11. 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
  12. How people build software ! 25 Main Renderer Application Lifecycle

    Web Page Renderer Renderer Renderer The Renderer Process
  13. How people build software ! Main and Render Process Context

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

    27 Renderer Process Each tab Main Process Chrome App Chrome File Edit View
  15. 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') })
  16. How people build software ! index.html (Renderer Process) 32 <html>

    <head> <script> window.onload = function () { var fs = require('fs') var p = document.createElement('p') p.textContent = fs.readFileSync('octocat.txt') document.body.appendChild(p) } </script> </head> <body> <h1>Hello Universe</h1> <body> </html>
  17. 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
  18. 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 #