Community Code: VGF Mobility App
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Community Code: VGF Mobility App

  • 1,754 views
Uploaded on

The VGF mobility SmartApp for public transport in Frankfurt, Germany, is a mobile web app developed with Sencha Touch for iPhone and Android smartphones. The app allows you to search for nearby......

The VGF mobility SmartApp for public transport in Frankfurt, Germany, is a mobile web app developed with Sencha Touch for iPhone and Android smartphones. The app allows you to search for nearby barrier free stations, informs the user of delays, and displays Twitter news. In this session, we will go through the app architecture, show how large data lists from a Ruby on Rails backend are loaded and handled, and how custom templates, Google Maps and Twitter were integrated. Finally, we cover the custom SASS theming, including custom CSS3 elements - and discuss the lessons we learned and the performance optimizations we used during development.

Nils Dehl is 28-year-old senior developer living in Darmstadt Germany, working for dkd Internet Service GmbH, an owner-managed full-service internet agency specialized in TYPO3 in Frankfurt Germany.

Nils has worked in ExtJS application development since version 2.x, and Sencha Touch since its beginning. Besides development, he also holds training and conference talks for both products and is the organizer of the ExtJS/Sencha Touch meetup in Frankfurt.

In his spare time he plays table-tennis and squash, likes to travel, read and ski and of course photography. Nils is the official ‘unofficial’ Sencha conference photographer!

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,754
On Slideshare
1,663
From Embeds
91
Number of Embeds
1

Actions

Shares
Downloads
7
Comments
0
Likes
0

Embeds 91

http://www.sencha.com 91

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. http://www.dkd.deWednesday, November 2, 11
  • 3. Wednesday, November 2, 11
  • 4. dkd development kommunikation designWednesday, November 2, 11
  • 5. Wednesday, November 2, 11
  • 6. Showcase: VGF Nils Dehl, Senior Developer VGF Verkehrs Gesellschaft Frankfurt (Frankfurt am Main Transport Company)Wednesday, November 2, 11
  • 7. About me dkd VGFWednesday, November 2, 11
  • 8. Nils Dehl Senior Developer Meetup Frankfurt next 01.11.2011 Conference Talks Trainings Sencha Fanboy official ‘unofficial’ Sencha conference photographerWednesday, November 2, 11
  • 9. Wednesday, November 2, 11
  • 10. is.gd/senchaconWednesday, November 2, 11
  • 11. 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 employeesWednesday, November 2, 11
  • 12. Customer-PortfolioWednesday, November 2, 11
  • 13. VGF – everyone’s along for the ride Frankfurt’s transport company city traffic service provider more than 320 rail vehicles and 180 buses keeps 673,000 inhabitants on the move every dayWednesday, November 2, 11
  • 14. VGF App The App Demo Architecture ComponentsWednesday, November 2, 11
  • 15. The VGF mobility SmartApp stoerung.vgf-ffm.deWednesday, November 2, 11
  • 16. The VGF mobility SmartApp search for nearby barrier free stations informs about delays displays twitter news Sencha Touch iPad, iPhone & Android SmartphonesWednesday, November 2, 11
  • 17. Wednesday, November 2, 11
  • 18. web to mobileWednesday, November 2, 11
  • 19. Wednesday, November 2, 11
  • 20. Wednesday, November 2, 11
  • 21. Wednesday, November 2, 11
  • 22. DEMOWednesday, November 2, 11
  • 23. Wednesday, November 2, 11
  • 24. Wednesday, November 2, 11
  • 25. Wednesday, November 2, 11
  • 26. ArchitectureWednesday, November 2, 11
  • 27. Architecture systems Malfunction Tool HTML / JSON JSON VGF Website VGF SmartApp CMS TYPO3 Sencha TouchWednesday, November 2, 11
  • 28. Architecture Sencha Touch App based on Sencha Touch version 0.98 -> 1.0.1a MVC pattern one class / component per file concatenation and minification of JS for production system by Ruby on Rails SASS ThemingWednesday, November 2, 11
  • 29. File structure and namingWednesday, November 2, 11
  • 30. File structure and namingWednesday, November 2, 11
  • 31. Controller viewport controller Text malfunction controller station controllerWednesday, November 2, 11
  • 32. keep the DOM cleanWednesday, November 2, 11
  • 33. ComponentsWednesday, November 2, 11
  • 34. search hundreds of stations in Frankfurt search in local store filter by search word index filtered store used map viewWednesday, November 2, 11
  • 35. listWednesday, November 2, 11
  • 36. before optimisation custom templates station list with some hundred records on mobile devices scrolling performance problem!Wednesday, November 2, 11
  • 37. DOM optimisation for large listWednesday, November 2, 11
  • 38. split in two viewsWednesday, November 2, 11
  • 39. maps show station marker to the lists bound to list stores problem breaking changes in google maps API solution <script bind to google maps version type="text/javascript" src="http://maps.google.com/maps/api/ js?v=3.2&sensor=true" />Wednesday, November 2, 11
  • 40. Custom TemplatesWednesday, November 2, 11
  • 41. Custom TemplatesWednesday, November 2, 11
  • 42. count badges - storeWednesday, November 2, 11
  • 43. count badges - storeWednesday, November 2, 11
  • 44. count badges - storeWednesday, November 2, 11
  • 45. count badges - viewWednesday, November 2, 11
  • 46. twitter easy twitter integration twitter proxy model list view custom template custom bubble themingWednesday, November 2, 11
  • 47. Wednesday, November 2, 11
  • 48. A D A D A D A D DWednesday, November 2, 11
  • 49. Wednesday, November 2, 11
  • 50. Wednesday, November 2, 11
  • 51. Wednesday, November 2, 11
  • 52. Wednesday, November 2, 11
  • 53. Wednesday, November 2, 11
  • 54. ThemingWednesday, November 2, 11
  • 55. theming using SASS for easy theming custom colored theme base 64 icons / images CSS3 shadows for content container twitter bubblesWednesday, November 2, 11
  • 56. OptimisationWednesday, November 2, 11
  • 57. files concatenate 36 JS files automatically to one file on production stage generate one CSS file using SASS and compass base 64 images minify JS and CSS fileWednesday, November 2, 11
  • 58. cache manifest created vgf.manifest file phantomjs confess.js http://vgf- mobile.dev <html manifest="vgf.manifest"> AddType text/cache-manifest .manifest .htaccess with expire configuration vgf.manifestWednesday, November 2, 11
  • 59. ConclusionWednesday, November 2, 11
  • 60. Conclusion use the MVC pattern keep your DOM clean manage DOM size in views destroy unused views optimize your app use JS concatenation / minification use cache manifest use SASS and compass for themingWednesday, November 2, 11
  • 61. dkd development kommunikation design thank you.Wednesday, November 2, 11
  • 62. Questions??? stoerung.vgf-ffm.deWednesday, November 2, 11
  • 63. @nilsdehl flickr.com/photos/nils-dehl/Wednesday, November 2, 11