2024-02-29 Frontend Working Group Meeting Notes: Route Loaders

Owned by Adolfo Brandes
Last updated: Mar 06, 2024
2 min read

 Date, time, location

 Discussion topic(s)

  • Migration to route loaders + react query in the learner portal, to be initially presented by @Adam Stankiewicz

🎥Recording

 Participants

@Adam Stankiewicz, @Adolfo Brandes, @Brian Smith, @Chintan Joshi, @Fox Piacenti, @Hamzah Ullah

🤖 Summary

Generated from the transcript by ChatGPT 4.

The Frontend Working Group Meeting focused on discussing the migration to React Router and React Query within the learner portal. Adam Stankiewicz led the presentation, detailing the current challenges with frontend performance, particularly around managing API requests and avoiding request waterfalls. The migration aims to improve the loading times by handling API calls more efficiently, making them in parallel when possible to reduce dependency and waiting times between calls.

The meeting explored the technical aspects of implementing React Router and React Query, emphasizing how this migration could leverage route loaders to fetch data before rendering components, potentially improving the frontend performance significantly. This approach contrasts with the current model where components trigger API calls after rendering, leading to multiple loading states and a less efficient loading process.

Adam shared insights into the discovery phase, identifying the main API calls made by the learner portal and their sequence, highlighting the opportunities for optimization by parallelizing requests. He also discussed the integration of API requests with React Query and React Router, providing examples of how to structure loaders for different routes and how to manage authentication and data fetching more effectively.

There was a demonstration of the current and improved loading process, showing how the new approach could reduce the number of loading spinners and improve the user experience by fetching data more efficiently. Additionally, the discussion touched upon using a package called query-key-factory for managing React Query keys in a more organized and reusable manner.

The conversation also included a brief presentation by Fox Piacenti on a similar project called Providence, which automates common data manipulation patterns in a more opinionated way than React Query, suggesting that there might be opportunities to incorporate some of its ideas into the current project or future developments.

In summary, the meeting detailed the ongoing efforts to improve the frontend architecture of the learner portal through the migration to React Router and React Query, focusing on enhancing data fetching efficiency, reducing loading times, and improving overall performance. The discussions highlighted the technical strategies, challenges, and potential benefits of this migration, along with considerations for documentation and broader applicability across different frontend applications.

 Action items

 Decisions