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

Electron — GitHub Universe 2015

Jessica
April 25, 2016
Programming
0
140

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

See All by Jessica
Building up the Electron Project: Team & Community Engineering
jllord
0
130
Scale Down, People Up
jllord
3
240
OMG Spreadsheets
jllord
0
180
Render 2017
jllord
0
160
Electron: A Tale of Two Processes
jllord
0
310
Nativize is the new Normalize
jllord
5
560
Electron 1.0 at GitHub Satellite, Amsterdam 2016
jllord
0
110
Git-it, Share it
jllord
1
520

Other Decks in Programming

See All in Programming
DevFest Tokyo 2025 - Flutter のアプリアーキテクチャ現在地点
wasabeef
5
900
CQRS+ES の力を使って効果を感じる / Feel the effects of using the power of CQRS+ES
seike460
PRO
0
120
プロダクトの品質に コミットする / Commit to Product Quality
pekepek
2
770
range over funcの使い道と非同期N+1リゾルバーの夢 / about a range over func
mackee
0
110
KubeCon + CloudNativeCon NA 2024 Overview at Kubernetes Meetup Tokyo #68 / amsy810_k8sjp68
masayaaoyama
0
250
【re:Growth 2024】 Aurora DSQL をちゃんと話します！
maroon1st
0
770
「Chatwork」Android版アプリを 支える単体テストの現在
okuzawats
0
180
急成長期の品質とスピードを両立するフロントエンド技術基盤
soarteclab
0
930
見えないメモリを観測する: PHP 8.4 `pg_result_memory_size()` とSQL結果のメモリ管理
kentaroutakeda
0
320
テストコード文化を0から作り、変化し続けた組織
kazatohiei
2
1.5k
複雑な仕様に立ち向かうアーキテクチャ
myohei
0
170
return文におけるstd::moveについて
onihusube
1
1k

Featured

See All Featured
Adopting Sorbet at Scale
ufuk
73
9.1k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Unsuck your backbone
ammeep
669
57k
How To Stay Up To Date on Web Technology
chriscoyier
789
250k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
17
2.3k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.1k

Transcript

  1. How people build software ! " Electron GitHub Universe 2015

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

    2 #

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

    $

  4. How people build software Electron Origins 4 $

  5. How people build software Atom An editor built with web

    technology 5 %

  6. ! How people build software Finding the Right Fit 6

    CEF NW.JS ELECTRON

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

    nw.js 7 $

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

    Project begins May 2014 Open sourced April 2015 Named Electron

  9. How people build software What is Electron? A framework for

    building cross platform desktop applications with web technology 9

  10. ! How people build software Electron 10 & ' WEB

    TECHNOLOGY NO NATIVE SKILLS HTML, CSS, JS Unless you want to

  11. How people build software How does Electron? Chromium web rendering

    and embedded Node.js 11

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

    update 12

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

    JavaScript engine 13

  14. ! How people build software Electron 14 ⚡ & LATEST

    AND GREATEST ONE BROWSER All the Chrome goodies Design once

  15. ! How people build software Electron 15 ) ' FILESYSTEM

    MODULES All of Node.js APIs npm ecosystem

  16. ! How people build software Electron 16 % * THREE

    PLATFORMS NATIVE MENUS Windows, Mac, Linux Dialogs & notifications

  17. ! How people build software Electron 17 + ' AUTOMATIC

    UPDATES WIN INSTALLERS Mac & Win with Squirrel No configuration

  18. How people build software Using Electron Understanding the components 18

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

    Renderer 19

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

    Lifecycle Main

  21. How people build software ! The Main Process 21 Application

    Lifecycle Main menu ipc dialog Node.js browser-window

  22. How people build software ! The Main Process 22 Renderer

    Application Lifecycle Main Web Page Creates menu ipc dialog Node.js browser-window

  23. 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

  24. 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

  25. How people build software ! 25 Main Renderer Application Lifecycle

    Web Page Renderer Renderer Renderer The Renderer Process

  26. How people build software ! Main and Render Process Context

    26 Chrome File Edit View Main Process Chrome App

  27. How people build software ! Main and Render Process Context

    27 Renderer Process Each tab Main Process Chrome App Chrome File Edit View

  28. How people build software Example A minimal Electron application 28

    #

  29. How people build software ! Minimal Electron Application 29 package.json

    main.js index.html

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

    }

  31. 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') })

  32. 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>

  33. How people build software ! Global Electron 33 npm install

    -g electron-prebuilt electron .

  34. How people build software ! Example App 34

  35. How people build software ! Example App 35

  36. How people build software 36 , Apps on Electron Companies

    and open source developers

  37. How people build software ! Companies Building on Electron 37

  38. How people build software ! Open Source Projects on Electron

    38 github.com/muan/mojibar

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

    on Electron

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

    40 -

  41. How people build software API 1.0 Stable and standardized 41

    #

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

    support 42 #

  43. How people build software Documentation Interactive API Electron application 43

    .

  44. How people build software Chrome & Node Always updating 44

    &

  45. How people build software Community Support and enable tooling 45

    /

  46. 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

  47. 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 #

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