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

Desvendando o Electron

Desvendando o Electron

Desvendando o Electron e brincando com o Polymer.

5f51f5e3a3eaf72c461f8eef73be8a13?s=128

Raphael Porto

December 19, 2015
Tweet

More Decks by Raphael Porto

Other Decks in Programming

Transcript

  1. Desvendando o Electron E brincando com o Polymer Twitter: @raphaelpor

    GitHub: @raphaelpor
  2. O que veremos? 1. O que é o Electron? a.

    O que é? b. Quem o fez? c. Para quê? d. Vantagens. 2. Criando meu primeiro desktop app. a. Do que preciso? i. Instalar o Electron. ii. Inserir o index.js. b. Estrutura básica. c. Electron Quick Start. 3. Electron com Polymer. a. Por que? b. E como faz? 4. E agora?
  3. O que é o Electron?

  4. O que é? Framework para criar aplicações desktop, usando tecnologias

    web (HTML, CSS e JavaScript).
  5. Quem o fez? GitHub

  6. Para quê? Para criar o Atom, um editor escrito em

    Coffescript. Por isso, o Electron também é conhecido como Atom Shell.
  7. Vantagens ➔ Shared code / UI ➔ Atualizações automáticas ➔

    Acesso às APIs nativas ➔ Fácil de integrar
  8. Criando meu primeiro desktop app.

  9. Do que preciso para começar? 1. Instalar o Electron. $

    npm i -g electron-prebuilt 2. Inserir um index.js.
  10. index.js

  11. Resultado:

  12. Electron Quick Start # Clone do repositório $ git clone

    https://github.com/atom/electron-quick-start # Entre no diretório $ cd electron-quick-start # Instale as dependências e rode $ npm install && npm start
  13. Resultado:

  14. Electron com Polymer.

  15. Por quê? ➔ UI pronto (Material Design) ➔ Não precisa

    de Polyfill, pois o Chrome dá suporte aos WC’s. ➔ Fácil de iniciar ➔ Leve
  16. E como faz? # Clone do repositório $ git clone

    https://github.com/raphaelpor/electron-polymer-starter-kit # Entre no diretório $ cd electron-quick-start # Instale as dependências e rode $ npm install && bower install && npm start
  17. Resultado:

  18. E agora? Guia do Desenvolvedor Electron no GitHub: https://github.com/electronbrasil/guia-do-desenvolvedor Polytechnic

    Brazil: https://codelabs.developers.google.com/polytechnic-pt-br
  19. Obrigado!