frontinfloripa 2013: sencha touch 2 e phonegap
DESCRIPTION
Palestra apresentada no FronInFloripa (22 Novembro 2013)TRANSCRIPT
Apps Mobile Multiplataforma e OpenSource com
Sencha Touch e Phonegap
Loiane Gronerhttp://loiane.com
Me, Myself && I•Gerente de Desenv Projetos && Sencha Trainer•8+ XP TI•Java JUG Leader•Sencha Community Leader•http://loiane.com•@loiane
Demo
Sencha Touch
O primeiro framework HTML5 mobile do mercado.
“ http://www.sencha.com/products/touch/
+
<HTML>DOM
DOM ElementDOM ElementDOM Element
…
$(‘#selector’);
append();removeClass();
position();
Wrapper jQuery
<HTML>DOM
ListButtonToolbar
Form…
Sencha Touch Widgets
Ext.create(‘Ext.create,{…}’);
Cross-Platform
Plataforma Sencha
Plataforma Sencha
Ext JS + Touch
Single Page App
MVCModel-View-Controller
Model
View Controller
Usuário
Model
View
Controller
Store
Data Package
REST
JSON-P
Local StorageWeb SQL (SQLite)
User Interface
Design
Componentes
Eventos
tap tap duplo
pinchzoom swipe
Demo
Temas
• Open Source
• Commercial Software
Licença
• Open Source
• Commercial Software
Licença
Web Browser
Dispositivo
Server Side Web
Web Server
Java/PHP/
Ruby/C#
ArquivosImagens/
Documentos
Banco de Dados
Backend
http://
Apenas um
renderizador
Executa UI e Lógica de negócio
Web Browser
Dispositivo
Client Side Web
Web Server
Java/PHP/
Ruby/C#
ArquivosImagens/
Documentos
Banco de Dados
Backend
http://
executa UI e
(alguma) lógica de
negócio
Lógica de negócio
JavaScriptSencha Touch
ArquivosImagens/
Documentos
Banco de Dados
caching
Web Browser
Dispositivo
Client Side Web
Web Server
Java/PHP/
Ruby/C#
ArquivosImagens/
Documentos
Banco de Dados
Backend
JavaScriptSencha Touch
ArquivosImagens/
Documentos
Banco de Dados
caching
Web Browser
Dispositivo
Client Side Web
Web Server
Java/PHP/
Ruby/C#
ArquivosImagens/
Documentos
Banco de Dados
Backend
http://JavaScriptSencha Touch
ArquivosImagens/
Documentos
Banco de Dados
caching
Web Browser
Dispositivo
Client Side Web
Web Server
Java/PHP/
Ruby/C#
ArquivosImagens/
Documentos
Banco de Dados
Backend
http://JavaScriptSencha Touch
ArquivosImagens/
Documentos
Banco de Dados
caching
CORShttp://enable-cors.org/
PhoneGap
Acesso Nativo ao Device usando
apenas JavaScript.
“ http://phonegap.com/
Android iOS BB 10 WP 8 TizenAccelerometer
CameraCaptureCompass
ConnectionContactsDeviceEvents
FileGeolocationGlobalizationInAppBrowser
MediaNotificationSpalshscreen
Storage
P P P P PP P P P PP P P P OP P
(3GS+)sdfsdf
P P PP P P P PP P P P OP P P P PP P P P PP P P Parcial OP P P P PP P O P OP P P P OP P P P PP P P P PP P P P OP P P Parcial P
App Nativa
Dispositivo
App Híbrida
Web Server
Java/PHP/
Ruby/C#
ArquivosImagens/
Documentos
Banco de Dados
Backend
http://
executa UI e
(alguma) lógica de
negócio
Lógica de negócio
Código Nativo
Interpretador
JavaScriptSencha Touch / jQquery Mobile
PhoneGap
http://
Porque Híbrido?
E vos declaro Apps Mobile Híbridas
Apenas Phonegap?
Demo
Plugins
https://github.com/lite4cordova/Cordova-SQLitePlugin
OffLine First
https://github.com/shepsii/SQLite-Proxy-ST2
Isso é lindo!
Build Otimizado
Agrega Valor!
1.1 Mb29.1 Mb
Demo
Sencha Architect
http://www.sencha.com/apps/
http://phonegap.com/app/
<div id="jogador">
http://phonegap.com/app/fruit-salad/
Demo
http://www.bryntum.com/products/siesta/
http://loiane.com
facebook.com/loianegroner
@loiane
https://github.com/loiane
youtube.com/user/Loianeg
