Desvendando o Electron

Desvendando o ElectronE brincando com o Polymer

Twitter: @raphaelporGitHub: @raphaelpor

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?

O que é o Electron?

O que é?

Framework para criar aplicações desktop,

usando tecnologias web (HTML, CSS e JavaScript).

Quem o fez?

GitHub

Para quê?

Para criar o Atom, um editor escrito em Coffescript.Por isso, o Electron também é conhecido como Atom Shell.

Vantagens

➔ Shared code / UI➔ Atualizações automáticas➔ Acesso às APIs nativas➔ Fácil de integrar

Criando meu primeiro desktop app.

Do que preciso para começar?

1. Instalar o Electron.

$ npm i -g electron-prebuilt

2. Inserir um index.js.

index.js

Resultado:

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

Resultado:

Electron com Polymer.

Por quê?

➔ UI pronto (Material Design)➔ Não precisa de Polyfill, pois o Chrome dá suporte

aos WC’s.➔ Fácil de iniciar➔ Leve

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

Resultado:

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

Obrigado!