O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Electron

654 visualizações

Publicada em

Introduction to electron

Publicada em: Tecnologia

Electron

  1. 1. Electron
  2. 2. (introduction to) Electron
  3. 3. What is Electron?
  4. 4. “Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS.” http://electron.atom.io/
  5. 5. Key ideas * If you can build a website, you can build a desktop app
  6. 6. Key ideas * If you can build a website, you can build a desktop app * Cross platform: write your application once and run it in Mac, Windows and Linux
  7. 7. Key ideas * If you can build a website, you can build a desktop app * Cross platform: write your application once and run it in Mac, Windows and Linux * The hard parts made easy - Simplify packaging, installation and updates - Support for native menus, notifications and dialogs - App crash reporting
  8. 8. Key ideas * If you can build a website, you can build a desktop app * Cross platform: write your application once and run it in Mac, Windows and Linux * The hard parts made easy - Simplify packaging, installation and updates - Support for native menus, notifications and dialogs - App crash reporting * Open source project: maintained by github + active community
  9. 9. History 2013: Github starts Atom project May 2014: Atom is open sourced (including Atom Shell) Apr 2015: Atom Shell is named Electron May 2016: Electron v1.0 is released
  10. 10. Which apps are built using electron?
  11. 11. http://electron.atom.io/apps/
  12. 12. How does Electron work?
  13. 13. main process Image from: https://medium.com/developers-writing/building-a-desktop-application-with-electron-204203eeb658 node.js, BrowserWindow dialog, menu, ipc
  14. 14. main process + renderer process Image from: https://medium.com/developers-writing/building-a-desktop-application-with-electron-204203eeb658 node.js, ipc, DOM
  15. 15. Let’s build our first Electron app!
  16. 16. friday-talk-electron-app/ |-- package.json |-- main.js |-- index.html
  17. 17. package.json { "name": "friday-talk-electron-app", "version": "1.0.0", "main": "main.js" }
  18. 18. main.js
  19. 19. index.html
  20. 20. electron-prebuilt is a npm module that contains pre-compiled versions of Electron Install & Execute > npm install --save electron-prebuilt
  21. 21. update package.json to add start script "scripts": { "start": "electron ." } electron-prebuilt is a npm module that contains pre-compiled versions of Electron Install & Execute > npm install --save electron-prebuilt
  22. 22. update package.json to add start script "scripts": { "start": "electron ." } electron-prebuilt is a npm module that contains pre-compiled versions of Electron Install & Execute > npm start > npm install --save electron-prebuilt
  23. 23. and...
  24. 24. What else can we do with Electron?
  25. 25. Native menues
  26. 26. main.js
  27. 27. Native dialogs
  28. 28. index.html
  29. 29. index.js
  30. 30. main.js
  31. 31. Native notifications
  32. 32. index.html
  33. 33. Desktop Environment Integration http://electron.atom.io/docs/tutorial/desktop-environment-integration/
  34. 34. More...
  35. 35. Other Electron modules ● Tray ● Clipboard ● Shell ● CrashReporter API demos: https://github.com/electron/electron-api-demos
  36. 36. Some final ideas
  37. 37. * You can use any js library for the renderer process (angular, react, jquery, etc.) * Node modules are available in both (main + renderer process) * Renderer process does not always need to display a window, it can be used for background processing * Follow native look and feel across the app (ex. fonts, cursors, menu options) * Best practices? Storage? Drawbacks?
  38. 38. Resources
  39. 39. Links Code examples https://github.com/virginia-rodriguez/friday-talk-electron-app Building a desktop application with Electron: A detailed guide on building your very own sound machine using JavaScript, Node.js and Electron https://medium.com/developers-writing/building-a-desktop-application-with-electron-204203eeb658 Awesome Electron: Useful resources for creating apps with Electron https://github.com/sindresorhus/awesome-electron Photon: The fastest way to build beautiful Electron apps using simple HTML and CSS http://photonkit.com/
  40. 40. Talks The New Desktop: Electron, React, & Pixel-Perfect Native-Feeling Experiences by Evan Morikawa https://www.youtube.com/watch?v=jRPUB-D1Wx0 Electron: Desktop Apps with Web Languages by Jessica Lord https://www.youtube.com/watch?v=_dkeD3OZ218 Cross-platform desktop apps using Electron by David Neal https://www.youtube.com/watch?v=zEAoCCBCuLk
  41. 41. Links about packaging and distribution electron-packager https://github.com/electron-userland/electron-packager Distributing Electron apps http://electron.rocks/distributing-electron-apps/ Mac App Store Submission Guide http://electron.atom.io/docs/tutorial/mac-app-store-submission-guide/
  42. 42. Thanks :)

×