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

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!