community code: vgf mobility app
DESCRIPTION
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!TRANSCRIPT
Wednesday, November 2, 11
http://www.dkd.de
Wednesday, November 2, 11
Wednesday, November 2, 11
d dkdevelopmentkommunikationdesign
Wednesday, November 2, 11
Wednesday, November 2, 11
Showcase: VGF
Nils Dehl, Senior DeveloperVGF Verkehrs Gesellschaft Frankfurt(Frankfurt am Main Transport Company)
Wednesday, November 2, 11
About
medkdVGF
Wednesday, November 2, 11
Nils Dehl
Senior Developer
Meetup Frankfurt
next 01.11.2011
Conference Talks
Trainings
Sencha Fanboy
official ‘unofficial’ Sencha conference photographer
Wednesday, November 2, 11
Wednesday, November 2, 11
is.gd/senchacon
Wednesday, November 2, 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
Customer-Portfolio
Wednesday, November 2, 11
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
VGF App
The AppDemoArchitectureComponents
Wednesday, November 2, 11
The VGF mobility SmartApp
stoerung.vgf-ffm.deWednesday, November 2, 11
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
Wednesday, November 2, 11
web to mobile
Wednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
DEMOWednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
Architecture
Wednesday, November 2, 11
Architecture systems
JSON
Malfunction Tool
HTML / JSON
VGF WebsiteCMS TYPO3
VGF SmartApp Sencha Touch
Wednesday, November 2, 11
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
File structure and naming
Wednesday, November 2, 11
File structure and naming
Wednesday, November 2, 11
Controller
Text
viewport controller
station controllermalfunction controller
Wednesday, November 2, 11
keep the DOM clean
Wednesday, November 2, 11
Components
Wednesday, November 2, 11
search
hundreds of stations in Frankfurt
search in local store
filter by
search word
index
filtered store used map view
Wednesday, November 2, 11
list
Wednesday, November 2, 11
before optimisation
custom templates
station list with some hundred records
on mobile devices scrolling performance problem!
Wednesday, November 2, 11
DOM optimisation for large list
Wednesday, November 2, 11
split in two views
Wednesday, November 2, 11
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" />
Wednesday, November 2, 11
Custom Templates
Wednesday, November 2, 11
Custom Templates
Wednesday, November 2, 11
count badges - store
Wednesday, November 2, 11
count badges - store
Wednesday, November 2, 11
count badges - store
Wednesday, November 2, 11
count badges - view
Wednesday, November 2, 11
easy twitter integration
twitter proxy
model
list view
custom template
custom bubble theming
Wednesday, November 2, 11
Wednesday, November 2, 11
AD AD AD AD AD AD
Wednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
Wednesday, November 2, 11
Theming
Wednesday, November 2, 11
theming
using SASS for easy theming
custom colored theme
base 64 icons / images
CSS3
shadows for content container
twitter bubbles
Wednesday, November 2, 11
Optimisation
Wednesday, November 2, 11
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
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
Conclusion
Wednesday, November 2, 11
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
d dkdevelopmentkommunikationdesign
thank you.
Wednesday, November 2, 11
stoerung.vgf-ffm.de
Questions???
Wednesday, November 2, 11
@nilsdehl
flickr.com/photos/nils-dehl/
Wednesday, November 2, 11