$30 off During Our Annual Pro Sale. View Details »

How to get started with Electron

Jimmy Moon
September 19, 2015
110

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

    View Slide

  2. View Slide

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

    View Slide

  4. View Slide

  5. View Slide

  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

    View Slide

  7. Polymer Starter Kit
    https://github.com/electron-kr/electron-psk-boilerplate

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. awesome-electron by Sindre Sorhus
    https://github.com/sindresorhus/awesome-electron#open-source

    View Slide

  17. View Slide

  18. Yeoman Official Generator

    built on top of Electron
    https://github.com/yeoman/yeoman-app

    View Slide

  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

    View Slide

  20. View Slide

  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

    View Slide

  22. View Slide

  23. View Slide

  24. Desktop Environment Integration

    View Slide

  25. View Slide

  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

    View Slide

  27. Practice on embedding Node.js into Atom Editor // Speaker Deck - https://goo.gl/ENyzp9

    View Slide

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

    View Slide

  29. Practice on embedding Node.js into Atom Editor // Speaker Deck - https://goo.gl/ENyzp9

    View Slide

  30. Electron initialization for browser process

    View Slide

  31. Practice on embedding Node.js into Atom Editor // Speaker Deck - https://goo.gl/ENyzp9

    View Slide

  32. Electron event loop pseudo sequence

    View Slide

  33. View Slide

  34. Electron
    Installation
    Get Electron
    - Build with source on Mac
    - Download released files
    - electron-prebuilt

    View Slide

  35. View Slide

  36. Setup and launch app without source

    View Slide

  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

    View Slide

  38. View Slide

  39. View Slide

  40. Hello world on Electon

    View Slide

  41. View Slide

  42. View Slide

  43. View Slide

  44. View Slide

  45. eddystone-beacon-menubar-scanner - https://goo.gl/1n01iC

    View Slide

  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

    View Slide

  47. Testing your Electron apps with ChromeDriver // Speaker Deck - https://goo.gl/meIP9R

    View Slide

  48. View Slide

  49. View Slide

  50. Test Electron app with spectron and ava

    View Slide

  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

    View Slide

  52. asar

    View Slide

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

    View Slide

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

    View Slide

  55. Using generator-electron via Yeoman

    View Slide

  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

    View Slide

  57. View Slide

  58. Thanks.

    View Slide