1. Phonegap

2. About me
codebroken.wordpress.com
github.com/lucasbrigida
@lucas_brigida

3. User Devices
Interfaces para diferentes devices e OS

4. Mobile World
You'll need a Ninja Power
...or many programmers and money

5. Mobile Universe
Operating Systems Languages
IOS Objective C
Android Java ‘Harmony’ / C++
BlackBerry Java J2ME
WebOS HTML, CSS and JS
Windows Phone 7 .NET bs
Bada C++

6. Smartphones (Brasil)
Um dos mercados mais promissores em arrecadação
monetária através de app móveis
2012 (expected)
2011
Vendas(smartphone)
2010
0 2 4 6 8 10 12 14 16
millions
Via IDC(http://www.idclatin.com/news.asp?ctr=bra&id_release=2213)

7. Mobile
http://m.facebook.com Facebook (android)
Browser (Web App) Native

8. Real World
Native Web
Cross-platform X ✔
Linkable X ✔
Discoverable ✔ X
Device APIs ✔ X

9. Real World
Native Web Hybrid
Cross-platform X ✔ ✔
Linkable X ✔ ✔
Discoverable ✔ X ✔
Device APIs ✔ X ✔

10. Who use?
Alcatel-Lucent
Zynga
Microsoft
Travelocity
Vodafone
Wikipedia
Salesforce.com

11. What is
Phonegap?

12. Paradise Bridge

13. Paradise Bridge

14. Work with Phonegap
Phonegap App Build
The Write Less, Do More

15. HTML5
localStorage
Web SQL Sockets
<audio> Cache Manifest
<canvas> <video>

16. DOM Libraries
JQueryZepto
Dojo XUI

19. Style Libraries
Jo
Sencha
ery
Jqu
e
bil
LungoJS
Mo JQtouch

20. 5

23. Game Libraries
CraftyJS
EaselJS
GameJS
LimeJS
LimeJS

24. Test Libraries
QUnit DominatorJS
thumbsJs
Jasmine

28. Javascript
→ Javascript vai muito além do que você imagina.
→ Javascript é orientado a eventos. ¹
→ Noção de callbacks.
→ Noção de closure.
→ Javascript é assíncrono.
→ Operações lógicas são absurdas as vezes. (0.1+0.2 != 0.3)
HTML5 + JAVASCRIPT+CSS3+CANVAS === STATE OF THE ART WEB
¹ Exemplo do garçom.

29. rd
3 APIs
→ Integração do (produto, serviço) com plataformas de terceiros.
Ex: Facebook, Twitter.
→ Consumo de serviço de terceiros para o seu produto.
Ex: Processamento de Imagens (Detectação de rostos) - “face.com”
→ Noção de OAuth.

32. Demo – Twitter Search API
$.getJSON("http://search.twitter.com/search.json?callback=?&q=wewebconf", function (data) {
$(".tweet").remove();
$(".alert").hide();
for(i in data.results){
var tweet = data.results[i];
console.log(tweet);
var img = tweet.profile_image_url;
var text = tweet.text;
var user = tweet.from_user;
var model='<li class="tweet"><a href="#tweet-dialog" data-rel="dialog" data-transition="none"
onclick="setTweetDialog(this);"><img src='+img+' height="79"/><h3>'+user+'</h3><p>'+text+'</p></a></li>';
$("#trends-list").append(model);
}
$("#trends-list").listview('refresh');
$("#trends-list li").css('visibility','visible');
});
* Using Jquery and Jquery Mobile

33. Make your API
Interface SO
Javascript Server-Side
V8 Engine
ECMA 5
NodeJS

34. NodeJS
Apache vs. Nginx (Request)

35. NodeJS
Apache vs. Nginx (Memory)

36. NodeJS
“Aplicações com grandes acessos, chegam a
receber mais de 30 mil requisições por
segundo.”
“No Apache para cada requisição é criada uma
thread (Alocado 1MB na RAM).”
Quantos megabytes necessito para atender
meus usuários?

37. NodeJS
30 Gigabytes
de RAM

38. NodeJS
Arquitetura Horizontal Sentido da Escalabilidade
Server A Server B Server C Server D
Alta Complexidade
Alto Custo (Ociosidade)
Alto grau de dificuldade de manutenção

39. NodeJS
Arquitetura Vertical – On Demand
Storage Memory
Server A
Baixa Complexidade
Baixo Custo (Ociosidade)
Baixo grau de dificuldade de manutenção

40. NodeJS

41. NodeJS
Run command in Shell: curl http://npmjs.org/install.sh | sh

42. NodeJS
Run command in Shell: npm install express

43. Making...
Blog: www.codebroken.wordpress.com
Twitter: @lucas_brigida
Mail: lucasbrigida@gmail.com

44. Thank You!
Blog: www.codebroken.wordpress.com
Twitter: @lucas_brigida
Mail: lucasbrigida@gmail.com