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

How to get started with Electron

Jimmy Moon
September 19, 2015
85

How to get started with Electron

Describe essential knowledge for getting started Electron

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.