QConSP 2012: Sencha Touch 2: Mobile Multiplataforma

Sencha Touch 2: Mobile Multiplataforma

Loiane Gronerww.loiane.com@loiane

Loiane Groner

Evangelista Java e Sencha

Autora internacional

Gerente de Projetos

http://loiane.com

@loiane

Antes de começar...

Novidades HTML 5

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

Melhor Semântica

•Mais tags HTML•Microdata•Microformats

Offline Storate

•App Cache

•Local storage

•Session storage

•Web database

Acesso ao Device

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

Melhor Conectividade

•Web Sockets nativos

Multimedia

•Audio•Video

Acesso Gráficos nativos

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

Melhor Performance

•Webwork•Threaded JavaScript

•XHR2•Blob•Checked data•Requests cross domain

CSS3

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

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

PQ?

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)

Tecnologias

O que éSencha Touch?

Primeiro framework Javascript para desenvolvimento de apps mobile ricas

usando padrões web

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

Forms

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

Plataformas

iOS

Android

Roadmap: Windows Phone

Webkit

Charts

Acesso Nativo

Câmera

Ext.device.Camera.capture({ source: 'camera', destination: 'file',

success: function(url) { //mostra foto em um widget the Imagem: Ext.create('Ext.Img', { src: url, fullscreen: true }); }});

Geolocation

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

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

Notification

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

Ext.device.notification.vibrate();

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

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

Offline appif (Ext.device.Connection.isOnline()) { Ext.Msg.alert('You are currently connected via ' + Ext.device.Connection.getType());} else { Ext.Msg.alert('You are not currently connected');}

Sencha Touch 2+

ExtJS 4

json json

Views Views

Controllers

Models

Stores

Proxies

Servidor

.

.

.

Testes

Jasmine

PhantomJS

JSLint

Free

Continuous Integration + Suporte

Paga = US$ 499

Exemplo app nativa iOS e Android em 5 minutos

Show me the code!

Demos apps existentes

Curso Gratuito

ExtJS 4

Sencha Touch 2

http://loiane.com

Obrigada!

Loiane Gronerww.loiane.com@loiane