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

How to get started with Electron

687ac25540fe35fcb5e828f75c4a6079?s=47 Jimmy Moon
September 19, 2015
65

How to get started with Electron

Describe essential knowledge for getting started Electron

687ac25540fe35fcb5e828f75c4a6079?s=128

Jimmy Moon

September 19, 2015
Tweet

Transcript

  1. ੌ۩౟ۿ द੘ೠ׮Ҋ ੹೧ۄ how to get started with Electron @ragingwind

    electron-kr
  2. None
  3. Build - Electron: Desktop Apps with Web Languages - http://goo.gl/K6pAiO

  4. None
  5. None
  6. Web Tech Use HTML, CSS, and JavaScript with Chromium and

    Node.js to build your app - Any Web Frameworks and Libraries - React, AngularJS, Polymer, WinJS, jQuery, Bootstrap, Photonkit … - Node integration issue [1], [2] - Latest Chromium via libchromiumcontent - Chromium Content API, Webkit API(V8) - Bumped new stable Chrome version within one or two weeks after release - Chromium: v47.0.2526.110, V8: v4.7.80.27 - Stable and Latest APIs on Node.js - Upgrading after a month to avoid bugs - Ready to latest features going with V8 upgrades - v5.1.1 (Node.js stable v5.4.1) - ES2015 shipping features is default - Supporting from over 200,000 npm packages by Electron v0.36.4 -2016/01/16
  7. Polymer Starter Kit https://github.com/electron-kr/electron-psk-boilerplate

  8. WinJS + React https://github.com/felixrieseberg/electron-windows-sample

  9. Photonkit http://react-photonkit.github.io

  10. Eddystone (Beacon) https://goo.gl/cCsUIj

  11. Open Source Electron is open source; maintained by GitHub and

    an active community - Github !!! - Supporting from powerful-big-vendors - Many of Open source apps as a sample - Got blessed by npm module developers
  12. None
  13. None
  14. None
  15. None
  16. awesome-electron by Sindre Sorhus https://github.com/sindresorhus/awesome-electron#open-source

  17. None
  18. Yeoman Official Generator
 built on top of Electron https://github.com/yeoman/yeoman-app

  19. Cross Platform Electron apps build and run on Mac, Windows,

    and Linux - One-stop build for Electron apps - Auto update
 except Linux so far - MAS (Mac App Store) Submission - ARM devices support - Platform features
  20. None
  21. - Squirrel/Squirrel.Windows · GitHub - https://goo.gl/O6nvbb
 - Squirrel/Squirrel.Mac: Cocoa framework

    for updating OS X apps - https://goo.gl/DvnGsa - atom/grunt-electron-installer: Grunt plugin to build Windows installers for Electron apps - https://goo.gl/1KerLO
  22. None
  23. None
  24. Desktop Environment Integration

  25. None
  26. Electron Somethings we should know - Node.js, npm - Web

    technologies - Platform features - Electron Architecture - Running Electron app - Debugging and Testing Electron app - Packaging Electron app
  27. Practice on embedding Node.js into Atom Editor // Speaker Deck

    - https://goo.gl/ENyzp9
  28. Build - Electron: Desktop Apps with Web Languages - https://goo.gl/uoSpk2

  29. Practice on embedding Node.js into Atom Editor // Speaker Deck

    - https://goo.gl/ENyzp9
  30. Electron initialization for browser process

  31. Practice on embedding Node.js into Atom Editor // Speaker Deck

    - https://goo.gl/ENyzp9
  32. Electron event loop pseudo sequence

  33. None
  34. Electron Installation Get Electron - Build with source on Mac

    - Download released files - electron-prebuilt
  35. None
  36. Setup and launch app without source

  37. Electron, Hello Hello! - Project tree of Electron App ȍȇȇ

    index.js ȍȇȇ package.json ȍȇȇ index.html ȍȇȇ index.css ȍȇȇ license Ȍȇȇ readme.md - index.js is MUST. 
 Entry point of Electron app
 - package.json is SHOULD. 
 For dependencies and project info - index.html is.
 for view of Electron app but not requirement
  38. None
  39. None
  40. Hello world on Electon

  41. None
  42. None
  43. None
  44. None
  45. eddystone-beacon-menubar-scanner - https://goo.gl/1n01iC

  46. - Inspector via Chrome Dev Tools - node-inspector for Debugging


    on Main Process - console.log or LOG(INFO) - Automated testing - Chrome Driver for Electron - spectron Electron Testing npm test
  47. Testing your Electron apps with ChromeDriver // Speaker Deck -

    https://goo.gl/meIP9R
  48. None
  49. None
  50. Test Electron app with spectron and ava

  51. Electron Packaging Ready to shipping - Packaging via electron-packager -

    Installer via electron-builder - Signing helper for MAS - App packaging with asar - Like tar but no extract, random access - Avoiding of exposing app’s source code - Code protection? - Not supporting a way of code protection on Electron - mksnapshot, (V8) Snapshot for Electron - Packaging with asar - Using commercial software for protection - Using edge.js and edge-atom-shell for Windows (Slack) - Using dynamic library loader via node-ffi
  52. asar

  53. electron-packager . newapp --out=dist --ignore='^/dist$' --prune --asar --all -- version=0.36.5

  54. Life is short, boiler-platings are too much

  55. Using generator-electron via Yeoman

  56. - Well-structured project - Up-to-date features and updates - Neat(-est)

    source code of boilerplate - Prepared configure and scripts sindresorhus/generator-electron: Scaffold out an Electron app boilerplate - https://goo.gl/rMOGCp
  57. None
  58. Thanks.