Desvendando o Electron

Desvendando o Electron e brincando com o Polymer.

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!