Upload
javamanrj
View
5.125
Download
1
Embed Size (px)
DESCRIPTION
Slides da apresentação no primeiro Rio.JS Conference, em Março de 2013
Citation preview
Criando aplicações Desktop com HTML, CSS e JS
#riojs
Zaedy Dantas
Who?
me: {name: ‘Zaedy Dantas Sayão’,twitter: ‘@zaedysayao’,github: ‘javamanrj’,study: ‘UFRJ’,works: ‘BioLogica Sistemas S.A’,slideshare: ‘javamanrj’
}
Why not?
• jQuery• Sencha Touch• Phonegap• Mobile com JS• Outra moda qualquer
Desktop?
Estado da arte
• Chromebook
Será?
• iOS• Android• Windows Phone• BB
Mas e desktop?
• Quem usa serviço na nuvem?• Quem SÓ usa serviço na nuvem?• Quem não tem aplicativo instalado?
Desktop?
Mac App Store
• 1604 apps em 1 manhã– Muitos games
• Rumor
Why?
• A empresa tem:– Site– Cloud (SAAS)– Android– iOS– WP– BB– Desktop?
Why?
Why?
Conexão
Conexão
Anatel – 11/2011
Why?
Realidade brasileira
Games
http://hexgl.bkcore.com/
Why?
Roda?
• IE6?• IE7?• Firefox 2?• Tem certeza? Daria sua vida pela resposta?
HTML, CSS e JS?
• C• C++• QT• .Net• Java• Delphi
Como funciona?
HTMLCSSJS
Resources…
Packager Executável
Como funciona?
HTMLCSSJS
Resources…
Ponte Código Nativo
Como portar?
• Angular.js• Knockout.js• Backbone.js• Agility.js• SproutCore• Ember.js• Batman.js• Cappuccino• Sammy.js• Bootstrap
Como portar?
• Sencha Touch (MVC)• jQuery Mobile• Kendo UI• Dojo• jQTouch• Jo• XUI• Zepto.JS
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
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
TideSDK
• Exemplos– Wunderlist: h
ttps://github.com/6wunderkinder/wunderlist
– SimpLESS: https://github.com/Paratron/SimpLESS
– Shopify Theme Tool: https://github.com/meeech/Shopify-Theme-Tool
TideSDK
TideSDK
• IDE• HelloWorld• SimpLESS
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
Chromium -> Chrome
• Flash Player• Visualizador de PDF• GoogleUpdate• Estatísticas e Crash Reports• Impressão• Entre outros
Chrome Installable Web Apps
• http://developer.chrome.com/stable/apps/about_apps.html
• http://www.chromeappsnow.com/• Free e OpenSource• NO PUBLISH!!!! (ainda)
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
node-webkit
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
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
AppJS
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
Sencha Desktop Packager
Sencha Desktop Packager
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
Outras apps
• TweetDeck – show code• Brackets (V8 e CEF) • Adobe Edge Code
Acabou?
• Phonegap!
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
Phonegap
Nativo
• Use quando quiser
E os problemas?
• Migração de uma app mobile/web quase nunca é automática– Mas não costuma ser demorada
• Segurança– Licença
O que eu recomendo?
1. TideSDK2. node-webkit3. Whatever
1. Mas fique de olho em todos, principalmente no Phonegap!
Curiosidades
• Tela de login do Linux Mint– Feita em HTML5
• Gnome já usa javascript
Dúvidas?
Slides e fontes
• http://www.slideshare.net/javamanrj/• https://github.com/javamanrj/riojs-conferenc
e
Thanks!