Chrome Apps e NodeWebkit: Traga seu WebApp para o Desktop

Chrome Apps e NodeWebkit: traga seu webapp para o Desktop
Joselito Júnior  joselitojunior.com @joselitojunior1

Olá sou fundador do Estudorama e do Rabiscapp, estudo Ciência
da Computação CIn-UFPE, venci o NASA Space Apps e o Startup Jam, co-fundador do GDG Recife, instrutor e palestrante, design thinker, entusiasta do html5, fã de formula 1

• Acabou de nascer • Comunidade endorsada pelo Google •
Busca discutir e aprender tecnologias Google • Pessoas que gostam, usam, desenvolvem com tecnologias Google • Curtam experimentar e criar! gdgrecife.com

JavaScript de várzea botões rollover joguinhos dhtml alerts irritantes anuncios
com refresh

JavaScript na web 2.0 bibliotecas (jquery) ajax websockets realtime

JavaScript hoje node.js e npm angularjs, blackbone, ember mobile apps

JavaScript hoje node.js e npm angularjs, blackbone, ember mobile apps
desktop apps

e Desktop?

e tem pra Desktop?

e por que Desktop?

Os Porquês mudança de hábito mobile: apps simplesmente funcionam só
usam a web quando necessário mantém uma ótima experiência

Chrome Apps

Conteúdo    index.html script.js style.css troll_face.jpg manifest.json background.html main.js Estrutura

manifest.json { "manifest_version": 2, "name": "Olar
mundo", "version": "1.1", "minimum_chrome_version": "23", "icons": { "16": "icon_16.png", "128": "icon_128.png" }, "app": { "background": { "scripts": ["main.js"] } } }

manifest-melhorzinho.json { "name": "Olar mundo cruel",
"version": "2", "manifest_version": 2, "minimum_chrome_version": "32", "app": { "background": { "scripts": ["background.js"] } }, "permissions": [ {"fileSystem": ["write", "retainEntries", "directory"]}, "storage" ], "file_handlers": { "text": { "types": [ "text/*" ], "title": "Text editor" } } }

main.js chrome.app.runtime.onLaunched.addListener(function() { var screenWidth = screen.availWidth;
var screenHeight = screen.availHeight; var width = 500; var height = 300; chrome.app.window.create('index.html', { id: "olarPlanetaID", bounds: { width: width, height: height, left: Math.round((screenWidth-‐width)/2), top: Math.round((screenHeight-‐height)/2) } }); });

main.js chrome.app .onLaunch .onRestarted

main.js chrome.app APIs exclusivas do Chrome

Testando

Compilando

github.com/GoogleChrome/chrome-app-samples

Node Webkit

V8 node.js contexto

node.js assíncrono  módulos do npm usa a v8 engine performance

Conteúdo    index.html script.js style.css tacalhepau.mp4 package.json Estrutura

{ "name": "Mia plicativo", "main": "index.html",
"window": { "toolbar": true, "fullscreen": false, "resizible": "true", "width": 800, "height": 600 }, "depedencies": { "underscore": "~1.4.1", "angular": "~1.2.0" }, "jsflags": "-‐-‐harmony-‐collections" } package.json

<!doctype html> <html lang='en'> <head>
<meta charset='UTF-‐8'> <title>Modules Example (System Info and File I/O)</title> <script> var os = require('os'); var fs = require('fs'); var content = ''; content += '[Platform]' + os.EOL; content += 'OS Type : ' + os.platform() + os.EOL; // linux, darwin, win32, sunos, freebsd content += 'OS Version : ' + os.release() + os.EOL; content += 'OS Architecture: ' + os.arch() + os.EOL; content += os.EOL; … Módulos node

Testando ./node-‐webkit <dir>

Testando

API gráfica nativa var win = gui.Window.get();
// Create a menubar for window menu var menubar = new gui.Menu({ type: 'menubar' }); // Create a menuitem var sub1 = new gui.Menu(); sub1.append(new gui.MenuItem({ label: 'Galileu', click: function() { var element = document.createElement('div'); element.appendChild(document.createTextNode('Teste')); document.body.appendChild(element); } }));

Mais testes

Resumindo módulos do npm native gui library shell functions snapshot
do V8 runtime nativo early-apis do html5 apis exclusivas (frameless, clipboard(!), webrtc)

Compilando copy /b nw.exe+app.nw > app.exe cp app.nw nw/Contents/Resources cat
nw app.nw > app

github.com/rogerwang/node-webkit

Necessário um browser Autorização on-demand do usuário Sem GUI própria
APIs exclusivas do Chrome Loja Própria Obifuscação de código Standalone Tudo liberado por padrão API de GUI Acesso completo a codigo nativo Lojas do SO/Distribuição direta Snapshot

quem já usa?

Chrome Apps

Game Dev Tycoon http://www.greenheartgames.com/app/game-dev-tycoon/

Koala App http://koala-app.com/

Popcorn Time http://www.time4popcorn.eu

Atom http://atom.io

Breach http://breach.cc/

Obrigado! Dúvidas? Joselito Júnior  joselitojunior.com @joselitojunior1

Chrome Apps e NodeWebkit: Traga seu WebApp para...

Chrome Apps e NodeWebkit: Traga seu WebApp para o Desktop

More Decks by Joselito

Other Decks in Programming

Featured

Transcript