SlideShare uma empresa Scribd logo
1 de 61
Baixar para ler offline
Chrome Apps e NodeWebkit: 
traga seu webapp para o Desktop 
#outubrorosa 
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 (e +), 
co-fundador do GDG Recife, 
gerente de TI na Farol52, 
instrutor e palestrante, 
design thinker, 
entusiasta do html5, 
fã de formula 1
Rabiscapp.net
http://phonegapbootcamp.io
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.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
Testando
Testando
Compilando
github.com/GoogleChrome/chrome-app-samples
Node 
Webkit
node.js V8 
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
package.json 
{ 
"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" 
}
<!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
<!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: 
'GDG 
Aracaju', 
click: 
function() 
{} 
}));
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 [Shell] 
http://atom.io
Brackets [Shell] 
http://brackets.io
Breach 
http://breach.cc/
Obrigado! (: 
Dúvidas? 
http://jfnj.me/chromeapps-devfestne 
Joselito Júnior 
joselitojunior.com 
@joselitojunior1

Mais conteúdo relacionado

Mais procurados

Mais procurados (12)

Docker + Azure: opções disponíveis e utilização de containers na nuvem - Azur...
Docker + Azure: opções disponíveis e utilização de containers na nuvem - Azur...Docker + Azure: opções disponíveis e utilização de containers na nuvem - Azur...
Docker + Azure: opções disponíveis e utilização de containers na nuvem - Azur...
 
OpenShift: NoSQL "a la carte" num PaaS 100% Open Source
OpenShift: NoSQL  "a la carte"  num PaaS 100% Open SourceOpenShift: NoSQL  "a la carte"  num PaaS 100% Open Source
OpenShift: NoSQL "a la carte" num PaaS 100% Open Source
 
Docker + Azure - Global Azure Bootcamp 2018 - Campinas-SP
Docker + Azure - Global Azure Bootcamp 2018 - Campinas-SPDocker + Azure - Global Azure Bootcamp 2018 - Campinas-SP
Docker + Azure - Global Azure Bootcamp 2018 - Campinas-SP
 
Melhorando o desempenho do seu WordPress [WordCamp São Paulo 2015]
Melhorando o desempenho do seu WordPress [WordCamp São Paulo 2015]Melhorando o desempenho do seu WordPress [WordCamp São Paulo 2015]
Melhorando o desempenho do seu WordPress [WordCamp São Paulo 2015]
 
ASP.NET Core - iMasters - Março/2016
ASP.NET Core - iMasters - Março/2016ASP.NET Core - iMasters - Março/2016
ASP.NET Core - iMasters - Março/2016
 
Docker + Azure - Global Azure Bootcamp 2018 - São Paulo-SP
Docker + Azure - Global Azure Bootcamp 2018 - São Paulo-SPDocker + Azure - Global Azure Bootcamp 2018 - São Paulo-SP
Docker + Azure - Global Azure Bootcamp 2018 - São Paulo-SP
 
Afinal, o que é Docker? (Webinar Umbler)
Afinal, o que é Docker? (Webinar Umbler)Afinal, o que é Docker? (Webinar Umbler)
Afinal, o que é Docker? (Webinar Umbler)
 
Node slide
Node slideNode slide
Node slide
 
Escalabilidade com docker - ASP.NET Conference 2016
Escalabilidade com docker - ASP.NET Conference 2016Escalabilidade com docker - ASP.NET Conference 2016
Escalabilidade com docker - ASP.NET Conference 2016
 
Realtime com node.js e socket.io
Realtime com node.js e socket.ioRealtime com node.js e socket.io
Realtime com node.js e socket.io
 
Semana Acadêmica ICET - Feevale - 12/04/2014
Semana Acadêmica ICET - Feevale - 12/04/2014Semana Acadêmica ICET - Feevale - 12/04/2014
Semana Acadêmica ICET - Feevale - 12/04/2014
 
Trabalhando com a infraestrutura como software na AWS com Elastic Beanstalk e...
Trabalhando com a infraestrutura como software na AWS com Elastic Beanstalk e...Trabalhando com a infraestrutura como software na AWS com Elastic Beanstalk e...
Trabalhando com a infraestrutura como software na AWS com Elastic Beanstalk e...
 

Semelhante a Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa

Introdução aos aplicativos tipo canvas
Introdução aos aplicativos tipo canvasIntrodução aos aplicativos tipo canvas
Introdução aos aplicativos tipo canvas
Guilherme
 
Introdução ao OpenLayers
Introdução ao OpenLayersIntrodução ao OpenLayers
Introdução ao OpenLayers
Fernando Quadro
 

Semelhante a Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa (20)

Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_
 
Html5
Html5Html5
Html5
 
O poder das Progressive Web Apps
O poder das Progressive Web AppsO poder das Progressive Web Apps
O poder das Progressive Web Apps
 
Introdução aos aplicativos tipo canvas
Introdução aos aplicativos tipo canvasIntrodução aos aplicativos tipo canvas
Introdução aos aplicativos tipo canvas
 
Desenvolvimento de Aplicações para o Google App Engine (CPBR5)
Desenvolvimento de Aplicações para o Google App Engine (CPBR5)Desenvolvimento de Aplicações para o Google App Engine (CPBR5)
Desenvolvimento de Aplicações para o Google App Engine (CPBR5)
 
Desenvolvimento de aplicações para o Google App Engine
Desenvolvimento de aplicações para o Google App EngineDesenvolvimento de aplicações para o Google App Engine
Desenvolvimento de aplicações para o Google App Engine
 
Introdução ao OpenLayers
Introdução ao OpenLayersIntrodução ao OpenLayers
Introdução ao OpenLayers
 
IoTizando com JavaScript
IoTizando com JavaScriptIoTizando com JavaScript
IoTizando com JavaScript
 
Congresso TI 2015: Introducao ao Phonegap (Cordova)
Congresso TI 2015: Introducao ao Phonegap (Cordova)Congresso TI 2015: Introducao ao Phonegap (Cordova)
Congresso TI 2015: Introducao ao Phonegap (Cordova)
 
Android 2303
Android 2303Android 2303
Android 2303
 
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
 
Criando uma grid para execução de testes paralelo com Appium
Criando uma grid para execução de testes paralelo com AppiumCriando uma grid para execução de testes paralelo com Appium
Criando uma grid para execução de testes paralelo com Appium
 
Aplicativos Multiplataforma Baseados em Firefox OS
Aplicativos Multiplataforma Baseados em Firefox OSAplicativos Multiplataforma Baseados em Firefox OS
Aplicativos Multiplataforma Baseados em Firefox OS
 
PHP e o Desenvolvimento Mobile Web - PHPhederal
PHP e o Desenvolvimento Mobile Web - PHPhederalPHP e o Desenvolvimento Mobile Web - PHPhederal
PHP e o Desenvolvimento Mobile Web - PHPhederal
 
Python Para Maemo
Python Para MaemoPython Para Maemo
Python Para Maemo
 
Phonegap
PhonegapPhonegap
Phonegap
 
Phonegap - Framework Mobile
Phonegap - Framework MobilePhonegap - Framework Mobile
Phonegap - Framework Mobile
 
Tornando as coisas mais simples com Azure Functions e Node.JS
Tornando as coisas mais simples com Azure Functions e Node.JSTornando as coisas mais simples com Azure Functions e Node.JS
Tornando as coisas mais simples com Azure Functions e Node.JS
 
RubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direitoRubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direito
 
DevDay - O elo perdido: sincronizando webapps
DevDay - O elo perdido: sincronizando webappsDevDay - O elo perdido: sincronizando webapps
DevDay - O elo perdido: sincronizando webapps
 

Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa