qconsp 2012: sencha touch 2: mobile multiplataforma

65
Sencha Touch 2: Mobile Multiplataforma Loiane Groner ww.loiane.com @loiane

Upload: loiane-groner

Post on 14-Jan-2015

1.957 views

Category:

Technology


0 download

DESCRIPTION

P

TRANSCRIPT

Page 1: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Sencha Touch 2: Mobile Multiplataforma

Loiane Gronerww.loiane.com@loiane

Page 2: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Loiane Groner

Evangelista Java e Sencha

Autora internacional

Gerente de Projetos

http://loiane.com

@loiane

Page 3: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Antes de começar...

Page 4: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma
Page 5: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Novidades HTML 5

•Melhor Semântica•Offline Storate•Acesso ao Device•Melhor Conectividade•Multimedia•Acesso Gráficos nativos•Melhor Performance•CSS3

Page 6: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Melhor Semântica

•Mais tags HTML•Microdata•Microformats

Page 7: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Offline Storate

•App Cache

•Local storage

•Session storage

•Web database

Page 8: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Acesso ao Device

•GeoLocalização•Acelerômetro•Input Audio/Câmera•Compass (iOS 5)

Page 9: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Melhor Conectividade

•Web Sockets nativos

Page 10: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Multimedia

•Audio•Video

Page 11: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Acesso Gráficos nativos

•SVG, Canvas, VML•Animações 3D com CSS•WebGL

Page 12: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Melhor Performance

•Webwork•Threaded JavaScript

•XHR2•Blob•Checked data•Requests cross domain

Page 13: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

CSS3

•Layouts melhores e mais rápidos•Trasições nativas

•aceleração de hardware 3D•Gradientes•Formato Web Open Font

Page 14: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

PQ?

Page 15: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Escolha HTML 5 se:

•Desenvolver app com número pessoas limitadas

•App para mobile devices

•Deploy apps sem limitação de app stores

•App tem que ser acessível em qualquer lugar

•Quer usar skills existentes (HTML, CSS, JS)

Page 16: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Tecnologias

Page 17: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma
Page 18: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma
Page 19: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma
Page 20: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma
Page 21: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma
Page 22: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma
Page 23: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

O que éSencha Touch?

Page 24: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Primeiro framework Javascript para desenvolvimento de apps mobile ricas

usando padrões web

Page 25: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

O que tem no Sencha Touch?

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

Page 26: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

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

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

Components

Page 27: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Forms

Page 28: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Scrolling

ScrollingMomentum/bounce physics

Hardware accelerated

Throughout all components: - Lists - Carousel - Pickers

Page 29: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Eventos Touch

Baseado em Eventos Nativos

Abstraído para Performance

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

Page 30: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Data Package

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

Consumir web services- JSON/P - XML- YQL

Page 31: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

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 32: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Plataformas

Page 33: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

iOS

Page 34: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Android

Page 35: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Roadmap: Windows Phone

Page 36: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma
Page 37: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Webkit

Page 38: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma
Page 39: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Charts

Page 40: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma
Page 41: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Acesso Nativo

Page 43: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Geolocation

Ext.device.Geolocation.getCurrentPosition({ success: function(position) { console.log(position.coords); }, failure: function() { console.log('something went wrong!'); }});

Page 44: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Ext.device.Geolocation.watchPosition({ frequency: 3000, // Update every 3 seconds callback: function(position) { console.log('Position updated!', position.coords); }, failure: function() { console.log('something went wrong!'); }});

Page 45: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Notification

Ext.device.Notification.show({ title: 'One Button', message: 'This is a simple notification with one button.'});

Ext.device.notification.vibrate();

Page 46: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Push - iOS

Ext.device.Push.register({ type: Ext.device.Push.ALERT|Ext.device.Push.BADGE|Ext.device.Push.SOUND, success: function(token) { console.log('# Push notification registration successful:'); console.log(' token: ' + token); }, failure: function(error) { console.log('# Push notification registration unsuccessful:'); console.log(' error: ' + error); }, received: function(notifications) { console.log('# Push notification received:'); console.log(' ' + JSON.stringify(notifications)); }});

Page 47: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Orientação

Ext.device.Orientation.on({ scope: this, orientationchange: function(e) { console.log('Alpha: ', e.alpha); console.log('Beta: ', e.beta); console.log('Gamma: ', e.gamma); }});

Page 49: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma
Page 50: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma
Page 51: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Sencha Touch 2+

ExtJS 4

Page 52: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

json json

Views Views

Controllers

Models

Stores

Proxies

Servidor

.

.

.

Page 53: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Testes

Page 54: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Jasmine

PhantomJS

JSLint

Page 55: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma
Page 56: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Free

Page 57: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Continuous Integration + Suporte

Paga = US$ 499

Page 58: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Exemplo app nativa iOS e Android em 5 minutos

Show me the code!

Page 59: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Demos apps existentes

Page 60: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma
Page 61: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma
Page 62: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma
Page 63: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma
Page 64: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Curso Gratuito

ExtJS 4

Sencha Touch 2

http://loiane.com

Page 65: QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Obrigada!

Loiane Gronerww.loiane.com@loiane