Your SlideShare is downloading. ×
0
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Community Code: The SenchaCon App
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Community Code: The SenchaCon App

2,266

Published on

Jay Garcia will discuss how Modus Create constructed the SenchaCon mobile application using Sencha Touch 2. Through this presentation, take you through deep dives into the SenchaCon app codebase, as …

Jay Garcia will discuss how Modus Create constructed the SenchaCon mobile application using Sencha Touch 2. Through this presentation, take you through deep dives into the SenchaCon app codebase, as well as discuss many of the decisions they made along the way. Many technical details about Sencha Touch itself will be peppered through this walkthrough.

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

  • Be the first to like this

No Downloads
Views
Total Views
2,266
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
58
Comments
0
Likes
0
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. Wednesday, November 2, 11
  • 2. About usWednesday, November 2, 11
  • 3. The SenchaCon app team Development DesignWednesday, November 2, 11
  • 4. The SenchaCon app supportersWeb API Sencha EngineersWednesday, November 2, 11
  • 5. The SenchaCon app • Uses Sencha Touch 2 • 35 classes • Takes advantage of Ext Loader (debug) • Implements MVC (extensively!)Wednesday, November 2, 11
  • 6. The SenchaCon app • Leverages Local Storage • Uses app cache (offline storage) • Implements ComponentQuery • Not a single component with a static id!Wednesday, November 2, 11
  • 7. The SenchaCon appWednesday, November 2, 11
  • 8. The SenchaCon app • Highly optimized custom components • Reusability kept in mind throughout code base • Code developed with minification in mind • Minified with Sencha SDK Tools 2.0Wednesday, November 2, 11
  • 9. Breaking the ice • Develop individual views & models in their own sandbox • Views should work independently • One HTML file per view for testing • Test fired events via Webkit console • Allowed for us to divide and conquerWednesday, November 2, 11
  • 10. Pass #1 • Initial development done in Sencha touch 1.0 • Used MVC • Router • History • Best practices for extending components • Paved the way for the Sencha Touch 2.0 migrationWednesday, November 2, 11
  • 11. Wednesday, November 2, 11
  • 12. Enter Sencha Touch 2!Wednesday, November 2, 11
  • 13. Migrate to the new class systemWednesday, November 2, 11
  • 14. Sencha Touch 2.0 migration • Change the namespace to match the new MVC pattern • Views • Models • Controllers • UtilitiesWednesday, November 2, 11
  • 15. Quick MVC thoughts • Controller is at the center Controller • Controller subscribes to events from the view • Controller updates the model View Model • Model drives the viewWednesday, November 2, 11
  • 16. Quick MVC thoughts App Controller • Application extends Controller! • Controllers can talk to the application via events or direct Controller methods calls View ModelWednesday, November 2, 11
  • 17. Multi-controller application App Controller Controller Controller View Model View ModelWednesday, November 2, 11
  • 18. The class architecture Data Util Manager App Schedule Sessions Session Speakers Speaker Viewport NavBar Panel List Detail List Detail Schedule Sessions Session Speakers Speaker Viewport NavBar Session Speaker Panel List Detail List DetailWednesday, November 2, 11
  • 19. Wednesday, November 2, 11
  • 20. Wednesday, November 2, 11
  • 21. Wednesday, November 2, 11
  • 22. Building the Viewport App Viewport Viewport History storeWednesday, November 2, 11
  • 23. Wednesday, November 2, 11
  • 24. Wednesday, November 2, 11
  • 25. Wednesday, November 2, 11
  • 26. Wednesday, November 2, 11
  • 27. Building navigation App Viewport NavBar Viewport History NavBar storeWednesday, November 2, 11
  • 28. Wednesday, November 2, 11
  • 29. Wednesday, November 2, 11
  • 30. Adding the schedule panel App Schedule Viewport NavBar Panel History Schedule Viewport NavBar store PanelWednesday, November 2, 11
  • 31. Wednesday, November 2, 11
  • 32. Wednesday, November 2, 11
  • 33. Wednesday, November 2, 11
  • 34. Adding the sessions list App Schedule Sessions Viewport NavBar Panel List Schedule Sessions Viewport NavBar Session Panel ListWednesday, November 2, 11
  • 35. Wednesday, November 2, 11
  • 36. Wednesday, November 2, 11
  • 37. Wednesday, November 2, 11
  • 38. Adding the schedule panel App Schedule Sessions Session Viewport NavBar Panel List Detail Schedule Sessions Session Viewport NavBar Session Panel List DetailWednesday, November 2, 11
  • 39. A highly optimized view!Wednesday, November 2, 11
  • 40. Wednesday, November 2, 11
  • 41. Wednesday, November 2, 11
  • 42. Wednesday, November 2, 11
  • 43. Wednesday, November 2, 11
  • 44. Adding session speaker details App Schedule Sessions Session Speaker Viewport NavBar Panel List Detail Detail Schedule Sessions Session Speaker Viewport NavBar Session Speaker Panel List Detail DetailWednesday, November 2, 11
  • 45. Adding session speaker detailsWednesday, November 2, 11
  • 46. Wednesday, November 2, 11
  • 47. Wednesday, November 2, 11
  • 48. Adding session speaker details App Schedule Sessions Session Speakers Speaker Viewport NavBar Panel List Detail List Detail Schedule Sessions Session Speakers Speaker Viewport NavBar Session Speaker Panel List Detail List DetailWednesday, November 2, 11
  • 49. Questions? • Contact info: • twitter: • @moduscreate Thank you! • @_jdg • jay@moduscreate.comWednesday, November 2, 11

×