Desvendando o Electron
E brincando com o Polymer
Twitter: @raphaelpor
GitHub: @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!

Desvendando o Electron

  • 1.
    Desvendando o Electron Ebrincando 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 é? Frameworkpara criar aplicações desktop, usando tecnologias web (HTML, CSS e JavaScript).
  • 5.
  • 6.
    Para quê? Para criaro 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.
  • 9.
    Do que precisopara começar? 1. Instalar o Electron. $ npm i -g electron-prebuilt 2. Inserir um index.js.
  • 10.
  • 11.
  • 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.
  • 14.
  • 15.
    Por quê? ➔ UIpronto (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.
  • 18.
    E agora? Guia doDesenvolvedor Electron no GitHub: https://github.com/electronbrasil/guia-do-desenvolvedor Polytechnic Brazil: https://codelabs.developers.google.com/polytechnic-pt-br
  • 19.