Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 4,816 views

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

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

Statistics

Views

Total Views
4,816
Views on SlideShare
4,731
Embed Views
85

Actions

Likes
4
Downloads
34
Comments
0

2 Embeds 85

https://twitter.com 74
http://eventifier.co 11

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 1. Criando aplicações Desktop com HTML, CSS e JS #riojs Zaedy Dantas
  • 2. Who?me: { name: ‘Zaedy Dantas Sayão’, twitter: ‘@zaedysayao’, github: ‘javamanrj’, study: ‘UFRJ’, works: ‘BioLogica Sistemas S.A’, slideshare: ‘javamanrj’}
  • 3. Why not?• jQuery• Sencha Touch• Phonegap• Mobile com JS• Outra moda qualquer
  • 4. Desktop?
  • 5. Estado da arte• Chromebook
  • 6. Será?• iOS• Android• Windows Phone• BB
  • 7. Mas e desktop?• Quem usa serviço na nuvem?• Quem SÓ usa serviço na nuvem?• Quem não tem aplicativo instalado?
  • 8. Desktop?
  • 9. Mac App Store• 1604 apps em 1 manhã – Muitos games• Rumor
  • 10. Why?• A empresa tem: – Site – Cloud (SAAS) – Android – iOS – WP – BB – Desktop?
  • 11. Why?
  • 12. Why?
  • 13. Conexão
  • 14. Conexão Anatel – 11/2011
  • 15. Why?
  • 16. Realidade brasileira
  • 17. Gameshttp://hexgl.bkcore.com/
  • 18. Why?
  • 19. Roda?• IE6?• IE7?• Firefox 2?• Tem certeza? Daria sua vida pela resposta?
  • 20. HTML, CSS e JS?• C• C++• QT• .Net• Java• Delphi
  • 21. Como funciona? HTML CSS JS Packager ExecutávelResources …
  • 22. Como funciona? HTML CSS JS Ponte Código NativoResources …
  • 23. Como portar?• Angular.js• Knockout.js• Backbone.js• Agility.js• SproutCore• Ember.js• Batman.js• Cappuccino• Sammy.js• Bootstrap
  • 24. Como portar?• Sencha Touch (MVC)• jQuery Mobile• Kendo UI• Dojo• jQTouch• Jo• XUI• Zepto.JS
  • 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. 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. 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. TideSDK
  • 29. TideSDK• IDE• HelloWorld• SimpLESS
  • 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. Chromium -> Chrome• Flash Player• Visualizador de PDF• GoogleUpdate• Estatísticas e Crash Reports• Impressão• Entre outros
  • 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. 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. node-webkit
  • 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. 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. AppJS
  • 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. Sencha Desktop Packager
  • 40. Sencha Desktop Packager
  • 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. Outras apps• TweetDeck – show code• Brackets (V8 e CEF)• Adobe Edge Code
  • 43. Acabou?• Phonegap!
  • 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. Phonegap
  • 46. Nativo• Use quando quiser
  • 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. O que eu recomendo?1. TideSDK2. node-webkit3. Whatever 1. Mas fique de olho em todos, principalmente no Phonegap!
  • 49. Curiosidades• Tela de login do Linux Mint – Feita em HTML5• Gnome já usa javascript
  • 50. Dúvidas?
  • 51. Slides e fontes• http://www.slideshare.net/javamanrj/• https://github.com/javamanrj/riojs- conference
  • 52. Thanks!