Community Code: VGF Mobility App

•

0 j'aime•1,254 vues

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!

Technologie

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

Contenu connexe

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

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

Dernier

MS Copilot expands with MS Graph connectors

Nanddeep Nachan

The Good, the Bad and the Governed - Why is governance a dirty word? David O'Neill, Chief Operating Officer - APIContext Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...

apidays

Axa Assurance Maroc - Insurer Innovation Award 2024

The Digital Insurer

AWS Community Day CPH - Three problems of Terraform

Andrey Devyatkin

How to Troubleshoot Apps for the Modern Connected Worker

ThousandEyes

DBX First Quarter 2024 Investor Presentation

Dropbox

Keynote 2: APIs in 2030: The Risk of Technological Sleepwalk Paolo Malinverno, Growth Advisor - The Business of Technology Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...

apidays

Three things you will take away from the session: • How to run an effective tenant-to-tenant migration • Best practices for before, during, and after migration • Tips for using migration as a springboard to prepare for Copilot in Microsoft 365 Main ideas: Migration Overview: The presentation covers the current reality of cross-tenant migrations, the triggers, phases, best practices, and benefits of a successful tenant migration Considerations: When considering a migration, it is important to consider the migration scope, performance, customization, flexibility, user-friendly interface, automation, monitoring, support, training, scalability, data integrity, data security, cost, and licensing structure Next Wave: The next wave of change includes the launch of Copilot, which requires businesses to be prepared for upcoming changes related to Copilot and the cloud, and to consolidate data and tighten governance ShareGate: ShareGate can help with pre-migration analysis, configurable migration tool, and automated, end-user driven collaborative governance

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff

sammart93

presentation ICT roal in 21st century education

jfdjdjcjdnsjd

"I see eyes in my soup": How Delivery Hero implemented the safety system for ...

Zilliz

The action of the next cyber saga takes place in the mystical lands of the Asia-Pacific region, where the main characters began their digital activities in the middle of 2021 and qualitatively strengthened it in 2022. Corporate espionage, document theft, audio recordings, and data leaks from messaging platforms were all a matter of one day for Dark Pink. Their geographical focus may have started in the Asia-Pacific region, but their ambitions knew no bounds, targeting a European government ministry in a bold move to expand their portfolio. Their victim profile was as diverse as a UN meeting, targeting military organizations, government agencies, and even a religious organization. Because discrimination is not a fashionable agenda. In the world of cybercrime, they serve as a reminder that sometimes the most serious threats come in the most unassuming packages with a pink bow.

Cyberprint. Dark Pink Apt Group [EN].pdf

Overkill Security

Corporate and higher education. Two industries that, in the past, have had a clear divide with very little crossover. The difference in goals, learning styles and objectives paved the way for differing learning technologies platforms to evolve. Now, those stark lines are blurring as both sides are discovering they have content that’s relevant to the other. Join Tammy Rutherford as she walks through the pros and cons of corporate and higher ed collaborating. And the challenges of these different technology platforms working together for a brighter future.

Corporate and higher education May webinar.pptx

Rustici Software

Tracing the root cause of a performance issue requires a lot of patience, experience, and focus. It’s so hard that we sometimes attempt to guess by trying out tentative fixes, but that usually results in frustration, messy code, and a considerable waste of time and money. This talk explains how to correctly zoom in on a performance bottleneck using three levels of profiling: distributed tracing, metrics, and method profiling. After we learn to read the JVM profiler output as a flame graph, we explore a series of bottlenecks typical for backend systems, like connection/thread pool starvation, invisible aspects, blocking code, hot CPU methods, lock contention, and Virtual Thread pinning, and we learn to trace them even if they occur in library code you are not familiar with. Attend this talk and prepare for the performance issues that will eventually hit any successful system. About authorWith two decades of experience, Victor is a Java Champion working as a trainer for top companies in Europe. Five thousands developers in 120 companies attended his workshops, so he gets to debate every week the challenges that various projects struggle with. In return, Victor summarizes key points from these workshops in conference talks and online meetups for the European Software Crafters, the world’s largest developer community around architecture, refactoring, and testing. Discover how Victor can help you on victorrentea.ro : company training catalog, consultancy and YouTube playlists.

Finding Java's Hidden Performance Traps @ DevoxxUK 2024

Victor Rentea

Following the popularity of “Cloud Revolution: Exploring the New Wave of Serverless Spatial Data,” we’re thrilled to announce this much-anticipated encore webinar. In this sequel, we’ll dive deeper into the Cloud-Native realm by uncovering practical applications and FME support for these new formats, including COGs, COPC, FlatGeoBuf, GeoParquet, STAC, and ZARR. Building on the foundation laid by industry leaders Michelle Roby of Radiant Earth and Chris Holmes of Planet in the first webinar, this second part offers an in-depth look at the real-world application and behind-the-scenes dynamics of these cutting-edge formats. We will spotlight specific use-cases and workflows, showcasing their efficiency and relevance in practical scenarios. Discover the vast possibilities each format holds, highlighted through detailed discussions and demonstrations. Our expert speakers will dissect the key aspects and provide critical takeaways for effective use, ensuring attendees leave with a thorough understanding of how to apply these formats in their own projects. Elevate your understanding of how FME supports these cutting-edge technologies, enhancing your ability to manage, share, and analyze spatial data. Whether you’re building on knowledge from our initial session or are new to the serverless spatial data landscape, this webinar is your gateway to mastering cloud-native formats in your workflows.

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

Safe Software

Architecting Cloud Native Applications

WSO2

Dubai, often portrayed as a shimmering oasis in the desert, faces its own set of challenges, including the occasional threat of flooding. Despite its reputation for opulence and modernity, the emirate is not immune to the forces of nature. In recent years, Dubai has experienced sporadic but significant floods, testing the resilience of its infrastructure and communities. Among the critical lifelines in this bustling metropolis is the Dubai International Airport, a bustling hub that connects the city to the world. This article explores the intersection of Dubai flood events and the resilience demonstrated by the Dubai International Airport in the face of such challenges.

Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...

Orbitshub

MINDCTI Revenue Release Quarter One 2024

MIND CTI

Exploring Multimodal Embeddings with Milvus

Zilliz

💉💊+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHABI}}+971581248768 +971581248768 Mtp-Kit (500MG) Prices » Dubai [(+971581248768**)] Abortion Pills For Sale In Dubai, UAE, Mifepristone and Misoprostol Tablets Available In Dubai, UAE CONTACT DR.Maya Whatsapp +971581248768 We Have Abortion Pills / Cytotec Tablets /Mifegest Kit Available in Dubai, Sharjah, Abudhabi, Ajman, Alain, Fujairah, Ras Al Khaimah, Umm Al Quwain, UAE, Buy cytotec in Dubai +971581248768''''Abortion Pills near me DUBAI | ABU DHABI|UAE. Price of Misoprostol, Cytotec” +971581248768' Dr.DEEM ''BUY ABORTION PILLS MIFEGEST KIT, MISOPROTONE, CYTOTEC PILLS IN DUBAI, ABU DHABI,UAE'' Contact me now via What's App…… abortion Pills Cytotec also available Oman Qatar Doha Saudi Arabia Bahrain Above all, Cytotec Abortion Pills are Available In Dubai / UAE, you will be very happy to do abortion in Dubai we are providing cytotec 200mg abortion pill in Dubai, UAE. Medication abortion offers an alternative to Surgical Abortion for women in the early weeks of pregnancy. We only offer abortion pills from 1 week-6 Months. We then advise you to use surgery if its beyond 6 months. Our Abu Dhabi, Ajman, Al Ain, Dubai, Fujairah, Ras Al Khaimah (RAK), Sharjah, Umm Al Quwain (UAQ) United Arab Emirates Abortion Clinic provides the safest and most advanced techniques for providing non-surgical, medical and surgical abortion methods for early through late second trimester, including the Abortion By Pill Procedure (RU 486, Mifeprex, Mifepristone, early options French Abortion Pill), Tamoxifen, Methotrexate and Cytotec (Misoprostol). The Abu Dhabi, United Arab Emirates Abortion Clinic performs Same Day Abortion Procedure using medications that are taken on the first day of the office visit and will cause the abortion to occur generally within 4 to 6 hours (as early as 30 minutes) for patients who are 3 to 12 weeks pregnant. When Mifepristone and Misoprostol are used, 50% of patients complete in 4 to 6 hours; 75% to 80% in 12 hours; and 90% in 24 hours. We use a regimen that allows for completion without the need for surgery 99% of the time. All advanced second trimester and late term pregnancies at our Tampa clinic (17 to 24 weeks or greater) can be completed within 24 hours or less 99% of the time without the need surgery. The procedure is completed with minimal to no complications. Our Women's Health Center located in Abu Dhabi, United Arab Emirates, uses the latest medications for medical abortions (RU-486, Mifeprex, Mifegyne, Mifepristone, early options French abortion pill), Methotrexate and Cytotec (Misoprostol). The safety standards of our Abu Dhabi, United Arab Emirates Abortion Doctors remain unparalleled. They consistently maintain the lowest complication rates throughout the nation. Our Physicians and staff are always available to answer questions and care for women in one of the most difficult times in their lives. The decision to have an abortion at the Abortion Cl

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...

?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@

EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER

MadyBayot

Dernier (20)

MS Copilot expands with MS Graph connectors

Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...

Axa Assurance Maroc - Insurer Innovation Award 2024

AWS Community Day CPH - Three problems of Terraform

How to Troubleshoot Apps for the Modern Connected Worker

DBX First Quarter 2024 Investor Presentation

Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff

presentation ICT roal in 21st century education

"I see eyes in my soup": How Delivery Hero implemented the safety system for ...

Cyberprint. Dark Pink Apt Group [EN].pdf

Corporate and higher education May webinar.pptx

Finding Java's Hidden Performance Traps @ DevoxxUK 2024

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

Architecting Cloud Native Applications

Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...

MINDCTI Revenue Release Quarter One 2024

Exploring Multimodal Embeddings with Milvus

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...

EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER

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

Recommandé

Recommandé

Contenu connexe

Plus de Sencha

Plus de Sencha (20)

Dernier

Dernier (20)

Community Code: VGF Mobility App