Introduction to Routing Management in Big Front‑End Development

From the early days of traditional (Web) front‑end to today’s "big front‑end" that includes iOS and Android, the concept of routing management has been present throughout application development. Understanding the formation and evolution of routing helps us grasp application design and development principles and improves personal development skills.

The QQ Music technical team, which brings together talent from Web, Android, iOS, and Flutter, has conducted many cutting‑edge experiments on projects such as MOO Music and Q‑Sound. The team has accumulated substantial experience on the topic of routing management.

Based on the notion of a page stack, the team has produced a series of concise yet deep technical articles to share with developers. The series includes:

Routing Management in Big Front‑End – Part 1 (this article)

Routing Management in Big Front‑End – Part 2: Web

Routing Management in Big Front‑End – Part 3: Android

Routing Management in Big Front‑End – Part 4: iOS

Routing Management in Big Front‑End – Part 5: Flutter

Routing Management in Big Front‑End – Part 6: Summary

These six articles will be released gradually. Readers are encouraged to follow the series and provide feedback if they have any questions.

1. Initial: Server‑Side Era

In early web development, back‑end engineers often served static pages such as index.html and about.html from a web server (e.g., http://198.0.0.1/index.html). At that time, routing referred to the server’s ability to locate and return the requested page.

Traditional page access

2. Evolution: Arrival of Ajax

With Ajax, developers could fetch data asynchronously via JavaScript and render pages on the client side, eliminating the need to open new browser windows for each navigation. This gave rise to the Single‑Page Application (SPA) model, where a single HTML file loads a JavaScript bundle that dynamically updates the view.

SPA page access

3. Transition: Front‑End Routing

Modern front‑end frameworks (e.g., vue‑router, react‑router) implement routing by mapping each page’s logic to an independent JavaScript module. The browser loads the appropriate module to display the corresponding page, effectively taking over the routing responsibilities that were once handled by back‑end developers.

4. Extension: The New Frontier of Big Front‑End

Beyond Web routing, the broader “routing” concept also covers native and cross‑platform applications. While Web routing relies on the browser’s navigation, native and cross‑platform routing must combine page navigation and route mapping within the app. The goal across all platforms is to build a unified routing management center that handles in‑app navigation.

5. Essence: Goals of Routing Management

The evolution of routing leads to two core objectives:

Map URLs/URIs to pages (implement routing mapping).

Provide a unified routing management center to maintain page construction and navigation.

Having reviewed the history and objectives of routing, stay tuned for the next article, "Routing Management in Big Front‑End – Part 2: Web" , which will reveal how routing is implemented on the web side.

Image source: http://www.code2succeed.com/single-page-application/

Recruitment notice: QQ Music is hiring Android/iOS client developers. Interested candidates can click “View Original” to apply or send a resume to [email protected].

At the end, we recommend the technical account “Tencent Music Tianqin Lab”, which focuses on cutting‑edge technologies such as AI for audio‑video experiences. Join the community to learn and exchange ideas.