Community Code: VGF Mobility App

•

0 likes•1,254 views

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!

Technology

http://www.dkd.de

Wednesday, November 2, 11

dkd
development
kommunikation
design

Wednesday, November 2, 11

Showcase: VGF

Nils Dehl, Senior Developer
VGF Verkehrs Gesellschaft Frankfurt
(Frankfurt am Main Transport Company)

Wednesday, November 2, 11

About

me
dkd
VGF

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

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 App
Demo
Architecture
Components

Wednesday, November 2, 11

The VGF mobility SmartApp

stoerung.vgf-ffm.de
Wednesday, 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

web to mobile

Wednesday, November 2, 11

Architecture systems

Malfunction
Tool

HTML / JSON JSON

VGF Website VGF SmartApp
CMS TYPO3 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 ﬁle
concatenation and miniﬁcation of JS
for production system by Ruby on Rails
SASS Theming

Wednesday, November 2, 11

File structure and naming

Wednesday, November 2, 11

Controller

viewport controller

Text

malfunction controller station controller

Wednesday, November 2, 11

keep the DOM clean

Wednesday, November 2, 11

search

hundreds of stations in
Frankfurt
search in local store
ﬁlter by
search word
index
ﬁltered store used map view

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
<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

Custom Templates

Wednesday, November 2, 11

count badges - store

Wednesday, November 2, 11

count badges - view

Wednesday, November 2, 11

twitter

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

Wednesday, November 2, 11

A D
A D
A D
A D
D
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

ﬁles

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

Wednesday, November 2, 11

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

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 / miniﬁcation
use cache manifest
use SASS and compass for theming

Wednesday, November 2, 11

dkd
development
kommunikation
design

thank you.
Wednesday, November 2, 11

Questions???

stoerung.vgf-ffm.de
Wednesday, November 2, 11

@nilsdehl

ﬂickr.com/photos/nils-dehl/

Wednesday, November 2, 11

More from Sencha

Die Sicht auf große Datenmengen läßt sich in ExtJS auf zwei Wege darstellen – entweder durch Paging oder durch scrollen. Während beide Konzepte das selbe Ziel verfolgen, bringt die Implementierung eines Buffered Stores in ExtJS einige Hürden mit sich, die UI-Konzepte wie dynamisches Löschen oder Hinzufügen von Datensätzen verhindern. Diese Session gibt einen Einblick in den Aufbau eines BufferedStores und zeigt Ansätze, wie man mehr Dynamik in Grids bringen kann, die diesen Store verwenden.

Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...

Sencha

Learn how to use Ext JS and Cmd to deliver Progressive Web Applications to deliver the best of both web and mobile app experiences. Web apps can be found easily on the internet and every user is guaranteed access to the same and latest version of the application. Plus, mobile app capabilities, such as offline support and optimizing access to the underlying network using service workers, take the user experience to a whole new level.

Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd

Sencha

Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing

Sencha

Sencha Roadshow 2017: What's New in Sencha Test

Sencha

Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...

Sencha

JavaScript is advancing and ES2015 (formerly ES6) is the foundation of its future. Sencha is committed to delivering cutting-edge technology for your applications, and supporting the evolution of JavaScript is a central part of that commitment. The expansive feature set of ES2015 formally enables coding paradigms: modules to better organize your code, classes to cleanly declare reusable units of functionality, and so much more. In this session, you'll see how Ext JS is embracing these new language and toolset features, and how they will expand your development horizons.

Sencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling

Sencha

Sencha Roadshow 2017: Sencha Best Practices: Coworkee App

Sencha

Sencha Roadshow 2017: Mobile First or Desktop First

Sencha

Sencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond

Sencha

User interfaces often utilize components such as grids and tables to help users browse and understand data. Today’s large data sets require sophisticated capabilities to ensure users can effectively comprehend data while remaining flexible and responsive. Building this functionality is time consuming, has integration and maintenance risks, and worst of all, distracts developers from the task at hand -- actually building the app. View the slides from our latest webinar to learn how the web’s most powerful data grid and GraphQL can help you deliver advanced functionality with minimal effort. View the recording here: https://www.brighttalk.com/webcast/11505/276417

Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

Sencha

In a recent study by Dimensional Research of 1,011 development and QA professionals, almost every survey respondent cited that application quality is important, with 84% believing it is very or critically important. Despite this, findings revealed that 94% of teams still face challenges when it comes to conducting adequate QA. View the presentation to learn why organizations must prioritize automated testing and QA practices to deliver high-quality applications and increase customer satisfaction.

Learn Key Insights from The State of Web Application Testing Research Report

Sencha

Learn about Sencha’s newest release, ExtReact: the most comprehensive set of components for React apps. Now you can quickly and easily add any of our 115+ professionally tested and supported components including grid, tree grid, pivot grid, charts, D3 visualizations, trees, calendar, buttons, menus and more to your React applications. With ExtReact, all of the components are designed to work together seamlessly which eliminates time-consuming integration work and reduces ongoing maintenance burdens. View this presentation to learn how to: - Build data-intensive, cross-platform web apps leveraging Sencha components and React. - Build immersive user engagement using layouts and adaptive design features. - Leverage material design and other themes to save time and effort. Modify or extend themes without writing a single line of code.

Introducing ExtReact: Adding Powerful Sencha Components to React Apps

Sencha

SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato

Sencha

Ext JS provides easy-to-use charting components that satisfy common needs, but sometimes you want to deliver an exceptional, unique user experience. This presentation will discuss how Ext JS leverages the popular and extremely powerful D3 library to create sophisticated, data-driven visualizations. This functionality helps your users understand the story behind their data, so they can make informed decisions.

SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...

Sencha

LinkRest is an active project commissioned and open sourced by NHL under Apache 2.0 license. It was conceived specifically as the server-side counterpart to Ext JS, so it natively supports Ext JS rest proxy, including CRUD, grouping, sorting, filtering, and more. In this session, we'll review Ext JS protocol support. You'll also see extensions that allow the client to safely query the server for specific data and shape the response. We'll cover advanced features, including security, constraints, idempotent methods, and metadata service. We'll show demos and try to allow time for Q&A.

SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...

Sencha

SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps

Sencha

Ext JS Architecture Best Practices - Mitchell Simeons

Sencha

Developers are building mobile first, and then making progressive enhancements so the app is available on desktop. Should you be taking either a mobile or desktop first approach, or thinking about Universal Apps to deliver the right user experiences. This approach maximizes the shareability of code across these experiences. In this presentation, we’ll explore case studies that show the benefits of each approach.

SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...

Sencha

Newer REST-based APIs are starting to use HATEOAS, which stands for Hypermedia as the Engine of Application State. The central idea of HATEOAS is to allow the server to control the state transitions instead of hard coding all the links into the client. We've integrated a HATEOAS layer in the Ext JS framework based on the HAL standard (http://stateless.co/hal_specification.html) and into the Ext JS model and store system. We will be showing the techniques we used to accomplish this in a way that keeps the Ext JS model and store usage the same as the standard mechanism.

Building Ext JS Using HATEOAS - Jeff Stano

Sencha

Learn best practices for leveraging modern technologies to develop, test and deliver maintainable, quality code. You will learn the advantages of testing software early and frequently, best practices to leverage modern technologies for test automation and CI, how to avoid shipping bad code, and how to create maintainable code while keeping it “non-legacy”. You will also learn the how and why of creating a robust developer feedback mechanism for sustained success.

SenchaCon 2016: Developing and Delivering Quality Code, Frequently - Neil Manvar

Sencha

More from Sencha (20)

Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...

Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd

Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing

Sencha Roadshow 2017: What's New in Sencha Test

Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...

Sencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling

Sencha Roadshow 2017: Sencha Best Practices: Coworkee App

Sencha Roadshow 2017: Mobile First or Desktop First

Sencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond

Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

Learn Key Insights from The State of Web Application Testing Research Report

Introducing ExtReact: Adding Powerful Sencha Components to React Apps

SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato

SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...

SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...

SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps

Ext JS Architecture Best Practices - Mitchell Simeons

SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...

Building Ext JS Using HATEOAS - Jeff Stano

SenchaCon 2016: Developing and Delivering Quality Code, Frequently - Neil Manvar

Recently uploaded

BooK Now Call us at +918448380779 to hire a gorgeous and seductive call girl for sex. Take a Delhi Escort Service. The help of our escort agency is mostly meant for men who want sexual Indian Escorts In Delhi NCR. It should be noted that any impersonator will get 100 attention from our Young Girls Escorts in Delhi. They will assume the position of reliable allies. VIP Call Girl With Original Photos Book Tonight +918448380779 Our Cheap Price 1 Hour not available 2 Hours 5000 Full Night 8000 TAG: Call Girls in Delhi, Noida, Gurgaon, Ghaziabad, Connaught Place, Greater Kailash Delhi, Lajpat Nagar Delhi, Mayur Vihar Delhi, Chanakyapuri Delhi, New Friends Colony Delhi, Majnu Ka Tilla, Karol Bagh, Malviya Nagar, Saket, Khan Market, Noida Sector 18, Noida Sector 76, Noida Sector 51, Gurgaon Mg Road, Iffco Chowk Gurgaon, Rajiv Chowk Gurgaon All Delhi Ncr Free Home Deliver

08448380779 Call Girls In Friends Colony Women Seeking Men

Delhi Call girls

MySQL Webinar, presented on the 25th of April, 2024. Summary: MySQL solutions enable the deployment of diverse Database Architectures tailored to specific needs, including High Availability, Disaster Recovery, and Read Scale-Out. With MySQL Shell's AdminAPI, administrators can seamlessly set up, manage, and monitor these solutions, ensuring efficiency and ease of use in their administration. MySQL Router, on the other hand, provides transparent routing from the application traffic to the backend servers in the architectures, requiring minimal configuration. Completely built in-house and supported by Oracle, these solutions have been adopted by enterprises of all sizes for their business-critical applications. In this presentation, we'll delve into various database architecture solutions to help you choose the right one based on your business requirements. Focusing on technical details and the latest features to maximize the potential of these solutions.

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

Miguel Araújo

[2024]Digital Global Overview Report 2024 Meltwater.pdf

hans926745

GenAI Risks & Security Meetup 01052024.pdf

lior mazor

08448380779 Call Girls In Civil Lines Women Seeking Men

Delhi Call girls

Evaluating the top large language models.pdf

ChristopherTHyatt

2024: Domino Containers - The Next Step. News from the Domino Container commu...

Martijn de Jong

What are drone anti-jamming systems? The drone anti-jamming systems and anti-spoof technology protect against interference, jamming, and spoofing of the UAVs. To protect their security, countries are beginning to research drone anti-jamming systems, also known as drone strike weapons. The anti-jam and anti-spoof technology protects against interference, jamming and spoofing. A drone strike weapon is a drone attack weapon that can attack and destroy enemy drones. So what is so unique about this amazing system?

What Are The Drone Anti-jamming Systems Technology?

Antenna Manufacturer Coco

Enterprise Knowledge’s Urmi Majumder, Principal Data Architecture Consultant, and Fernando Aguilar Islas, Senior Data Science Consultant, presented "Driving Behavioral Change for Information Management through Data-Driven Green Strategy" on March 27, 2024 at Enterprise Data World (EDW) in Orlando, Florida. In this presentation, Urmi and Fernando discussed a case study describing how the information management division in a large supply chain organization drove user behavior change through awareness of the carbon footprint of their duplicated and near-duplicated content, identified via advanced data analytics. Check out their presentation to gain valuable perspectives on utilizing data-driven strategies to influence positive behavioral shifts and support sustainability initiatives within your organization. In this session, participants gained answers to the following questions: - What is a Green Information Management (IM) Strategy, and why should you have one? - How can Artificial Intelligence (AI) and Machine Learning (ML) support your Green IM Strategy through content deduplication? - How can an organization use insights into their data to influence employee behavior for IM? - How can you reap additional benefits from content reduction that go beyond Green IM?

Driving Behavioral Change for Information Management through Data-Driven Gree...

Enterprise Knowledge

Axa Assurance Maroc - Insurer Innovation Award 2024

The Digital Insurer

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...

Neo4j

GenCyber Cyber Security Day Presentation

Michael W. Hawkins

How to convert PDF to text with Nanonets

naman860154

In an era where artificial intelligence (AI) stands at the forefront of business innovation, Information Architecture (IA) is at the core of functionality. See “There’s No AI Without IA” – (from 2016 but even more relevant today) Understanding and leveraging how Information Architecture (IA) supports AI synergies between knowledge engineering and prompt engineering is critical for senior leaders looking to successfully deploy AI for internal and externally facing knowledge processes. This webinar be a high-level overview of the methodologies that can elevate AI-driven knowledge processes supporting both employees and customers. Core Insights Include: Strategic Knowledge Engineering: Delve into how structuring AI's knowledge base is required to prevent hallucinations, enable contextual retrieval of accurate information. This will include discussion of gold standard libraries of use cases support testing various LLMs and structures and configurations of knowledge base. Precision in Prompt Engineering: Learn the art of crafting prompts that direct AI to deliver targeted, relevant responses, thereby optimizing customer experiences and business outcomes. Unified Approach for Enhanced AI Performance: Explore the intersection of knowledge and prompt engineering to develop AI systems that are not only more responsive but also aligned with overarching business strategies. Guiding Principles for Implementation: Equip yourself with best practices, ethical guidelines, and strategic considerations for embedding these technologies into your business ecosystem effectively. This webinar is designed to empower business and technology leaders with the knowledge to harness the full potential of AI, ensuring their organizations not only keep pace with digital transformation but lead the charge. Join us to map a roadmap to fully leverage Information Architecture (IA) and AI chart a course towards a future where AI is a key pillar of strategic innovation and business success.

EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx

Earley Information Science

Tech Trends Report 2024 Future Today Institute.pdf

hans926745

Discord is a free app offering voice, video, and text chat functionalities, primarily catering to the gaming community. It serves as a hub for users to create and join servers tailored to their interests. Discord’s ecosystem comprises servers, each functioning as a distinct online community with its own channels dedicated to specific topics or activities. Users can engage in text-based discussions, voice calls, or video chats within these channels. Understanding Discord Servers Discord servers are virtual spaces where users congregate to interact, share content, and build communities. Servers may revolve around gaming, hobbies, interests, or fandoms, providing a platform for like-minded individuals to connect. Communication Features Discord offers a range of communication tools, including text channels for messaging, voice channels for real-time audio conversations, and video channels for face-to-face interactions. These features facilitate seamless communication and collaboration. What Does NSFW Mean? The acronym NSFW stands for “Not Safe For Work,” indicating content that may be inappropriate for professional or public settings. NSFW Content NSFW content encompasses material that is sexually explicit, violent, or otherwise graphic in nature. It often includes nudity, profanity, or depictions of sensitive topics.

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf

UK Journal

This presentations targets students or working professionals. You may know Google for search, YouTube, Android, Chrome, and Gmail, but did you know Google has many developer tools, platforms & APIs? This comprehensive yet still high-level overview outlines the most impactful tools for where to run your code, store & analyze your data. It will also inspire you as to what's possible. This talk is 50 minutes in length.

Powerful Google developer tools for immediate impact! (2023-24 C)

wesley chun

presentation ICT roal in 21st century education

jfdjdjcjdnsjd

Strategies for Landing an Oracle DBA Job as a Fresher

Remote DBA Services

Sara Mae O’Brien Scott and Tatiana Baquero Cakici, Senior Consultants at Enterprise Knowledge (EK), presented “AI Fast Track to Search-Focused AI Solutions” at the Information Architecture Conference (IAC24) that took place on April 11, 2024 in Seattle, WA. In their presentation, O’Brien-Scott and Cakici focused on what Enterprise AI is, why it is important, and what it takes to empower organizations to get started on a search-based AI journey and stay on track. The presentation explored the complexities of enterprise search challenges and how IA principles can be leveraged to provide AI solutions through the use of a semantic layer. O’Brien-Scott and Cakici showcased a case study where a taxonomy, an ontology, and a knowledge graph were used to structure content at a healthcare workforce solutions organization, providing personalized content recommendations and increasing content findability. In this session, participants gained insights about the following: Most common types of AI categories and use cases; Recommended steps to design and implement taxonomies and ontologies, ensuring they evolve effectively and support the organization’s search objectives; Taxonomy and ontology design considerations and best practices; Real-world AI applications that illustrated the value of taxonomies, ontologies, and knowledge graphs; and Tools, roles, and skills to design and implement AI-powered search solutions.

IAC 2024 - IA Fast Track to Search Focused AI Solutions

Enterprise Knowledge

Recently uploaded (20)

08448380779 Call Girls In Friends Colony Women Seeking Men

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

[2024]Digital Global Overview Report 2024 Meltwater.pdf

GenAI Risks & Security Meetup 01052024.pdf

08448380779 Call Girls In Civil Lines Women Seeking Men

Evaluating the top large language models.pdf

2024: Domino Containers - The Next Step. News from the Domino Container commu...

What Are The Drone Anti-jamming Systems Technology?

Driving Behavioral Change for Information Management through Data-Driven Gree...

Axa Assurance Maroc - Insurer Innovation Award 2024

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...

GenCyber Cyber Security Day Presentation

How to convert PDF to text with Nanonets

EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx

Tech Trends Report 2024 Future Today Institute.pdf

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf

Powerful Google developer tools for immediate impact! (2023-24 C)

presentation ICT roal in 21st century education

Strategies for Landing an Oracle DBA Job as a Fresher

IAC 2024 - IA Fast Track to Search Focused AI Solutions

Community Code: VGF Mobility App

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 ﬁle concatenation and miniﬁcation 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 ﬁlter by search word index ﬁltered 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 ﬁle phantomjs confess.js http://vgf- mobile.dev <html manifest="vgf.manifest"> AddType text/cache-manifest .manifest .htaccess with expire conﬁguration 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 / miniﬁcation 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 ﬂickr.com/photos/nils-dehl/ Wednesday, November 2, 11

Community Code: VGF Mobility App

Recommended

Recommended

More Related Content

More from Sencha

More from Sencha (20)

Recently uploaded

Recently uploaded (20)

Community Code: VGF Mobility App