QCON SP 2012

Aplicações Móveis
Híbridas: usando Web e
Nativo juntos

cristiano@lab360.com.br (@cbsanchez)
wladimir@lab360.com.br (@wlads)

Tuesday, 22 May 2012 1

Agenda
• Aplicações Mobile Web
• Aplicações Mobile Nativas
• Aplicações Mobile Híbridas


1. Aplicações Mobile
Web


No início era o nativo


Sir Tim Berners-Lee

e então Berners-Lee criou a web

e desde 1991
• HTML, CSS e JavaScript
• Pearl, PHP e ASP
• Java
• .NET
• Applet


hoje na web
• Sistemas corporativos
• Google Docs
• e-Learning
• Twitter, Facebook, GitHub, Basecamp,
Netﬂix...


mas nós queríamos mais
• WML e WMLScript
• XHTML MP
• JavaME
• Nativos

Martin Cooper

Fonte: Wikipedia


e chega o iPhone

Steve Jobs


HTML + CSS + JAVASCRIPT


ainda em desenvolvimento!
• Chrome

• Firefox

• Safari

• IE

• Chrome Frame


e o que promete?
• Novas API’s

• Multimídia embutido

• Uso off-line

• Depuração de erros


http://www.html5rocks.com/en/
http://html5demos.com/


Semântica


Canvas


Canvas
• 2D APIs
• 3D APIs (WebGL)
• Inline SVG


Geolocation


Storage


Áudio e Vídeo


CSS3
• seletores, atributos, targets
• instruções
• webfonts
• linhas e colunas
• transforms e animations


CSS3


JavaScript
• Ele sempre esteve entre nós!
• Nova API DOM (getElementBy...)
• History API
• FileSystem API
• Geolocation


web mobile apps?
• Aﬁnal de contas, é HTML
• Portável
• Padrão aberto
• Porque é possível


e ainda...
• Device orientation
• Multi-touch
• Desenvolvimento produtivo
• Comunidade
• Separation of Concerns


...e por último


SoC
• html estrutura
• css view/estilo
• javascript lógica


alguns (bons) exemplos
• Financial Times
• Basecamp
• http://www.apple.com/webapps/


Financial Times


Nativas


Native mode (wikipedia)
• The term native mode or native code is used in computing in two
related senses:
• to describe something running on a computer natively
or in native mode meaning that it is running without
any external support as contrasted to running in
emulation (i.e. browser)
• Native operating system, native instruction set, etc., in
application to a computer processor means that the
corresponding item was implemented speciﬁcally for
the given model of the computer or microprocessor,
as opposed to emulation or compatibility mode.


Conceito

• Native App:
• An application that is speciﬁcally
written for a device platform.


Devices
• Feature-phones
• Smart-phones What else?
• Tablets
• TV


Plataformas Nativas
• Plataformas e suas Linguagens de
Programação
• iOS => Objective-C, C
• Android => Java
• BlackBerry => Java
• Windows Mobile (Nokia) => .Net


Android => Java + Dalvik
• Java é uma linguagem familiar para
muitos desenvolvedores, muitas vezes é
a primeira linguagem
• Gustav’s Moto:
“Anybody can cook”
• Android fornece uma excelente API


Objective-C
• Objective-C criada na decada de 90
(NeXT) e possui uma vasta API =>
produtos Apple
• Runtime C orientado a objetos
• Ganhou muita popularidade com o
lançamento do iPhone e do iOS SDK


C/C++
• Diversos Devices
• Possivel desenvolver em C/C++ para
iOS e Android
• Projetos Open-Source!!!
• UI???


Características Apps
Nativas
• Aparência Nativa (Native look & feel):
impossível para Web por definição
• APIs: video, alarm clock, file access,
push notification, ...
• Integração com aplicações: maps, mail,
camera, youtube, gallery, agenda, ...


Nativas
• Integração com SO: concorrência,
system events
• Melhor Performance e uso da Bateria
• Web engines, plugins (e.g. <video>
codecs)
• Desenvolvimento: debugging


Nativas
• Uso “off-line”
• In-App Purchase: CC cadastrado +
billing (e.g. High Noon)
• Tratamento de diferentes tamanhos e
resoluções de tela (i.e. Android)


Human Interface Guidelines

Fonte:
http://developer.android.com/guide/practices/ui_guidelines/index.html
http://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf

Armazenamento (off-line)


Principais Características
“ordenadas” para App Nativas
1. ofﬂine mode
2. uso dos recursos (+hardware) do device
3. experiência de uso
4. centralização das aplicacoes (base de potenciais usuários)
5. integração com outras apps
6. notiﬁcações (push) e recursos de sistema (e.g. alarme)
7. “monetization” das lojas (busca e faturamento)
8. performance e uso da bateria


Domínio de Aplicações
• GAMES
• Acesso a recursos nativos:
ACCELEROMETER, CAMERA,
COMPASS, CONTACTS,
GEOLOCATION, NETWORK,
NOTIFICATION, STORAGE
• NFC??????
Fonte: Google Images (http://goo.gl/7ZQLS)


Native UI Kits
• Cocoa Touch
• Android UI
!"#$%&"'(
12&$!"#$(

)*&++",(

-./0+(


$$$
• $32,639 for a simple app
• 2 months to create
• 2 weeks per feature = 4 features
• $8,160 per feature
Fonte: Pinch/Zoom (Seatle)


App Store, Market, etc
• “o um lugar" para encontrar aplicações

Fonte: Google Images (http://goo.gl/cKArV)

• modelo de revenue share
70/30


Apple Store
Preço #Apps Games Total % TOTAL

Free 160.705 27,670 188,375 39.97%

$0.99 101.451 29,491 130,942 27.78%

$1.99 47.028 7,999 55,027 11.68%

79.43%
Fonte: http://148apps.biz/app-store-metrics/?mpage=appprice


Cases
• Games: angry birds, plats vs zombies
• Facebook, Twitter
• Shazan
• Flipboard
• Narizinho, AutoEsporte, Fibria,
QuemCarnaval :D


Cases
• “We bet everything on Apple and iOS
and then Apple killed us by changing
the rules in the middle of the game”
• Finantial Times (ft.com)
• Primeiro: Nativo
• Depois: Web


Resumindo...
• Web
- portabilidade
- padrões abertos
- simplicidade
• Nativas
- integração hardware/plataforma
- APIs novas
- experiência + rica


Híbridas


Conceito

• Hybrid App:
• An application using primarily web
technologies inside a native
container.


Aplicações Híbridas
• WebView
• WebKit
• JavaScript bridge


WebView
• Android e iOS
• Usa o WebKit como engine


WebKit
• Browser Engine
• Apple, Google, KDE, Nokia, RIM,
Samsung entre outras


JavaScript Bridge
• Nativo pro WebView
• WebView pra Nativo
• Eventos do browser e JS com callback
pro nativo


JavaScript => Android


Android => JavaScript


Formas de Fazer
• WebView e recursos nativos
• WebView dentro de frame nativo
• Transitando entre WebView e nativo


cross-plataform frameworks
• App Inventor
• DroidDraw
• Rhomobile
• Appcelerator/Titanium
• SproutCore
• MonoTouch
• JQuery Mobile
• Jo
• Sencha Touch
• PhoneGap

Appcelerator/Titanium


cristiano@lab360.com.br
@cbsanchez

wladimir@lab360.com.br
@wlads

@lab_360


QCON SP 2012

Recommandé

Recommandé

Contenu connexe

Similaire à QCON SP 2012

Similaire à QCON SP 2012 (20)

Dernier

Dernier (20)

QCON SP 2012