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!

1. Wednesday, November 2, 11

2. http://www.dkd.de
Wednesday, November 2, 11

3. Wednesday, November 2, 11

4. dkd
development
kommunikation
design
Wednesday, 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
VGF
Wednesday, November 2, 11

8. Nils Dehl
Senior Developer
Meetup Frankfurt
next 01.11.2011
Conference Talks
Trainings
Sencha Fanboy
official ‘unofficial’ Sencha
conference photographer
Wednesday, November 2, 11

9. Wednesday, November 2, 11

10. is.gd/senchacon
Wednesday, 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 employees
Wednesday, November 2, 11

12. Customer-Portfolio
Wednesday, 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
keep's 673,000 inhabitants
on the move every day
Wednesday, November 2, 11

14. VGF App
The App
Demo
Architecture
Components
Wednesday, November 2, 11

15. The VGF mobility SmartApp
stoerung.vgf-ffm.de
Wednesday, 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 Smartphones
Wednesday, November 2, 11

17. Wednesday, November 2, 11

18. web to mobile
Wednesday, November 2, 11

19. Wednesday, November 2, 11

20. Wednesday, November 2, 11

21. Wednesday, November 2, 11

22. DEMO
Wednesday, November 2, 11

23. Wednesday, November 2, 11

24. Wednesday, November 2, 11

25. Wednesday, November 2, 11

26. Architecture
Wednesday, November 2, 11

27. Architecture systems
Malfunction
Tool
HTML / JSON JSON
VGF Website VGF SmartApp
CMS TYPO3 Sencha Touch
Wednesday, 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 Theming
Wednesday, November 2, 11

29. File structure and naming
Wednesday, November 2, 11

30. File structure and naming
Wednesday, November 2, 11

31. Controller
viewport controller
Text
malfunction controller station controller
Wednesday, November 2, 11

32. keep the DOM clean
Wednesday, November 2, 11

33. Components
Wednesday, November 2, 11

34. search
hundreds of stations in
Frankfurt
search in local store
filter by
search word
index
filtered store used map view
Wednesday, November 2, 11

35. list
Wednesday, 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 list
Wednesday, November 2, 11

38. split in two views
Wednesday, 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 Templates
Wednesday, November 2, 11

41. Custom Templates
Wednesday, November 2, 11

42. count badges - store
Wednesday, November 2, 11

43. count badges - store
Wednesday, November 2, 11

44. count badges - store
Wednesday, November 2, 11

45. count badges - view
Wednesday, November 2, 11

46. twitter
easy twitter integration
twitter proxy
model
list view
custom template
custom bubble theming
Wednesday, November 2, 11

47. Wednesday, November 2, 11

48. A D
A D
A D
A D
D
Wednesday, 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. Theming
Wednesday, November 2, 11

55. theming
using SASS for easy theming
custom colored theme
base 64 icons / images
CSS3
shadows for content
container
twitter bubbles
Wednesday, November 2, 11

56. Optimisation
Wednesday, 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 file
Wednesday, 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.manifest
Wednesday, November 2, 11

59. Conclusion
Wednesday, 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 theming
Wednesday, November 2, 11

61. dkd
development
kommunikation
design
thank you.
Wednesday, November 2, 11

62. Questions???
stoerung.vgf-ffm.de
Wednesday, November 2, 11

63. @nilsdehl
flickr.com/photos/nils-dehl/
Wednesday, November 2, 11