Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Desenvolvendo Aplicações Desktop com Electron

Desenvolvendo Aplicações Desktop com Electron

Conheça o Electron e aprenda como é simples desenvolver aplicações desktop apenas com HTML, CSS e Javascript.

Fc9eb764fbfae2be2e66da4f3ce62008?s=128

Sérgio Vilar

October 01, 2015
Tweet

Transcript

  1. Criando aplicações desktop com ELECTRON

  2. SÉRGIO VILAR Software Engineer @ HackHands

  3. Multiplataforma 
 sempre foi um problema !

  4. None
  5. electron.atom.io

  6. ELECTRON • Chamado inicialmente de “Atom Shell” • Criado com

    objetivo de desenvolver o Atom Editor
  7. Apps escritos em 
 HTML, CSS e Javascript "

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

    #
  9. Update transparente
 usando Squirrel $

  10. Instalador para Windows %

  11. Menus, Tray, Notifications 
 e Dialogs nativos &

  12. Desenvolvido e mantido
 pelo Github '

  13. QUEM ESTÁ USANDO

  14. Seu primeiro app (

  15. $ npm install -g electron-prebuilt

  16. package.json 1 { 2 "name": "my-app", 3 "version": "0.1.0", 4

    "main": "main.js" 5 }
  17. 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>
  18. 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 });
  19. $ electron .

  20. None
  21. Apps rodam em 
 dois processos )

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

    process io.js DOM window
  23. browser process window 
 IPC renderer process renderer process window

  24. Comunicação entre
 processos *

  25. 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 });
  26. 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>
  27. 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>
  28. DEMO

  29. Empacotando apps
 para produção +

  30. $ npm install -g electron-packager

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

  32. Principais desafios ,

  33. Distribuir e atualizar
 para todas plataformas +

  34. Updates para OSX 
 requerem Codesign $

  35. • 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
  36. • 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
  37. • 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
  38. AppVeyor Beta OSX Windows Linux Beta +

  39. $ docker pull sergiovilar/fedora-electron

  40. $ docker pull sergiovilar/ubuntu-electron

  41. github.com/sindresorhus/awesome-electron AWESOME ELECTRON

  42. VALEU! vilar.cc/about