Desenvolvendo Aplicações Desktop com Electron

Criando aplicações desktop com ELECTRON

SÉRGIO VILAR Software Engineer @ HackHands

Multiplataforma   sempre foi um problema !

electron.atom.io

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

Apps escritos em   HTML, CSS e Javascript "

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

Update transparente  usando Squirrel $

Instalador para Windows %

Menus, Tray, Notiﬁcations   e Dialogs nativos &

Desenvolvido e mantido  pelo Github '

QUEM ESTÁ USANDO

Seu primeiro app (

$ npm install -g electron-prebuilt

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

index.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta
charset="UTF-8"> 5 <title>Hello World!</title> 6 </head> 7 <body> 8 <h1>Hello World!</h1> 9 </body> 10 </html>

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 });

$ electron .

Apps rodam em   dois processos )

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

browser process window   IPC renderer process renderer process window

Comunicação entre  processos *

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 });

ipc-renderer.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta
charset="UTF-8"> 5 <title>IPC</title> 6 </head> 7 <body></body> 8 <script type="text/javascript"> 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 </script> 17 </html>

remote.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta
charset="UTF-8"> 5 <title>IPC</title> 6 </head> 7 <body></body> 8 <script type="text/javascript"> 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 </script> 15 </html>

Empacotando apps  para produção +

$ npm install -g electron-packager

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

Principais desaﬁos ,

Distribuir e atualizar  para todas plataformas +

Updates para OSX   requerem Codesign $

• 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

AppVeyor Beta OSX Windows Linux Beta +

$ docker pull sergiovilar/fedora-electron

$ docker pull sergiovilar/ubuntu-electron

github.com/sindresorhus/awesome-electron AWESOME ELECTRON

VALEU! vilar.cc/about

Desenvolvendo Aplicações Desktop com Electron

Desenvolvendo Aplicações Desktop com Electron

More Decks by Sérgio Vilar

Other Decks in Programming

Featured

Transcript