AUGM 2017 Electron talk

Transcript

1. ELECTRON Jr / Neo 2017-11-18 AUGM jr@neo.kn
2. What is Electron ?
3. V8 Chromium Node https://electronjs.org
4. V8 Chromium Node Electron = + +
5. Chromium Node Many Packages Full-Stack Browser Beautiful Design and Interaction With HTML, CSS, JavaScript
7. – Anonymous “How to Start ?”
8. REQUIREMENT https://nodejs.org Install nodejs with npm
9. Node.js Package Manager Node.js Installer will include it e.g. Node.js v8.9.1 withnpm v5.5.1
 Node.js v6.12.0 with npm v3.10.10
10. SUGGESTION • HomeBrew: package manager for macOS • nvm: node version manager • Yarn: faster then npm
11. QUICK START https://github.com/neokn/augm2017-electron-quick-start
12. QUICK START your-repo/ ├──package.json
 └──app/ ├── package.json ├── index.js └── index.html
13. QUICK START your-repo/ ├──package.json
 └──app/ ├── package.json ├── index.js └── index.html For development
14. QUICK START your-repo/ ├──package.json
 └──app/ ├── package.json ├── index.js └── index.html Will Pack into Electron
15. QUICK START your-repo/ ├──package.json
 └──app/ ├── package.json ├── index.js └── index.html For distribution
16. QUICK START • npm install • npm run start • npm run dist
17. IPC inter-process communication
18. Chromium Node ipcMain ipcRenderer
19. Chromium Node ipcRenderer.send('message') ipcMain.on('message', (e, v) => { e.sender.send('reply', 'pong') })
20. Chromium Node ipcRenderer.send('message') ipcMain.on('message', (e, v) => { e.sender.send('reply', 'pong') })
21. Chromium Node ipcMain.on('message', (e, v) => { e.sender.send('reply', 'pong') }) ipcRenderer.on('reply', (e, v) => { alert(v) })
22. Chromium Node ipcMain.on('message', (e, v) => { e.sender.send('reply', 'pong') }) ipcRenderer.on('reply', (e, v) => { alert(v) })
23. Chromium Node ipcMain.on('message', (e, v) => { e.sender.send('reply', 'pong') }) ipcRenderer.on('reply', (e, v) => { alert(v) })
24. DEMO
25. DISTRIBUTION
26. DISTRIBUTION • Install electron-builder package • Write electron-builder.json
27. DEMO
28. MOZLI
29. MOZLI MozJpeg + Guetzli https://github.com/google/guetzli https://github.com/mozilla/mozjpeg
30. PROS & CONS
31. PROS • Easy to Development • Cross-platform Distribution
32. CONS • Application Size > 100MB • Source Code Protection (.asar is easy to extract)
33. THANKS