Slide 1

Slide 1 text

Criando aplicações desktop com ELECTRON

Slide 2

Slide 2 text

SÉRGIO VILAR Software Engineer @ HackHands

Slide 3

Slide 3 text

Multiplataforma   sempre foi um problema !

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

electron.atom.io

Slide 6

Slide 6 text

ELECTRON • Chamado inicialmente de “Atom Shell” • Criado com objetivo de desenvolver o Atom Editor

Slide 7

Slide 7 text

Apps escritos em   HTML, CSS e Javascript "

Slide 8

Slide 8 text

Apps rodam em uma versão customizada do Chrome + io.js #

Slide 9

Slide 9 text

Update transparente  usando Squirrel $

Slide 10

Slide 10 text

Instalador para Windows %

Slide 11

Slide 11 text

Menus, Tray, Notiﬁcations   e Dialogs nativos &

Slide 12

Slide 12 text

Desenvolvido e mantido  pelo Github '

Slide 13

Slide 13 text

QUEM ESTÁ USANDO

Slide 14

Slide 14 text

Seu primeiro app (

Slide 15

Slide 15 text

$ npm install -g electron-prebuilt

Slide 16

Slide 16 text

package.json 1 { 2 "name": "my-app", 3 "version": "0.1.0", 4 "main": "main.js" 5 }

Slide 17

Slide 17 text

index.html 1 2 3 4 5 Hello World! 6 7 8

Hello World!

9 10

Slide 18

Slide 18 text

index.js 1 var app = require('app'); 2 var BrowserWindow = require('browser-window'); // Window API 3 4 app.on('window-all-closed', function() { 5 app.quit(); 6 }); 7 8 app.on('ready', function() { 9 // Cria uma nova janela 10 var mainWindow = new BrowserWindow({width: 800, height: 600}); 11 12 // Carrega o arquivo index.html 13 mainWindow.loadUrl('file://' + __dirname + '/index.html'); 14 15 });

Slide 19

Slide 19 text

$ electron .

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Apps rodam em   dois processos )

Slide 22

Slide 22 text

browser process io.js menu tray dialog window   IPC renderer process io.js DOM window

Slide 23

Slide 23 text

browser process window   IPC renderer process renderer process window

Slide 24

Slide 24 text

Comunicação entre  processos *

Slide 25

Slide 25 text

ipc-browser.js 1 var ipc = require('ipc'); 2 ipc.on('do-async', function(event, arg) { 3 event.sender.send('async', arg); 4 }); 5 6 ipc.on('sync', function(event, arg) { 7 event.returnValue = 'bar'; 8 });

Slide 26

Slide 26 text

ipc-renderer.html 1 2 3 4 5 IPC 6 7 8 9 var ipc = require('ipc'); 10 var foo = ipc.sendSync('sync', 'foo'); // Síncrono 11 12 ipc.on('async', function(arg) { 13 console.log(arg); // imprime "baz" 14 }); 15 ipc.send('do-async', 'baz'); 16 17

Slide 27

Slide 27 text

remote.html 1 2 3 4 5 IPC 6 7 8 9 var remote = require('remote'); 10 var BrowserWindow = remote.require('browser-window'); 11 12 var win = new BrowserWindow({ width: 800, height: 600 }); 13 win.loadUrl('http://vilar.cc'); 14 15

Slide 28

Slide 28 text

DEMO

Slide 29

Slide 29 text

Empacotando apps  para produção +

Slide 30

Slide 30 text

$ npm install -g electron-packager

Slide 31

Slide 31 text

$ electron-packager . my-app —-platform=darwin —-arch=x64 —-version=0.30.2

Slide 32

Slide 32 text

Principais desaﬁos ,

Slide 33

Slide 33 text

Distribuir e atualizar  para todas plataformas +

Slide 34

Slide 34 text

Updates para OSX   requerem Codesign $

Slide 35

Slide 35 text

• MyApp.app • MyApp.exe • MyApp_linux_trusty_amd64.deb • MyApp_linux_trusty_i386.deb • MyApp_linux_utopic_amd64.deb • MyApp_linux_utopic_i386.deb • MyApp_linux_vivid_amd64.deb • MyApp_linux_vivid_i386.deb • MyApp_linux_amd64.rpm • MyApp_linux_i386.rpm Linux

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

AppVeyor Beta OSX Windows Linux Beta +

Slide 39

Slide 39 text

$ docker pull sergiovilar/fedora-electron

Slide 40

Slide 40 text

$ docker pull sergiovilar/ubuntu-electron

Slide 41

Slide 41 text

github.com/sindresorhus/awesome-electron AWESOME ELECTRON

Slide 42

Slide 42 text

VALEU! vilar.cc/about