Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

SenchaCon 2011 VGF Showcase

3,088 views

Published on

SenchaCon 2011 VGF Showcase

Published in: Technology
  • Be the first to comment

SenchaCon 2011 VGF Showcase

  1. 1. Showcase: VGFNils Dehl, Senior Developer (@nilsdehl)VGF Verkehrs Gesellschaft Frankfurt(Frankfurt am Main Transport Company)
  2. 2. AboutmedkdVGF
  3. 3. Nils Dehl Senior Developer Meetup Frankfurt next 01.11.2011 Conference Talks Trainings Sencha Fanboy of cial ‘unof cial’ Sencha conference photographer
  4. 4. is.gd/senchacon
  5. 5. dkd Internet Service GmbH owner-managed full-service internet agency Frankfurt Germany development, communication & design specialized in TYPO3 Ruby on Rails Sencha Touch / ExtJS 42 employees + 350 projects
  6. 6. Customer-Portfolio
  7. 7. VGF – everyone’s along for the ride Frankfurt’s transport company city traf c service provider more than 320 rail vehicles and 180 buses keeps 673,000 inhabitants on the move every day
  8. 8. VGF AppThe AppDemoArchitectureComponents
  9. 9. The VGF mobility SmartApp stoerung.vgf-ffm.de
  10. 10. The VGF mobility SmartApp search for nearby barrier free stations informs about delays displays twitter news Sencha Touch iPad, iPhone & Android Smartphones
  11. 11. web to mobile
  12. 12. DEMO
  13. 13. Architecture
  14. 14. Architecture systems Malfunction Tool Ruby on Rails HTML / JSON JSON VGF Website VGF SmartApp CMS TYPO3 Sencha Touch PHP JS
  15. 15. Architecture Sencha Touch App based on Sencha Touch version 0.98 -> 1.0.1a MVC pattern one class / component per le concatenation and mini cation of JS for production system by Ruby on Rails SASS Theming
  16. 16. File structure and naming
  17. 17. File structure and naming
  18. 18. Controller viewport controller Textmalfunction controller station controller
  19. 19. keep the DOM clean
  20. 20. Components
  21. 21. search hundreds of stations in Frankfurt search in local store lter by search word index ltered store used map view
  22. 22. list optimisations
  23. 23. before optimisation custom templates station list with some hundred records on mobile devices scrolling performance problem!
  24. 24. DOM optimisation for large list
  25. 25. split in two views
  26. 26. maps show station marker to the lists bound to list stores problem breaking changes in google maps API solution bind to google maps version<script type="text/javascript" src="http://maps.google.com/maps/api/ js?v=3.2&sensor=true" />
  27. 27. Custom Templates
  28. 28. Custom Templates
  29. 29. count badges - store
  30. 30. count badges - store
  31. 31. count badges - store
  32. 32. count badges - view
  33. 33. twitter easy twitter integration twitter proxy model list view custom template custom bubble theming
  34. 34. A A D A D AD A DD
  35. 35. Theming
  36. 36. theming using SASS for easy theming custom colored theme base 64 icons / images CSS3 shadows for content container twitter bubbles
  37. 37. Optimisation
  38. 38. files concatenate 36 JS les automatically to one le on production stage generate one CSS le using SASS and compass base 64 images minify JS and CSS le
  39. 39. cache manifest created vgf.manifest le phantomjs confess.js http://vgf-mobile.dev <html manifest="vgf.manifest"> AddType text/cache-manifest .manifest .htaccess with expire con guration vgf.manifest ExpiresActive On ExpiresDefault "access"
  40. 40. Conclusion
  41. 41. Conclusion use the MVC pattern keep your DOM clean manage DOM size in views destroy unused views optimize your app use JS concatenation / mini cation use cache manifest use SASS and compass for theming
  42. 42. dkd development kommunikation designthank you.
  43. 43. Questions???stoerung.vgf-ffm.de
  44. 44. @nilsdehlflickr.com/photos/nils-dehl/

×