Desenvolvendo Aplicações Desktop com Electron

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

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