Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013

6,558 views

Published on

Slides da apresentação no primeiro Rio.JS Conference, em Março de 2013

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,558
On SlideShare
0
From Embeds
0
Number of Embeds
84
Actions
Shares
0
Downloads
51
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013

  1. 1. Criando aplicações Desktop com HTML, CSS e JS #riojs Zaedy Dantas
  2. 2. Who?me: { name: ‘Zaedy Dantas Sayão’, twitter: ‘@zaedysayao’, github: ‘javamanrj’, study: ‘UFRJ’, works: ‘BioLogica Sistemas S.A’, slideshare: ‘javamanrj’}
  3. 3. Why not?• jQuery• Sencha Touch• Phonegap• Mobile com JS• Outra moda qualquer
  4. 4. Desktop?
  5. 5. Estado da arte• Chromebook
  6. 6. Será?• iOS• Android• Windows Phone• BB
  7. 7. Mas e desktop?• Quem usa serviço na nuvem?• Quem SÓ usa serviço na nuvem?• Quem não tem aplicativo instalado?
  8. 8. Desktop?
  9. 9. Mac App Store• 1604 apps em 1 manhã – Muitos games• Rumor
  10. 10. Why?• A empresa tem: – Site – Cloud (SAAS) – Android – iOS – WP – BB – Desktop?
  11. 11. Why?
  12. 12. Why?
  13. 13. Conexão
  14. 14. Conexão Anatel – 11/2011
  15. 15. Why?
  16. 16. Realidade brasileira
  17. 17. Gameshttp://hexgl.bkcore.com/
  18. 18. Why?
  19. 19. Roda?• IE6?• IE7?• Firefox 2?• Tem certeza? Daria sua vida pela resposta?
  20. 20. HTML, CSS e JS?• C• C++• QT• .Net• Java• Delphi
  21. 21. Como funciona? HTML CSS JS Packager ExecutávelResources …
  22. 22. Como funciona? HTML CSS JS Ponte Código NativoResources …
  23. 23. Como portar?• Angular.js• Knockout.js• Backbone.js• Agility.js• SproutCore• Ember.js• Batman.js• Cappuccino• Sammy.js• Bootstrap
  24. 24. Como portar?• Sencha Touch (MVC)• jQuery Mobile• Kendo UI• Dojo• jQTouch• Jo• XUI• Zepto.JS
  25. 25. O que posso usar?• SQLite• Recursos de Janela• Threads• Aúdio• Vídeo• Processo• Notificações• Câmera• Arquivos• Rede• Informações do desktop/plataforma• Menu• Tray• Dialogs• Clipboard
  26. 26. TideSDK• Free e OpenSource• Windows/Linux/Mac• Python/Ruby/Php/C/C++• IDE• Boa documentação• Comunidade ativa• Linguagens futuras (possibilidade) – Lua, Falcon, C# (via Mono) e Java
  27. 27. TideSDK• Exemplos – Wunderlist: https://github.com/6wunderkinder/wunderlist – SimpLESS: https://github.com/Paratron/SimpLESS – Shopify Theme Tool: https://github.com/meeech/Shopify-Theme-Tool
  28. 28. TideSDK
  29. 29. TideSDK• IDE• HelloWorld• SimpLESS
  30. 30. Chromium• OpenSource browser• Suporte a Vobis, Theora e WebM (aúdio e vídeo do html5)• Suporte a AAC e MP3• WebKit (engine que ‘pinta’ na tela): HTML, CSS, Imagens, XML -> conteúdo na área visual – Permite a renderização das páginas web – C++• Portado para várias plataformas – Arch Linux, Debian, OS X entre outros• Rockmelt
  31. 31. Chromium -> Chrome• Flash Player• Visualizador de PDF• GoogleUpdate• Estatísticas e Crash Reports• Impressão• Entre outros
  32. 32. Chrome Installable Web Apps• http://developer.chrome.com/stable/apps/ab out_apps.html• http://www.chromeappsnow.com/• Free e OpenSource• NO PUBLISH!!!! (ainda)
  33. 33. node-webkit• Baseado no Chromium e no Node.JS (V8)• Free e OpenSource• Intel• Windows/Linux/Mac• Boa documentação (inferior ao TideSDK)• Comunidade ativa
  34. 34. node-webkit
  35. 35. node-webkit• Simple Ace Editor https://github.com/brads- tools/node-webkit-ace-editor• WarTrail- Performance!http://delphitools.info/WarTrail/index.htmlhttp://delphitools.info/2012/12/13/desktop-html5-apps-game-changer-node-webkit/• Smart Mobile Studio
  36. 36. AppJS• Projeto promissor mas ainda imaturo• Usa Node.JS• Documentação confusa e espalhada• Windows/Linux/Mac• Links úteis: – http://appjs.org/ – http://appjs.delightfulsoftware.com/ – http://appjs.delightfulsoftware.com/example-apps/ – https://github.com/sihorton/appjs-appPackager – https://github.com/studiochris/starter-for-appjs
  37. 37. AppJS
  38. 38. Sencha Desktop Packager• Baseado no Chromium• Pago! – $499 sem suporte – $695 com suporte• Windows/Linux/Mac• Inferior a TideSDK e node-webkit – Não recomendo (ao menos ainda)• Boa documentação mas api limitada
  39. 39. Sencha Desktop Packager
  40. 40. Sencha Desktop Packager
  41. 41. Chromium Embedded Framework (CEF)• https://code.google.com/p/chromiumembedded/• Framework para embarcar o Chromium em outras aplicações• OpenSource e Free• Baseado no Chromium• C/C++• Integrado a outras linguagens – .Net – Mono – Delphi – Java – Python – PHP• Windows/Mac
  42. 42. Outras apps• TweetDeck – show code• Brackets (V8 e CEF)• Adobe Edge Code
  43. 43. Acabou?• Phonegap!
  44. 44. Phonegap• Imaturo (apenas desktop)• Roadmap• Sincronizado com mobile (objetivo ainda não alcançado)• Windows/Linux/Mac + Mobile• http://cordova.apache.org/• https://github.com/apache/cordova-mac• https://github.com/apache/cordova-windows
  45. 45. Phonegap
  46. 46. Nativo• Use quando quiser
  47. 47. E os problemas?• Migração de uma app mobile/web quase nunca é automática – Mas não costuma ser demorada• Segurança – Licença
  48. 48. O que eu recomendo?1. TideSDK2. node-webkit3. Whatever 1. Mas fique de olho em todos, principalmente no Phonegap!
  49. 49. Curiosidades• Tela de login do Linux Mint – Feita em HTML5• Gnome já usa javascript
  50. 50. Dúvidas?
  51. 51. Slides e fontes• http://www.slideshare.net/javamanrj/• https://github.com/javamanrj/riojs- conference
  52. 52. Thanks!

×