How we implemented GTFS API and WebSockets on LA Metro using Wordpress, Elementor, FastAPI and Vue

‍Introduction

The LA Metro transportation system serves millions of commuters daily, making it essential to provide an efficient and user-friendly experience. This insight post delves into the redevelopment of LA Metro's schedules and rides pages, exploring the challenges faced and the innovative solutions implemented. With a transition from Django Multi GTFS/GDAL to FastAPI, jQuery to VueJS or Petite Vue, and MapBox to ArcGIS/ESRI Maps, the project aimed to streamline code, enhance the design, and introduce new features such as real-time vehicle tracking. We highlight the key elements and methodologies employed throughout the process.

‍

Revamping Design and User Experience:

The long-overdue redesign of LA Metro's schedules and rides pages was a thrilling opportunity to enhance the site's crucial features. These pages serve a vital purpose and are the most visited on the entire site. It’s worth highlighting the shortcomings of the old design and emphasizing the need for a comprehensive transformation to align with current web standards. In comparison, this was a major makeover for the entirety.

Old Designs : 

New Designs: 

Streamlining Code with FastAPI/GTFS/GDAL:

The previous implementation of schedules and rides pages relied on outdated technologies, including Django Multi GTFS/GDAL, and not so much with Django/Django Rest API. These libraries turned unreliable and buggy over time. A peek into the front-end JavaScript revealed approximately 1600 lines of code in jQuery alone. This was a tipping point behind the decision to rebuild these pages from scratch in WordPress, providing a foundation for a more intuitive and efficient user experience.

The LA Metro engineering/backend team was delighted to closely collaborate on the most crucial part of FastAPI/GTFS implementation, particularly how the new API model would align with the updated data structure ensuring uniform integration between the front-end and back-end.

Key Challenges

• VueJS or Petite Vue for Front-End
• Displaying Upcoming Schedules with Precision
• Real-time Vehicle Tracking with WebSockets

‍

VueJS or Petite Vue for Front-End:

While both frameworks share a common foundation, they differ in various aspects, offering unique advantages for different use cases. Petite Vue is a stripped lightweight distribution of VueJS, driven by the same reactivity principles used in VueJS 1.x version weighing in at just 6kbs.

Clearly, we’d make sure the entire front-end codebase is as thin, lean, and functional as possible. The initial prototypes were quite promising coupled with Petite Vue components and x-templating.

https://enterprise.exemplifi.io/3XNoH5d

https://enterprise.exemplifi.io/3O95WpW

For the first client demo, there was a big ask of simulating real-time vehicles. By leveraging ESRI, Leaflet for ESRI, and the Leaflet Moving Marker plugin, we successfully achieved real-time simulation with exceptional results, though at the time it wasn’t transparent that multiple vehicles may travel back and forth from Northbound to Southbound and vice versa.

Remarkably, the codebase was significantly reduced to around 200 lines with the implementation of Petite Vue, a substantial improvement from the previous codebase which stood at 1600 lines.

‍

Displaying Upcoming Schedules with Precision:

This segment highlights the difficulties faced in displaying upcoming bus and train schedules based on the FastAPI and the user's local time. It demonstrates how the implementation of DayJS facilitated precise date and time conversions, resulting in a seamless and reliable experience for commuters. Here’s a peek at the response:

This FastAPI response of departure times is as flat as they come, with no AM/PM or Timezone flags, just 24hrs format. Beginning graciously with a five-step leap for:

• Conversion of timestamps to user’s Locale settings (to calculate time difference)
• Figure out the direction of schedule - Northbound or Southbound
• Filter out the applicable schedule based on the day of the week
• Show the first 3 upcoming schedules (based on the user's current locale time)
• Pick whatever is left after the 3 upcoming schedules as “additional times”

The first three were easy peasy with another lightweight library called DayJS, shying away from MomentJS which is much more comprehensive. To compute upcoming schedules I had to loop through the departure schedules and break out once it has reached a future timestamp.

This gives me the top 3 upcoming arrivals and the rest of the additional times which are also based on the same logic jumping +3 in the slice index:

Real-time Vehicle Tracking with WebSockets:

The most significant challenge faced in the project was incorporating live running status for buses and trains based on live GPS data. Many architectural considerations went into play, like

• setInterval(): resource hungry on the client side, too recursive, requires clearTimeout()
• Server Side Events: identical to WebSockets but limited to one-way communication
• WebSockets: increases the code and infrastructure complexity, when scaling horizontally

WebSockets seemed a natural choice given its complexity of code and implementation, which pairs well with FastAPI's support for WebSockets. The technical advantage of using WebSockets is its reliability and fail-safe mechanisms for handling network failures silently, not to mention that they run in a separate thread altogether, making them discreet and asynchronous on the client side.

After a functioning prototype was created using Node.JS and Socket.IO to test real-world server-side applications, the process became fairly easy.

With every update of live running vehicle data emitted from the server socket, the client-side dynamically updates the positioning and status of each moving marker. Using the Leaflet Moving Marker plugin proved to be exceptionally effective in updating marker positions with just longitude and latitude. This breakthrough allowed us to provide users with real-time transit information, marking a significant improvement over the previous implementation. This is what the FastAPI socket response looks like.

To maintain portability across other mapping tools, responses had to be formatted as a GeoJSON FeatureCollection where each Feature represents a live-moving vehicle with its coordinates and some geospatial data. The end results were astounding:

In conclusion, the breakthrough transformation of LA Metro rides & schedules offer unparalleled user-experience, user-friendliness, and efficiency while significantly reducing code complexity and resource requirements. By leveraging bleeding-edge technologies like Petite Vue, ESRI, Leaflet for ESRI, and WebSockets, LA Metro has reached a milestone that marks a significant leap forward in enhancing the overall transportation journey for commuters.

‍

If you enjoyed this insight, subscribe to our newsletter for more weekly insights!