tdc2013: arquitetura de apps com sencha touch 2

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

Momento Jabá

packpub.com ou amazon.com

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

http://bryntum.com

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