tdc2013: arquitetura de apps com sencha touch 2

60
Trilha Mobile Loiane Groner http://loiane.com @loiane Arquitetura de apps com Sencha Touch 2

Upload: loiane-groner

Post on 17-Nov-2014

1.928 views

Category:

Technology


1 download

DESCRIPTION

Palestra apresentada na trilha Mobile do TDC 2013 SP no dia 14 de julho de 2013.

TRANSCRIPT

Page 1: TDC2013: Arquitetura de apps com Sencha Touch 2

Trilha Mobile

Loiane Gronerhttp://loiane.com

@loiane

Arquitetura de apps com Sencha Touch 2

Page 2: TDC2013: 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

Page 3: TDC2013: Arquitetura de apps com Sencha Touch 2

Momento Jabá

packpub.com ou amazon.com

Page 4: TDC2013: Arquitetura de apps com Sencha Touch 2

Pq Mobile?Pq

Multiplataforma?

1

Page 5: TDC2013: Arquitetura de apps com Sencha Touch 2
Page 6: TDC2013: Arquitetura de apps com Sencha Touch 2
Page 7: TDC2013: Arquitetura de apps com Sencha Touch 2
Page 8: TDC2013: Arquitetura de apps com Sencha Touch 2
Page 9: TDC2013: Arquitetura de apps com Sencha Touch 2

#changeBrazil

Page 10: TDC2013: Arquitetura de apps com Sencha Touch 2

Mobile

Page 11: TDC2013: Arquitetura de apps com Sencha Touch 2

Android Java

BackBerry Java

iOS Objective-C

Palm OS C, C++, Pascal

Symbian C++

Windows Phone C#

Page 12: TDC2013: Arquitetura de apps com Sencha Touch 2

Nativo x Web

2

Page 13: TDC2013: Arquitetura de apps com Sencha Touch 2
Page 14: TDC2013: Arquitetura de apps com Sencha Touch 2

App Híbrida?

Page 15: TDC2013: Arquitetura de apps com Sencha Touch 2
Page 16: TDC2013: Arquitetura de apps com Sencha Touch 2

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

Page 17: TDC2013: Arquitetura de apps com Sencha Touch 2

Desenvolva

Teste

Build

Desenvolva

Teste

Build

Desenvolva

Teste

Build Build

{Híbrido

WORA

Page 18: TDC2013: Arquitetura de apps com Sencha Touch 2

Sencha Touch

3

Page 19: TDC2013: Arquitetura de apps com Sencha Touch 2

Primeiro framework Javascript para desenvolvimento de apps mobile ricas

usando padrões web - HTML 5

Page 20: TDC2013: Arquitetura de apps com Sencha Touch 2

O que tem no Sencha Touch?

Componentes e LayoutsThemas e ÍconesOrientação e AnimaçãoEventos Touch e ScrollerPacote de DadosMVC

Page 21: TDC2013: Arquitetura de apps com Sencha Touch 2

ComponentesLists- Nested, Grouped, SortableCarouselPickerOverlaySliderForms & fields Toolbars & buttons HTML5- Audio- Video- GeoLocation

Lists - Nested, Grouped, SortableCarouselPickerOverlaySliderForms & fieldsToolbars & buttonsHTML5 - Audio - Video - GeoLocation

Components

Page 22: TDC2013: Arquitetura de apps com Sencha Touch 2

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});

Page 23: TDC2013: Arquitetura de apps com Sencha Touch 2

Forms

Page 24: TDC2013: Arquitetura de apps com Sencha Touch 2

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!'); }});

Page 25: TDC2013: Arquitetura de apps com Sencha Touch 2

Scrolling

ScrollingMomentum/bounce physics

Hardware accelerated

Throughout all components: - Lists - Carousel - Pickers

Page 26: TDC2013: Arquitetura de apps com Sencha Touch 2

Eventos Touch

Baseado em Eventos Nativos

Abstraído para Performance

Eventos Adicionais:- Tap- Double tap- Tap & hold - Swipe- Rotate- Drag & drop

Page 27: TDC2013: Arquitetura de apps com Sencha Touch 2

Data Package

Models, Stores, e Proxies- Associations- Validation- Local & server storage

Consumir web services- JSON/P - XML- YQL

Page 28: TDC2013: Arquitetura de apps com Sencha Touch 2

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

Page 29: TDC2013: Arquitetura de apps com Sencha Touch 2
Page 30: TDC2013: Arquitetura de apps com Sencha Touch 2
Page 31: TDC2013: Arquitetura de apps com Sencha Touch 2

"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" } ]

Page 32: TDC2013: Arquitetura de apps com Sencha Touch 2

Gráficos

Touch Charts

Page 33: TDC2013: Arquitetura de apps com Sencha Touch 2

Nossa App

4

Page 34: TDC2013: Arquitetura de apps com Sencha Touch 2

Pré-Requisitos

5

Page 35: TDC2013: Arquitetura de apps com Sencha Touch 2

Sencha Touch SDKSencha Cmd

Local WebServerBrowser (safari, Chrome)

EmuladoresDispositivos para testes

Page 36: TDC2013: Arquitetura de apps com Sencha Touch 2

Arquitetando+ Desenvolvimento

6

Page 37: TDC2013: Arquitetura de apps com Sencha Touch 2

Workflow deDesenvolvimento

Page 38: TDC2013: Arquitetura de apps com Sencha Touch 2

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

Page 39: TDC2013: Arquitetura de apps com Sencha Touch 2

MOCKUP

Page 40: TDC2013: Arquitetura de apps com Sencha Touch 2
Page 41: TDC2013: Arquitetura de apps com Sencha Touch 2

cd senchaTouchSDK

sencha app generateMyContacts

../TDC2013/MyContacts

Page 42: TDC2013: Arquitetura de apps com Sencha Touch 2
Page 43: TDC2013: Arquitetura de apps com Sencha Touch 2

Testes Locais

Page 44: TDC2013: Arquitetura de apps com Sencha Touch 2

Testes Automatizados

Page 45: TDC2013: Arquitetura de apps com Sencha Touch 2

http://bryntum.com

Page 46: TDC2013: Arquitetura de apps com Sencha Touch 2

Ferramentas de Debug

Page 47: TDC2013: Arquitetura de apps com Sencha Touch 2

chrome dev tools

Page 48: TDC2013: Arquitetura de apps com Sencha Touch 2

iWebInspector

Page 49: TDC2013: Arquitetura de apps com Sencha Touch 2

Weinre

Page 50: TDC2013: Arquitetura de apps com Sencha Touch 2
Page 51: TDC2013: Arquitetura de apps com Sencha Touch 2

Build

Page 52: TDC2013: Arquitetura de apps com Sencha Touch 2

sencha app build

sencha app build native

sencha app package run packager.json

Page 53: TDC2013: Arquitetura de apps com Sencha Touch 2
Page 54: TDC2013: Arquitetura de apps com Sencha Touch 2

Tem Acesso Nativo?

Page 55: TDC2013: Arquitetura de apps com Sencha Touch 2

Acesso Nativo

App in PurchasesCâmeraContatos (read only)*Connection (online/offline)Device Info (nome, plataforma, uuid)GeoLocationNotifications (vibrar)OrientationPush Notifications

Page 56: TDC2013: Arquitetura de apps com Sencha Touch 2

Acesso Nativo

App in PurchasesCâmeraContatos (read only)*Connection (online/offline)Device Info (nome, plataforma, uuid)GeoLocationNotifications (vibrar)OrientationPush Notifications

Sencha Packager*PhoneGapEmulator

Page 57: TDC2013: Arquitetura de apps com Sencha Touch 2

Sencha Touch não tem

AcelerômetroCompass

File

Page 58: TDC2013: Arquitetura de apps com Sencha Touch 2

Phone Gap

Page 60: TDC2013: Arquitetura de apps com Sencha Touch 2

Obrigada!

http://loiane.com@loiane

http://slideshare.com/loianeg