FrontInFloripa 2013: Sencha Touch 2 e Phonegap

1,559 views

Published on

Palestra apresentada no FronInFloripa (22 Novembro 2013)

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,559
On SlideShare
0
From Embeds
0
Number of Embeds
31
Actions
Shares
0
Downloads
19
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

FrontInFloripa 2013: Sencha Touch 2 e Phonegap

  1. 1. Apps Mobile Multiplataforma e OpenSource com Sencha Touch e Phonegap Loiane Groner http://loiane.com
  2. 2. Me, Myself && I •Gerente de Desenv Projetos && Sencha Trainer •8+ XP TI •Java JUG Leader •Sencha Community Leader •http://loiane.com •@loiane
  3. 3. packpub.com ou amazon.com
  4. 4. Demo
  5. 5. Sencha Touch
  6. 6. “ O primeiro framework HTML5 mobile do mercado. http://www.sencha.com/products/touch/
  7. 7. + Wrapper jQuery <HTML> DOM DOM Element DOM Element DOM Element … $(‘#selector’); append(); removeClass(); position();
  8. 8. Sencha Touch Widgets <HTML> DOM List Button Toolbar Form … Ext.create(‘Ext.create,{…}’);
  9. 9. Cross-Platform
  10. 10. Plataforma Sencha
  11. 11. Plataforma Sencha Ext JS + Touch
  12. 12. Single Page App
  13. 13. MVC Model-View-Controller
  14. 14. Usuário View Model Controller
  15. 15. Model
  16. 16. View
  17. 17. Controller
  18. 18. Store
  19. 19. Data Package
  20. 20. REST
  21. 21. JSON-P
  22. 22. Local Storage Web SQL (SQLite)
  23. 23. User Interface Design
  24. 24. Componentes
  25. 25. Eventos tap tap duplo pinch zoom swipe
  26. 26. Demo
  27. 27. Temas
  28. 28. Licença • Open Source • Commercial Software
  29. 29. Licença • Open Source • Commercial Software
  30. 30. Server Side Web Execut a UI e Lógica de negó cio Web Server / ttp:/ h Java/ PHP/ Ruby/C# Web Browser Arquivos Banco de Imagens/ Dados Documentos Dispositivo um nas dor Ape riza de ren Backend
  31. 31. Client Side Web Web Browser JavaScript Imagens/ Documentos de negó cio Web Server tp:// ht Sencha Touch Arquivos Lógica Banco de Dados caching UI e de Dispositivo uta gica xec e ) ló ma cio lgu egó (a n Java/ PHP/ Ruby/C# Arquivos Banco de Imagens/ Dados Documentos Backend
  32. 32. Client Side Web Web Browser JavaScript Sencha Touch Arquivos Imagens/ Documentos Banco de Dados caching Dispositivo Web Server Java/ PHP/ Ruby/C# Arquivos Banco de Imagens/ Dados Documentos Backend
  33. 33. Client Side Web Web Browser JavaScript Sencha Touch Arquivos Imagens/ Documentos Banco de Dados caching Dispositivo :// ttp h Web Server Java/ PHP/ Ruby/C# Arquivos Banco de Imagens/ Dados Documentos Backend
  34. 34. Client Side Web Web Browser JavaScript Sencha Touch Web Server :// ttp h Java/ PHP/ Ruby/C# CORS Arquivos Banco de Banco Arquivos http://enable-cors.org/ Imagens/ Documentos de Dados caching Dispositivo Imagens/ Documentos Dados Backend
  35. 35. PhoneGap
  36. 36. “ Acesso Nativo ao Device usando apenas JavaScript. http://phonegap.com/
  37. 37. Android Accelerometer Camera Capture Compass Connection Contacts Device Events File Geolocation Globalization InAppBrowser Media Notification Spalshscreen Storage iOS BB 10 WP 8 Tizen P P P P P P P P P P P P P P P P P P P P P (3GS P +)s P dfs P df P P P P P P P P P P P P P P P P P P O P P P P P P P P P P P P P P P O P P O P P O P O O P P O P Parcial P P P P P P Parcial
  38. 38. App Híbrida App Nativa Código Nativo Interpretador Lógica de negó cio Web Server tp:// ht Java/ PHP/ Ruby/C# :// ttp h PhoneGap JavaScript Sencha Touch / jQquery Mobile UI e de Dispositivo uta gica xec e ) ló ma cio lgu egó (a n Arquivos Banco de Imagens/ Dados Documentos Backend
  39. 39. Porque Híbrido?
  40. 40. E vos declaro Apps Mobile Híbridas
  41. 41. Apenas Phonegap?
  42. 42. Demo
  43. 43. Plugins
  44. 44. https://github.com/lite4cordova/Cordova-SQLitePlugin
  45. 45. OffLine First
  46. 46. https://github.com/shepsii/SQLite-Proxy-ST2
  47. 47. Isso é lindo!
  48. 48. Build Otimizado Agrega Valor!
  49. 49. 29.1 Mb 1.1 Mb
  50. 50. Demo
  51. 51. Sencha Architect
  52. 52. http://www.sencha.com/apps/ http://phonegap.com/app/
  53. 53. <div id="jogador">
  54. 54. http://phonegap.com/app/fruit-salad/
  55. 55. Demo
  56. 56. http://www.bryntum.com/products/siesta/
  57. 57. http://loiane.com facebook.com/loianegroner @loiane https://github.com/loiane youtube.com/user/Loianeg
  58. 58. Obrigada! http://loiane.com

×