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.

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. Games
http://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á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

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. 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!