Conheça o Electron e aprenda como é simples desenvolver aplicações desktop apenas com HTML, CSS e Javascript.
Criando aplicações desktop comELECTRON
View Slide
SÉRGIO VILARSoftware 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ãocustomizada do Chrome + io.js#
Update transparente usando Squirrel$
Instalador para Windows%
Menus, Tray, Notifications e Dialogs nativos&
Desenvolvido e mantido pelo Github'
QUEM ESTÁ USANDO
Seu primeiro app(
$ npm install -g electron-prebuilt
package.json1 {2 "name": "my-app",3 "version": "0.1.0",4 "main": "main.js"5 }
index.html1 2 3 4 5 Hello World!6 7 8 Hello World!9 10
index.js1 var app = require('app');2 var BrowserWindow = require('browser-window'); // Window API34 app.on('window-all-closed', function() {5 app.quit();6 });78 app.on('ready', function() {9 // Cria uma nova janela10 var mainWindow = new BrowserWindow({width: 800, height: 600});1112 // Carrega o arquivo index.html13 mainWindow.loadUrl('file://' + __dirname + '/index.html');1415 });
$ electron .
Apps rodam em dois processos)
browser processio.jsmenutraydialogwindow IPCrenderer processio.jsDOMwindow
browser processwindow IPCrenderer process renderer processwindow
Comunicação entre processos*
ipc-browser.js1 var ipc = require('ipc');2 ipc.on('do-async', function(event, arg) {3 event.sender.send('async', arg);4 });56 ipc.on('sync', function(event, arg) {7 event.returnValue = 'bar';8 });
ipc-renderer.html1 2 3 4 5 IPC6 7 8 <br/>9 var ipc = require('ipc');<br/>10 var foo = ipc.sendSync('sync', 'foo'); // Síncrono<br/>11<br/>12 ipc.on('async', function(arg) {<br/>13 console.log(arg); // imprime "baz"<br/>14 });<br/>15 ipc.send('do-async', 'baz');<br/>16 17
remote.html1 2 3 4 5 IPC6 7 8 <br/>9 var remote = require('remote');<br/>10 var BrowserWindow = remote.require('browser-window');<br/>11<br/>12 var win = new BrowserWindow({ width: 800, height: 600 });<br/>13 win.loadUrl('http://vilar.cc');<br/>14 15
DEMO
Empacotando apps para produção+
$ npm install -g electron-packager
$ electron-packager . my-app —-platform=darwin —-arch=x64 —-version=0.30.2
Principais desafios,
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.rpmLinux
AppVeyorBetaOSX WindowsLinuxBeta+
$ docker pull sergiovilar/fedora-electron
$ docker pull sergiovilar/ubuntu-electron
github.com/sindresorhus/awesome-electronAWESOME ELECTRON
VALEU!vilar.cc/about