SenchaCon 2011 VGF Showcase

Showcase: VGFNils Dehl, Senior Developer (@nilsdehl)VGF Verkehrs Gesellschaft Frankfurt(Frankfurt am Main Transport Company)

AboutmedkdVGF

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 keeps 673,000 inhabitants on the move every day

VGF AppThe AppDemoArchitectureComponents

The VGF mobility SmartApp stoerung.vgf-ffm.de

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

Architecture

Architecture systems Malfunction Tool Ruby on Rails HTML / JSON JSON VGF Website VGF SmartApp CMS TYPO3 Sencha Touch PHP 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

Controller viewport controller Textmalfunction controller station 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

count badges - store

count badges - view

twitter easy twitter integration twitter proxy model list view custom template custom bubble theming

A A D A D AD A DD

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

dkd development kommunikation designthank you.

Questions???stoerung.vgf-ffm.de

@nilsdehlflickr.com/photos/nils-dehl/

http://www.nils-dehl.de	1500
http://flavors.me	8
http://a0.twimg.com	6
http://translate.googleusercontent.com	3
http://webcache.googleusercontent.com	2
http://us-w1.rockmelt.com	1

SenchaCon 2011 VGF Showcase

by Nils Dehl

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 1,520

Statistics

SenchaCon 2011 VGF Showcase Presentation Transcript