10 things to know about Electron

Transcript

1. 1.

   10 THINGS TO KNOW ABOUT ELECTRON

2. 2.

   KEVIN SAWICKI GITHUB @KEVINSAWICKI KEVIN@GITHUB.COM

3. 3.

   None
4. 4.

   WHAT IS ELECTRON? #1

5. 5.

   BUILD CROSS PLATFORM DESKTOP APPS WITH WEB TECHNOLOGIES http://electron.atom.io WHAT

   IS ELECTRON?
6. 6.

   None
7. 7.

   None
8. 8.

   5.10 49.0

9. 9.

   None
10. 10.

    WHO IS ELECTRON FOR? #2

11. 11.

    IF YOU CAN BUILD A WEBSITE, YOU CAN BUILD A

    DESKTOP APP
12. 12.

    FREE, OPEN SOURCE STARTED BY GITHUB RELEASED 02/2014

13. 13.

    THE HARD PARTS MADE EASY

14. 14.

    HOW DOES ELECTRON WORK? #3

15. 15.

    main process

16. 16.

    main process node

17. 17.

    main process menu tray dialog node

18. 18.

    main process menu tray dialog window renderer process node ipc

19. 19.

    main process menu tray dialog window renderer process node DOM

    node ipc
20. 20.

    main process menu tray dialog window window window renderer process

    node DOM renderer process renderer process node DOM node DOM node ipc
21. 21.

    HOW DOES YOUR ELECTRON WORK? #4

22. 22.

    ELECTRON IS NOT PRESCRIPTIVE

23. 23.

    None
24. 24.

    REACT? BABEL? BROWSERIFY? GO FOR IT!

25. 25.

    ANGULAR? BOOTSTRAP? WEBPACK? GO FOR IT!

26. 26.

    OR ENJOY THE PURITY OF CHROME

27. 27.

    CUSTOM ELEMENTS? CSS VARIABLES? ES6? GO FOR IT!

28. 28.

    USE ANY OF THE 273,000 PACKAGES ON NPM

29. 29.

    YOU CHOOSE WHEN TO UPGRADE

30. 30.

    ELECTRON APPS FEEL NATIVE #5

31. 31.

    None
32. 32.

    TRAY API

33. 33.

    TRAY API FRAMELESS WINDOW

34. 34.

    TRAY API FRAMELESS WINDOW TRANSPARENT WINDOW

35. 35.

    TRAY API FRAMELESS WINDOW NOTIFICATIONS TRANSPARENT WINDOW

36. 36.

    TRAY API FRAMELESS WINDOW NOTIFICATIONS PHOTON CSS TOOLKIT TRANSPARENT WINDOW

37. 37.

    None
38. 38.

    None
39. 39.

    ★ TAKE SCREENSHOTS ★ ACCESS MICROPHONE AND CAMERA ★ NATIVE

    OPEN, SAVE, MESSAGE DIALOGS ★ ADD CONTEXT AND SYSTEM MENUS ★ REGISTER GLOBAL KEYBOARD SHORTCUTS ★ PREVENT SLEEP MODE ★ REPORT CRASHES
40. 40.

    ELECTRON MAKES DEBUGGING EASY #6

41. 41.

    JAVASCRIPT DEBUGGER

42. 42.

    RENDER TIMELINE

43. 43.

    HEAP SNAPSHOTS

44. 44.

    BUNDLE AND SHIP ADDITIONAL EXTENSIONS

45. 45.

    ELECTRON CAN BE TEST DRIVEN #7

46. 46.

    ELECTRON SUPPORTS WEBDRIVER & CHROMEDRIVER

47. 47.

    WEBDRIVER IS AN OPEN SOURCE TOOL FOR AUTOMATED TESTING OF

    WEB APPS ACROSS MANY BROWSERS. ChromeDriver docs WHAT IS WEBDRIVER?
48. 48.

    CHROMEDRIVER IS A STANDALONE SERVER WHICH IMPLEMENTS WEBDRIVER'S WIRE PROTOCOL

    FOR CHROMIUM. ChromeDriver docs WHAT IS CHROMEDRIVER?
49. 49.

    None
50. 50.

    ELECTRON APPS ARE OUT THERE #8

51. 51.

    SLACK NYLAS N1 ATOM VISUAL STUDIO CODE

52. 52.

    WEBTORRENT DESKTOP

53. 53.

    ★ Streaming torrent client implemented in JavaScript ★ Uses WebRTC

    for peer connections ★ Free and open source
54. 54.

    JIBO

55. 55.

    None
56. 56.

    ELECTRON HAS AN AMAZING COMMUNITY #9

57. 57.

    ★ 350 CONTRIBUTORS ★ 1,600 PULL REQUESTS ★ 27,000 STARS

    ★ 2,800 FORKS ★ 850 PACKAGES ON NPM
58. 58.

    NATIVEFIER

59. 59.

    SINDRESORHUS/AWESOME-ELECTRON

60. 60.

    BAY AREA ELECTRON USER GROUP MAY 25TH @ 6:30 PM

    MICROSOFT SF OFFICE HTTP://WWW.MEETUP.COM/BAY-AREA-ELECTRON-USER-GROUP
61. 61.

    ELECTRON IS GOING 1.0 #10

62. 62.

    API STABILITY

63. 63.

    MORE APIS

64. 64.

    BETTER DOCS

65. 65.

    BETTER TOOLS

66. 66.

    None
67. 67.

    THANKS! HTTP://ELECTRON.ATOM.IO HTTP://GITHUB.COM/ELECTRON @ELECTRONJS