tdc2013: arquitetura de apps com sencha touch 2
DESCRIPTION
Palestra apresentada na trilha Mobile do TDC 2013 SP no dia 14 de julho de 2013.TRANSCRIPT
Trilha Mobile
Loiane Gronerhttp://loiane.com
@loiane
Arquitetura de apps com Sencha Touch 2
Me, Myself & I
•Gerente de Desenv Projetos @Citibank
•8+ XP TI
•Java JUG Leader
•Sencha Community Leader
•http://loiane.com
•@loiane
Pq Mobile?Pq
Multiplataforma?
1
#changeBrazil
Mobile
Android Java
BackBerry Java
iOS Objective-C
Palm OS C, C++, Pascal
Symbian C++
Windows Phone C#
Nativo x Web
2
App Híbrida?
Nativo
Web
Acesso Device
Velocidade Tempo Desenvolvimento
App Store
Cross Platform
Sim Sim
?
Caro
Parcial Sussa
Sim
Não Sim
Não
Híbrido Sim ? Sussa* Sim Sim
Desenvolva
Teste
Build
Desenvolva
Teste
Build
Desenvolva
Teste
Build Build
{Híbrido
WORA
Sencha Touch
3
Primeiro framework Javascript para desenvolvimento de apps mobile ricas
usando padrões web - HTML 5
O que tem no Sencha Touch?
Componentes e LayoutsThemas e ÍconesOrientação e AnimaçãoEventos Touch e ScrollerPacote de DadosMVC
ComponentesLists- Nested, Grouped, SortableCarouselPickerOverlaySliderForms & fields Toolbars & buttons HTML5- Audio- Video- GeoLocation
Lists - Nested, Grouped, SortableCarouselPickerOverlaySliderForms & fieldsToolbars & buttonsHTML5 - Audio - Video - GeoLocation
Components
Ext.define('Contact', { extend: 'Ext.data.Model', config: { fields: ['firstName', 'lastName'] }});
var store = Ext.create('Ext.data.Store', { model: 'Contact', sorters: 'lastName',
grouper: { groupFn: function(record) { return record.get('lastName')[0]; } },
data: [ { firstName: 'Tommy', lastName: 'Maintz' }, { firstName: 'Rob', lastName: 'Dougan' }, { firstName: 'Ed', lastName: 'Spencer' }, { firstName: 'Jamie', lastName: 'Avins' }, { firstName: 'Aaron', lastName: 'Conran' }, { firstName: 'Dave', lastName: 'Kaneda' }, { firstName: 'Jacky', lastName: 'Nguyen' }, { firstName: 'Abraham', lastName: 'Elias' }, { firstName: 'Jay', lastName: 'Robinson'}, { firstName: 'Nigel', lastName: 'White' }, { firstName: 'Don', lastName: 'Griffin' }, { firstName: 'Nico', lastName: 'Ferrero' }, { firstName: 'Jason', lastName: 'Johnston'} ]});
Ext.create('Ext.List', { fullscreen: true, itemTpl: '<div class="contact">{firstName} <strong>{lastName}</strong></div>', store: store, grouped: true});
Forms
Ext.create('Ext.form.Panel', { fullscreen: true, items: [ { xtype: 'textfield', name: 'name', label: 'Name' }, { xtype: 'emailfield', name: 'email', label: 'Email' }, { xtype: 'passwordfield', name: 'password', label: 'Password' } ]});
form.submit({ url: 'url/to/submit/to', method: 'POST', success: function() { alert('form submitted successfully!'); }});
Scrolling
ScrollingMomentum/bounce physics
Hardware accelerated
Throughout all components: - Lists - Carousel - Pickers
Eventos Touch
Baseado em Eventos Nativos
Abstraído para Performance
Eventos Adicionais:- Tap- Double tap- Tap & hold - Swipe- Rotate- Drag & drop
Data Package
Models, Stores, e Proxies- Associations- Validation- Local & server storage
Consumir web services- JSON/P - XML- YQL
Temas
Use CSS3 & SASS - Flexible themes - Highly optimized
e.g.
Theming
$base-color: #ff6699
Use CSS3 & SASS - Flexible themes - Highly optimized
e.g.
Theming
$base-color: #ff6699
CSS3 comSass e Compass
"css": [ { "path": "../../resources/css/base.css", "update": "delta" }, { "path": "resources/css/sencha-touch.css", "platform": ['chrome', 'safari', 'ios'], "update": "delta" }, { "path": "resources/css/android.css", "platform": ['android'], "update": "delta" }, { "path": "resources/css/bb.css", "platform": ['blackberry'], "update": "delta" }, { "path": "resources/css/wp.css", "platform": ['ie10'], "update": "delta" } ]
Gráficos
Touch Charts
Nossa App
4
Pré-Requisitos
5
Sencha Touch SDKSencha Cmd
Local WebServerBrowser (safari, Chrome)
EmuladoresDispositivos para testes
Arquitetando+ Desenvolvimento
6
Workflow deDesenvolvimento
MockupArquitetura da app - MVC
Estrutura UIModelagem Dados
Binding Dados - ViewEventos - Controller
Página Detalhe e FormCustomização - Sass e Compass
TestesEmulação
Teste DeviceProdução
MOCKUP
cd senchaTouchSDK
sencha app generateMyContacts
../TDC2013/MyContacts
Testes Locais
Testes Automatizados
Ferramentas de Debug
chrome dev tools
iWebInspector
Weinre
Build
sencha app build
sencha app build native
sencha app package run packager.json
Tem Acesso Nativo?
Acesso Nativo
App in PurchasesCâmeraContatos (read only)*Connection (online/offline)Device Info (nome, plataforma, uuid)GeoLocationNotifications (vibrar)OrientationPush Notifications
Acesso Nativo
App in PurchasesCâmeraContatos (read only)*Connection (online/offline)Device Info (nome, plataforma, uuid)GeoLocationNotifications (vibrar)OrientationPush Notifications
Sencha Packager*PhoneGapEmulator
Sencha Touch não tem
AcelerômetroCompass
File
Phone Gap
https://github.com/loiane/senchatouch2-contacts
Obrigada!
http://loiane.com@loiane
http://slideshare.com/loianeg