$30 off During Our Annual Pro Sale. View Details »

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.

Sérgio Vilar

October 01, 2015
Tweet

More Decks by Sérgio Vilar

Other Decks in Programming

Transcript

  1. Criando aplicações desktop com
    ELECTRON

    View Slide

  2. SÉRGIO VILAR
    Software Engineer @ HackHands

    View Slide

  3. Multiplataforma 

    sempre foi um problema
    !

    View Slide

  4. View Slide

  5. electron.atom.io

    View Slide

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

    View Slide

  7. Apps escritos em 

    HTML, CSS e Javascript
    "

    View Slide

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

    View Slide

  9. Update transparente

    usando Squirrel
    $

    View Slide

  10. Instalador para Windows
    %

    View Slide

  11. Menus, Tray, Notifications 

    e Dialogs nativos
    &

    View Slide

  12. Desenvolvido e mantido

    pelo Github
    '

    View Slide

  13. QUEM ESTÁ USANDO

    View Slide

  14. Seu primeiro app
    (

    View Slide

  15. $ npm install -g electron-prebuilt

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  19. $ electron .

    View Slide

  20. View Slide

  21. Apps rodam em 

    dois processos
    )

    View Slide

  22. browser process
    io.js
    menu
    tray
    dialog
    window

    IPC
    renderer process
    io.js
    DOM
    window

    View Slide

  23. browser process
    window

    IPC
    renderer process renderer process
    window

    View Slide

  24. Comunicação entre

    processos
    *

    View Slide

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

    View Slide

  26. ipc-renderer.html
    1
    2
    3
    4
    5 IPC
    6
    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

    View Slide

  27. remote.html
    1
    2
    3
    4
    5 IPC
    6
    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

    View Slide

  28. DEMO

    View Slide

  29. Empacotando apps

    para produção
    +

    View Slide

  30. $ npm install -g electron-packager

    View Slide

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

    View Slide

  32. Principais desafios
    ,

    View Slide

  33. Distribuir e atualizar

    para todas plataformas
    +

    View Slide

  34. Updates para OSX 

    requerem Codesign
    $

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  38. AppVeyor
    Beta
    OSX Windows
    Linux
    Beta
    +

    View Slide

  39. $ docker pull sergiovilar/fedora-electron

    View Slide

  40. $ docker pull sergiovilar/ubuntu-electron

    View Slide

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

    View Slide

  42. VALEU!
    vilar.cc/about

    View Slide