Baixado 55 vezes
Carregado porjavamanrj
Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013
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 Desktopcom 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.
- 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.
- 9. Mac App Store •1604 apps em 1 manhã – Muitos games • Rumor
- 10. Why? • A empresatem: – Site – Cloud (SAAS) – Android – iOS – WP – BB – Desktop?
- 11.
- 12.
- 13.
- 14. Conexão Anatel – 11/2011
- 15.
- 16.
- 17.
- 18.
- 19. Roda? • IE6? • IE7? • Firefox 2? • Tem certeza? Daria sua vida pela resposta?
- 20. HTML, CSS eJS? • 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 possousar? • 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.
- 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 WebApps • 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.
- 35. node-webkit • Simple AceEditor 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.
- 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.
- 40.
- 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.
- 44. Phonegap • Imaturo (apenasdesktop) • 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.
- 46. Nativo • Use quandoquiser
- 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 eurecomendo? 1. TideSDK 2. node-webkit 3. Whatever 1. Mas fique de olho em todos, principalmente no Phonegap!
- 49. Curiosidades • Tela delogin do Linux Mint – Feita em HTML5 • Gnome já usa javascript
- 50.
- 51. Slides e fontes •http://www.slideshare.net/javamanrj/ • https://github.com/javamanrj/riojs- conference
- 52.