TDC2013: Arquitetura de apps com Sencha Touch 2

1,488
-1

Published on

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

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,488
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
52
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

TDC2013: Arquitetura de apps com Sencha Touch 2

  1. 1. Trilha Mobile Loiane Groner http://loiane.com @loiane Arquitetura de apps com Sencha Touch 2
  2. 2. Me, Myself & I •Gerente de Desenv Projetos @Citibank •8+ XP TI •Java JUG Leader •Sencha Community Leader •http://loiane.com •@loiane
  3. 3. Momento Jabá packpub.com ou amazon.com
  4. 4. Pq Mobile? Pq Multiplataforma? 1
  5. 5. #changeBrazil
  6. 6. Mobile
  7. 7. Android Java BackBerry Java iOS Objective-C Palm OS C, C++, Pascal Symbian C++ Windows Phone C#
  8. 8. Nativo x Web 2
  9. 9. App Híbrida?
  10. 10. 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
  11. 11. Desenvolva Teste Build Desenvolva Teste Build Desenvolva Teste Build Build {Híbrido WORA
  12. 12. Sencha Touch 3
  13. 13. Primeiro framework Javascript para desenvolvimento de apps mobile ricas usando padrões web - HTML 5
  14. 14. O que tem no Sencha Touch? Componentes e Layouts Themas e Ícones Orientação e Animação Eventos Touch e Scroller Pacote de Dados MVC
  15. 15. Componentes Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars & buttons HTML5 - Audio -Video - GeoLocation Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars & buttons HTML5 - Audio - Video Components
  16. 16. 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 });
  17. 17. Forms
  18. 18. 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!'); } });
  19. 19. Scrolling Scrolling Momentum/bounce physics ardware accelerated hroughout all components: Lists Carousel Pickers
  20. 20. Eventos Touch Baseado em Eventos Nativos Abstraído para Performance Eventos Adicionais: - Tap - Double tap - Tap & hold - Swipe - Rotate - Drag & drop
  21. 21. Data Package Models, Stores, e Proxies - Associations -Validation - Local & server storage Consumir web services - JSON/P - XML -YQL
  22. 22. 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 com Sass e Compass
  23. 23. "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" } ]
  24. 24. Gráficos Touch Charts
  25. 25. Nossa App 4
  26. 26. Pré- Requisitos 5
  27. 27. Sencha Touch SDK Sencha Cmd Local WebServer Browser (safari, Chrome) Emuladores Dispositivos para testes
  28. 28. Arquitetando + Desenvolvimento 6
  29. 29. Workflow de Desenvolvimento
  30. 30. Mockup Arquitetura da app - MVC Estrutura UI Modelagem Dados Binding Dados - View Eventos - Controller Página Detalhe e Form Customização - Sass e Compass Testes Emulação Teste Device Produção
  31. 31. M O C K U P
  32. 32. cd senchaTouchSDK sencha app generate MyContacts ../TDC2013/MyContacts
  33. 33. Testes Locais
  34. 34. Testes Automatizados
  35. 35. http://bryntum.com
  36. 36. Ferramentas de Debug
  37. 37. chrome dev tools
  38. 38. iWebInspector
  39. 39. Weinre
  40. 40. Build
  41. 41. sencha app build sencha app build native sencha app package run packager.json
  42. 42. Tem Acesso Nativo?
  43. 43. Acesso Nativo App in Purchases Câmera Contatos (read only)* Connection (online/offline) Device Info (nome, plataforma, uuid) GeoLocation Notifications (vibrar) Orientation Push Notifications
  44. 44. Acesso Nativo App in Purchases Câmera Contatos (read only)* Connection (online/offline) Device Info (nome, plataforma, uuid) GeoLocation Notifications (vibrar) Orientation Push Notifications Sencha Packager* PhoneGap Emulator
  45. 45. Sencha Touch não tem Acelerômetro Compass File
  46. 46. Phone Gap
  47. 47. https://github.com/loiane/ senchatouch2-contacts
  48. 48. Obrigada! http://loiane.com @loiane http://slideshare.com/loianeg
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×