Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013
Transferir como PPTX, PDF8 gostaram6,370 visualizações
Este documento discute a criação de aplicativos desktop usando HTML, CSS e JavaScript. Apresenta diversas ferramentas para embutir páginas web em aplicativos nativos, como TideSDK, node-webkit, Chromium Embedded Framework e PhoneGap. Recomenda TideSDK e node-webkit como as melhores opções atuais.
Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013
- 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?
- 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ável Resources …
- 22. Como funciona? HTML CSS JS Ponte Código Nativo Resources …
- 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.html http://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
- 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
- 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. TideSDK 2. node-webkit 3. 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!