Chrome Apps e NodeWebkit: Traga seu WebApp para o Desktop

Palestra no Palco Galileu da #CPRecife3

Transcript

1. Chrome Apps e NodeWebkit:
   traga seu webapp para o Desktop
   Joselito Júnior

   joselitojunior.com
   @joselitojunior1
   

   View Slide

2. Olá
   sou fundador do Estudorama e do Rabiscapp,
   estudo Ciência da Computação CIn-UFPE,
   venci o NASA Space Apps e o Startup Jam,
   co-fundador do GDG Recife,
   instrutor e palestrante,
   design thinker,
   entusiasta do html5,
   fã de formula 1
   

   View Slide

3. • Acabou de nascer
   • Comunidade endorsada pelo Google
   • Busca discutir e aprender tecnologias Google
   • Pessoas que gostam, usam, desenvolvem com
   tecnologias Google
   • Curtam experimentar e criar!
   gdgrecife.com
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. JavaScript de várzea
    botões rollover
    joguinhos dhtml
    alerts irritantes
    anuncios com refresh
    

    View Slide

11. JavaScript na web 2.0
    bibliotecas (jquery)
    ajax
    websockets
    realtime
    

    View Slide

12. JavaScript hoje
    node.js e npm
    angularjs, blackbone, ember
    mobile apps
    

    View Slide

13. JavaScript hoje
    node.js e npm
    angularjs, blackbone, ember
    mobile apps
    desktop apps
    

    View Slide

14. View Slide

15. e Desktop?
    

    View Slide

16. e tem pra Desktop?
    

    View Slide

17. e por que Desktop?
    

    View Slide

18. Os Porquês
    mudança de hábito
    mobile: apps simplesmente funcionam
    só usam a web quando necessário
    mantém uma ótima experiência
    

    View Slide

19. View Slide

20. Chrome
    Apps
    

    View Slide

21. Conteúdo

    

    index.html
    script.js
    style.css
    troll_face.jpg
    manifest.json
    background.html
    main.js
    Estrutura
    

    View Slide

22. manifest.json
    {  
       "manifest_version":  2,  
       "name":  "Olar  mundo",  
       "version":  "1.1",  
       "minimum_chrome_version":  "23",  
       "icons":  {  
           "16":  "icon_16.png",  
           "128":  "icon_128.png"  
       },  
       "app":  {  
           "background":  {  
               "scripts":  ["main.js"]  
           }  
       }  
    }  
    

    View Slide

23. manifest-melhorzinho.json
    {  
       "name":  "Olar  mundo  cruel",  
       "version":  "2",  
       "manifest_version":  2,  
       "minimum_chrome_version":  "32",  
       "app":  {  
           "background":  {  
               "scripts":  ["background.js"]  
           }  
       },  
       "permissions":  [  
           {"fileSystem":  ["write",  "retainEntries",  "directory"]},  
           "storage"  
       ],  
       "file_handlers":  {  
           "text":  {  
               "types":  [  
                       "text/*"  
               ],  
               "title":  "Text  editor"  
           }  
       }  
    }
    

    View Slide

24. main.js
    chrome.app.runtime.onLaunched.addListener(function()  {  
       var  screenWidth  =  screen.availWidth;  
       var  screenHeight  =  screen.availHeight;  
       var  width  =  500;  
       var  height  =  300;  
       chrome.app.window.create('index.html',  {  
           id:  "olarPlanetaID",  
           bounds:  {  
               width:  width,  
               height:  height,  
               left:  Math.round((screenWidth-­‐width)/2),  
               top:  Math.round((screenHeight-­‐height)/2)  
           }  
       });  
    });
    

    View Slide

25. main.js
    chrome.app.runtime.onLaunched.addListener(function()  {  
       var  screenWidth  =  screen.availWidth;  
       var  screenHeight  =  screen.availHeight;  
       var  width  =  500;  
       var  height  =  300;  
       chrome.app.window.create('index.html',  {  
           id:  "olarPlanetaID",  
           bounds:  {  
               width:  width,  
               height:  height,  
               left:  Math.round((screenWidth-­‐width)/2),  
               top:  Math.round((screenHeight-­‐height)/2)  
           }  
       });  
    });
    

    View Slide

26. main.js
    chrome.app
    .onLaunch  .onRestarted
    

    View Slide

27. main.js
    chrome.app
    APIs exclusivas do Chrome
    

    View Slide

28. Testando
    

    View Slide

29. Testando
    

    View Slide

30. Testando
    

    View Slide

31. Compilando
    

    View Slide

32. github.com/GoogleChrome/chrome-app-samples
    

    View Slide

33. Node
    Webkit
    

    View Slide

34. View Slide

35. V8
    node.js
    contexto
    

    View Slide

36. View Slide

37. node.js
    assíncrono

    módulos do npm
    usa a v8 engine
    performance
    

    View Slide

38. Conteúdo

    

    index.html
    script.js
    style.css
    tacalhepau.mp4
    package.json
    Estrutura
    

    View Slide

39. {  
      "name":  "Mia  plicativo",  
      "main":  "index.html",  
      "window":  {  
        "toolbar":  true,  
        "fullscreen":  false,  
        "resizible":  "true",  
        "width":  800,  
        "height":  600  
      },  
      "depedencies":  {  
        "underscore":  "~1.4.1",  
        "angular":  "~1.2.0"  
      },  
      "jsflags":  "-­‐-­‐harmony-­‐collections"  
    }
    package.json
    

    View Slide

40.  
     
     
             
           Modules  Example  (System  Info  and  File  I/O)  
         <br/>      var  os  =  require('os');  <br/>                var  fs  =  require('fs');  <br/>    <br/>                var  content  =  '';  <br/>    <br/>                content  +=  '[Platform]'  +  os.EOL;  <br/>                content  +=  'OS  Type                :  '  +  os.platform()  +  os.EOL;  //  <br/>linux,  darwin,  win32,  sunos,  freebsd  <br/>                content  +=  'OS  Version          :  '  +  os.release()    +  os.EOL;  <br/>                content  +=  'OS  Architecture:  '  +  os.arch()          +  os.EOL;  <br/>                content  +=  os.EOL;  <br/>…<br/>Módulos node<br/>

    View Slide

41.  
     
     
             
           Modules  Example  (System  Info  and  File  I/O)  
         <br/>      var  os  =  require('os');  <br/>                var  fs  =  require('fs');  <br/>    <br/>                var  content  =  '';  <br/>    <br/>                content  +=  '[Platform]'  +  os.EOL;  <br/>                content  +=  'OS  Type                :  '  +  os.platform()  +  os.EOL;  //  <br/>linux,  darwin,  win32,  sunos,  freebsd  <br/>                content  +=  'OS  Version          :  '  +  os.release()    +  os.EOL;  <br/>                content  +=  'OS  Architecture:  '  +  os.arch()          +  os.EOL;  <br/>                content  +=  os.EOL;  <br/>…<br/>Módulos node<br/>

    View Slide

42. Testando
    ./node-­‐webkit  
    

    View Slide

43. Testando
    

    View Slide

44. API gráfica nativa
    var  win  =  gui.Window.get();  
       
    //  Create  a  menubar  for  window  menu  
    var  menubar  =  new  gui.Menu({  type:  'menubar'  });  
       
    //  Create  a  menuitem  
    var  sub1  =  new  gui.Menu();  
       
    sub1.append(new  gui.MenuItem({  
    label:  'Galileu',  
    click:  function()  {  
       var  element  =  document.createElement('div');  
       element.appendChild(document.createTextNode('Teste'));  
       document.body.appendChild(element);  
    }  
    }));
    

    View Slide

45. Mais testes
    

    View Slide

46. Resumindo
    módulos do npm
    native gui library
    shell functions
    snapshot do V8
    runtime nativo
    early-apis do html5
    apis exclusivas (frameless, clipboard(!), webrtc)
    

    View Slide

47. Compilando
    copy  /b  nw.exe+app.nw  >  app.exe
    cp  app.nw  nw/Contents/Resources
    cat  nw  app.nw  >  app
    

    View Slide

48. github.com/rogerwang/node-webkit
    

    View Slide

49. View Slide

50. Necessário um browser
    Autorização on-demand
    do usuário
    Sem GUI própria
    APIs exclusivas do Chrome
    Loja Própria
    Obifuscação de código
    Standalone
    Tudo liberado por padrão
    API de GUI
    Acesso completo a codigo
    nativo
    Lojas do SO/Distribuição
    direta
    Snapshot
    

    View Slide

51. quem já usa?
    

    View Slide

52. Chrome Apps
    

    View Slide

53. View Slide

54. Game Dev Tycoon
    http://www.greenheartgames.com/app/game-dev-tycoon/
    

    View Slide

55. Koala App
    http://koala-app.com/
    

    View Slide

56. Popcorn Time
    http://www.time4popcorn.eu
    

    View Slide

57. Atom
    http://atom.io
    

    View Slide

58. Breach
    http://breach.cc/
    

    View Slide

59. Obrigado!
    Dúvidas?
    Joselito Júnior

    joselitojunior.com
    @joselitojunior1
    

    View Slide