Desvendando o Electron e brincando com o Polymer.

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!