Electron @ UW Nov 2015

Transcript

1. the best way to build and ship software Electron Building desktop apps with web technology
2. the best way to build and ship software Ben Ogle 2 @benogle on github / twitter Work on Atom Engineer at GitHub Live in San Francisco
3. the best way to build and ship software Atom 3 Open Source Text Editor http://atom.io/ — https://github.com/atom/atom
4. the best way to build and ship software 4 Atom is a Desktop App…
5. the best way to build and ship software … built on web technologies 5
6. the best way to build and ship software Desktop App Power 6 Can access the file system Atom A Website Can access the clipboard Can adjust the menus Can load native modules Can integrate with the OS ! x Can access the file system Can access the clipboard Can adjust the menus Can load native modules Can integrate with the OS ! ! ! ! x x x x
7. the best way to build and ship software Atom is built on Electron 7 Atom Electron http://electron.atom.io/ — https://github.com/atom/electron
8. the best way to build and ship software What is Electron? 8 Atom Electron http://electron.atom.io/ — https://github.com/atom/electron
9. the best way to build and ship software What is Electron? 9 JavaScript, HTML, and CSS Electron http://electron.atom.io/ — https://github.com/atom/electron Tool for building cross-platform native apps with web technology
10. the best way to build and ship software What is Electron? 10 Electron http://electron.atom.io/ — https://github.com/atom/electron OS JavaScript, HTML, and CSS Tool for building cross-platform native apps with web technology
11. the best way to build and ship software How does Electron work? 11 JavaScript, HTML, and CSS Chromium node.js Electron OS Electron = Chromium + node.js
12. the best way to build and ship software What has been made with Electron? 12
13. the best way to build and ship software Electron-based Text Editors 13 Microsoft Visual Studio Code GitHub Atom Facebook Nuclide
14. the best way to build and ship software Electron-based Robots 14 The Jibo - https://www.jibo.com/
15. the best way to build and ship software Electron-based Video Game Editor 15 Fireball - http://fireball-x.com/en/
16. the best way to build and ship software Electron-based Chat Client 16 Slack (for Windows!) — https://slack.com/apps
17. the best way to build and ship software Electron-based Emoji Searcher 17 Mojibar by @muan - https://github.com/muan/mojibar
18. the best way to build and ship software More Examples 18 https://electron.atom.io https://github.com/sindresorhus/awesome-electron
19. the best way to build and ship software Lets Make an App! 19 Quick Start - https://github.com/atom/electron-quick-start git clone git@github.com:atom/electron-quick-start.git cd electron-quick-start npm install npm start
20. the best way to build and ship software Anatomy of the electron-quick-start 20 Quick Start - https://github.com/atom/electron-quick-start
21. the best way to build and ship software Anatomy of an Electron App 21 Main Process /src/main Renderer Process /src/renderer IPC Renderer Process /src/renderer Simple Sample - https://github.com/electronjs/electron-sample
22. the best way to build and ship software Anatomy of the electron-quick-start 22 Quick Start - https://github.com/atom/electron-quick-start Main Process Renderer Process
23. the best way to build and ship software Main Process is Master of Puppets 23 Main Process /src/main Renderer Process /src/renderer IPC Renderer Process /src/renderer Quick Start - https://github.com/atom/electron-quick-start
24. the best way to build and ship software Main Process is Master of Puppets 24 Main Process /src/main Renderer Process /src/renderer IPC Renderer Process /src/renderer Start App Quick Start - https://github.com/atom/electron-quick-start
25. the best way to build and ship software Main Process is Master of Puppets and Highlander 25 Main Process /src/main Renderer Process /src/renderer IPC Renderer Process /src/renderer Start App Quick Start - https://github.com/atom/electron-quick-start
26. the best way to build and ship software Renderer process renders HTML/CSS 26 Main Process /src/main Renderer Process /src/renderer Renderer Process /src/renderer Start App new BrowserWindow(‘index.html’) Quick Start - https://github.com/atom/electron-quick-start
27. the best way to build and ship software Renderer process renders HTML/CSS 27 Main Process /src/main Renderer Process /src/renderer Renderer Process /src/renderer Start App new BrowserWindow() new BrowserWindow() Quick Start - https://github.com/atom/electron-quick-start
28. the best way to build and ship software Each window is a renderer process 28 Quick Start - https://github.com/atom/electron-quick-start Renderer Process Renderer Process
29. the best way to build and ship software Processes can communicate via IPC IPC 29 Main Process /src/main Renderer Process /src/renderer Renderer Process /src/renderer Start App menuItemClicked() quit() Quick Start - https://github.com/atom/electron-quick-start
30. the best way to build and ship software Show me the code. 30
31. the best way to build and ship software 31 Minimal main process code Quick Start - https://github.com/atom/electron-quick-start
32. the best way to build and ship software 32 Minimal renderer process code Quick Start - https://github.com/atom/electron-quick-start
33. the best way to build and ship software 33 Minimal renderer process code Quick Start - https://github.com/atom/electron-quick-start OMG node
34. the best way to build and ship software 34 Now you can write an Electron app
35. the best way to build and ship software The quick start does not… 35 Package your app for distribution Compile popular languages (Coffee, TypeScript, Babel, SCSS, Less) Help you test your app Properly install native modules Deal with auto updates
36. the best way to build and ship software Community modules to the rescue! 36 electron-packager - Create .app and .exes electron-rebuild - Rebuild native modules electron-compile - Compile Coffee, etc to JS electron-jasmine - Test runner electron-mocha - Another test runner
37. the best way to build and ship software Community modules to the rescue! 37 electron-packager - Create .app and .exes electron-rebuild - Rebuild native modules electron-compile - Compile Coffee, etc to JS electron-jasmine - Test runner electron-mocha - Another test runner But composing them into is hard
38. the best way to build and ship software A more robust example 38 Sample - https://github.com/electronjs/electron-sample git clone git@github.com:electronjs/electron-sample.git cd electron-sample script/bootstrap script/run script/test script/build
39. the best way to build and ship software Anatomy of the electron-sample 39 Sample - https://github.com/electronjs/electron-sample Main Process Renderer Process
40. the best way to build and ship software 40 https://github.com/electronjs/electron-sample
41. the best way to build and ship software 41
42. the best way to build and ship software Let’s detect some cat faces. 42
43. the best way to build and ship software KittyDetect 43 Cat face detection demo - https://github.com/benogle/kitty-detect-app Uses the kittydar node module - https://github.com/harthur/kittydar
44. the best way to build and ship software Now let’s draw. 44
45. the best way to build and ship software Curve App 45 Open Source Vector Drawing tool — https://github.com/benogle/curve-app Download for Mac and Windows — https://github.com/benogle/curve-app/releases
46. the best way to build and ship software Curve 46 Open Source Vector Drawing library - https://github.com/benogle/curve
47. the best way to build and ship software Step-by-step Curve tutorial 47 https://github.com/benogle/curve-basic
48. the best way to build and ship software Electron tooling will get better soon(ish) 48
49. the best way to build and ship software 49 Resources Samples Curve: Vector drawing tool — https://github.com/benogle/curve-app ; Step by step: https://github.com/benogle/curve-basic Atom — http://atom.io/ ; Repo: https://github.com/atom/atom Quick Start — https://github.com/atom/electron-quick-start Electron — http://electron.atom.io/ ; Repo: https://github.com/atom/electron KittyDetect: Cat face detection sample — https://github.com/benogle/kitty-detect-app Electron resources — https://github.com/sindresorhus/awesome-electron More samples of API usage — https://github.com/hokein/electron-sample-apps From the community Ben Ogle https://github.com/benogle ogle.ben@gmail.com Basic Sample — https://github.com/electronjs/electron-sample