FrontInFloripa 2013: Sencha Touch 2 e Phonegap

Apps Mobile Multiplataforma e
OpenSource com

Sencha Touch e Phonegap

Loiane Groner
http://loiane.com

Me, Myself && I

•Gerente de Desenv Projetos && Sencha Trainer
•8+ XP TI

•Java JUG Leader

•Sencha Community Leader
•http://loiane.com
•@loiane

“

O primeiro
framework HTML5
mobile do mercado.

http://www.sencha.com/products/touch/

+
Wrapper jQuery
<HTML>
DOM

DOM Element
DOM Element
DOM Element
…

$(‘#selector’);

append();
removeClass();
position();

Sencha Touch Widgets
<HTML>
DOM

List
Button
Toolbar
Form
…

Ext.create(‘Ext.create,{…}’);

Plataforma Sencha

Ext JS + Touch

Usuário

View

Model

Controller

Local Storage
Web SQL (SQLite)

Eventos

tap

tap duplo

pinch
zoom

swipe

Licença

•

Open Source

•

Commercial Software

Server Side Web

Execut
a UI e
Lógica
de negó
cio

Web Server
/
ttp:/
h

Java/
PHP/
Ruby/C#

Web Browser
Arquivos Banco de
Imagens/
Dados
Documentos
Dispositivo

um
nas dor
Ape riza
de
ren

Backend

Client Side Web
Web Browser
JavaScript

Imagens/
Documentos

de negó
cio

Web Server
tp://
ht

Sencha
Touch

Arquivos

Lógica

Banco
de Dados
caching

UI e de
Dispositivo
uta gica
xec
e
) ló
ma cio
lgu egó
(a
n

Java/
PHP/
Ruby/C#

Arquivos Banco de
Imagens/
Dados
Documentos
Backend

Client Side Web
Web Browser
JavaScript
Sencha
Touch

Arquivos
Imagens/
Documentos

Banco
de Dados
caching

Dispositivo

Web Server
Java/
PHP/
Ruby/C#

Arquivos Banco de
Imagens/
Dados
Documentos
Backend

Client Side Web
Web Browser
JavaScript
Sencha
Touch

Arquivos
Imagens/
Documentos

Banco
de Dados
caching

Dispositivo

://
ttp
h

Web Server
Java/
PHP/
Ruby/C#

Arquivos Banco de
Imagens/
Dados
Documentos
Backend

Client Side Web
Web Browser
JavaScript
Sencha
Touch

Web Server

://
ttp
h

Java/
PHP/
Ruby/C#

CORS

Arquivos Banco de
Banco
Arquivos http://enable-cors.org/
Imagens/
Documentos

de Dados
caching

Dispositivo

Imagens/
Documentos

Dados

Backend

“

Acesso Nativo ao
Device usando
apenas JavaScript.
http://phonegap.com/

Android
Accelerometer
Camera
Capture
Compass
Connection
Contacts
Device
Events
File
Geolocation
Globalization
InAppBrowser
Media
Notiﬁcation
Spalshscreen
Storage

iOS

BB 10

WP 8

Tizen

P
P
P
P
P
P
P
P
P
P
P
P
P
P
P
P

P
P
P
P
P
(3GS
P
+)s
P
dfs
P
df
P
P
P
P
P
P
P
P

P
P
P
P
P
P
P
P
P
P
O
P
P
P
P
P

P
P
P
P
P
P
P
P

P
P
O
P
P
O
P
P
O
P
O
O
P
P
O
P

Parcial

P
P
P
P
P
P

Parcial

App Híbrida
App Nativa
Código Nativo

Interpretador

Lógica

de negó
cio

Web Server
tp://
ht

Java/
PHP/
Ruby/C#

://
ttp
h

PhoneGap

JavaScript

Sencha Touch /
jQquery Mobile

UI e de
Dispositivo
uta gica
xec
e
) ló
ma cio
lgu egó
(a
n

Arquivos Banco de
Imagens/
Dados
Documentos
Backend

E vos declaro
Apps Mobile Híbridas

https://github.com/lite4cordova/Cordova-SQLitePlugin

https://github.com/shepsii/SQLite-Proxy-ST2

http://www.sencha.com/apps/
http://phonegap.com/app/

http://phonegap.com/app/fruit-salad/

http://www.bryntum.com/products/siesta/

http://loiane.com
facebook.com/loianegroner

@loiane
https://github.com/loiane
youtube.com/user/Loianeg

FrontInFloripa 2013: Sencha Touch 2 e Phonegap

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to FrontInFloripa 2013: Sencha Touch 2 e Phonegap

Similar to FrontInFloripa 2013: Sencha Touch 2 e Phonegap (20)

FrontInFloripa 2013: Sencha Touch 2 e Phonegap