senchacon 2011 vgf showcase
DESCRIPTION
SenchaCon 2011 VGF ShowcaseTRANSCRIPT
Showcase: VGF
Nils Dehl, Senior Developer (@nilsdehl)
VGF Verkehrs Gesellschaft Frankfurt(Frankfurt am Main Transport Company)
About
medkdVGF
Nils Dehl
Senior Developer
Meetup Frankfurt
next 01.11.2011
Conference Talks
Trainings
Sencha Fanboy
of!cial ‘unof!cial’ Sencha conference photographer
is.gd/senchacon
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
Customer-Portfolio
VGF – everyone’s along!for the ride
Frankfurt’s
transport company
city traf!c service provider
more than 320 rail vehicles and 180 buses
keep's 673,000 inhabitants on the move every day
VGF App
The AppDemoArchitectureComponents
The VGF mobility SmartApp
search for nearby barrier free stations
informs about delays
displays twitter news
Sencha Touch
iPad, iPhone & Android Smartphones
web to mobile
DEMO
Architecture
Architecture systems
JSON
Malfunction ToolRuby on Rails
HTML / JSON
VGF WebsiteCMS TYPO3
PHP
VGF SmartApp Sencha Touch
JS
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
File structure and naming
File structure and naming
Controller
Text
viewport controller
station controllermalfunction controller
keep the DOM clean
Components
search
hundreds of stations in Frankfurt
search in local store
!lter by
search word
index
!ltered store used map view
list optimisations
before optimisation
custom templates
station list with some hundred records
on mobile devices scrolling performance problem!
DOM optimisation for large list
split in two views
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" />
Custom Templates
Custom Templates
count badges - store
count badges - store
count badges - store
count badges - view
easy twitter integration
twitter proxy
model
list view
custom template
custom bubble theming
AD AD AD AD AD AD
Theming
theming
using SASS for easy theming
custom colored theme
base 64 icons / images
CSS3
shadows for content container
twitter bubbles
Optimisation
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
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"
Conclusion
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
d dkdevelopmentkommunikationdesign
thank you.
stoerung.vgf-ffm.de
Questions???
@nilsdehl
flickr.com/photos/nils-dehl/