How to get started with Electron

Describe essential knowledge for getting started Electron

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