Your SlideShare is downloading. ×

FrontInFloripa 2013: Sencha Touch 2 e Phonegap

1,353

Published on

Palestra apresentada no FronInFloripa (22 Novembro 2013)

Palestra apresentada no FronInFloripa (22 Novembro 2013)

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

No Downloads
Views
Total Views
1,353
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
18
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Apps Mobile Multiplataforma e OpenSource com Sencha Touch e Phonegap Loiane Groner http://loiane.com
  • 2. Me, Myself && I •Gerente de Desenv Projetos && Sencha Trainer •8+ XP TI •Java JUG Leader •Sencha Community Leader •http://loiane.com •@loiane
  • 3. packpub.com ou amazon.com
  • 4. Demo
  • 5. Sencha Touch
  • 6. “ O primeiro framework HTML5 mobile do mercado. http://www.sencha.com/products/touch/
  • 7. + Wrapper jQuery <HTML> DOM DOM Element DOM Element DOM Element … $(‘#selector’); append(); removeClass(); position();
  • 8. Sencha Touch Widgets <HTML> DOM List Button Toolbar Form … Ext.create(‘Ext.create,{…}’);
  • 9. Cross-Platform
  • 10. Plataforma Sencha
  • 11. Plataforma Sencha Ext JS + Touch
  • 12. Single Page App
  • 13. MVC Model-View-Controller
  • 14. Usuário View Model Controller
  • 15. Model
  • 16. View
  • 17. Controller
  • 18. Store
  • 19. Data Package
  • 20. REST
  • 21. JSON-P
  • 22. Local Storage Web SQL (SQLite)
  • 23. User Interface Design
  • 24. Componentes
  • 25. Eventos tap tap duplo pinch zoom swipe
  • 26. Demo
  • 27. Temas
  • 28. Licença • Open Source • Commercial Software
  • 29. Licença • Open Source • Commercial Software
  • 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. 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. 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. 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. 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. PhoneGap
  • 36. “ Acesso Nativo ao Device usando apenas JavaScript. http://phonegap.com/
  • 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. 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. Porque Híbrido?
  • 40. E vos declaro Apps Mobile Híbridas
  • 41. Apenas Phonegap?
  • 42. Demo
  • 43. Plugins
  • 44. https://github.com/lite4cordova/Cordova-SQLitePlugin
  • 45. OffLine First
  • 46. https://github.com/shepsii/SQLite-Proxy-ST2
  • 47. Isso é lindo!
  • 48. Build Otimizado Agrega Valor!
  • 49. 29.1 Mb 1.1 Mb
  • 50. Demo
  • 51. Sencha Architect
  • 52. http://www.sencha.com/apps/ http://phonegap.com/app/
  • 53. <div id="jogador">
  • 54. http://phonegap.com/app/fruit-salad/
  • 55. Demo
  • 56. http://www.bryntum.com/products/siesta/
  • 57. http://loiane.com facebook.com/loianegroner @loiane https://github.com/loiane youtube.com/user/Loianeg
  • 58. Obrigada! http://loiane.com

×