Intro

Driven by the relentless pursuit of user experience, front-end techniques are constantly iterated, which pushed the experience for both clients and developers forward. The essay will explore major stages of Front-End evolution on technology, highlighting these representative techniques in each era to illustrate the historical trajectory.

Early Stage

In the early stage of the World Wide Web, web pages were a novelty. The primary techniques were HTML and CSS: HTML was used to build basic layout and content, while CSS was responsible for elementary decoration, which led to simple and limited interactions. Because of lacking supportive page layout techniques, table layout was popular (Hoffmann, 2017). Furthermore, due to static page contents, the functionalities of web pages were also restricted. Overall, both user experience and expectation were neither high.

The Start of Web 2.0

Dynamic web pages, a kind of page that loads data from external sources to cater dynamic content to users, are marked as a sign of the start of Web 2.0. Meanwhile, since JavaScript was introduced in December 1995, it takes the ability to manipulate DOM objects, which can enrich interactions of web pages (Rauschmayer, 2014). As a result, the general technical stack became HTML, CSS, and JavaScript, regarding as the fundamental to the frontend world. Nevertheless, the backend server still performed page rendering and data filling, so the utilization of JavaScript was confined to enhancing interactive user interfaces.

jQuery and Ajax

The primary issues associated with traditional server-side rendering include redundant page rendering and tight coupling between frontend and backend logic, resulting in inefficient resource utilization and unwieldy codebases. In response, a new paradigm emerged, emphasizing the separation of frontend and backend concerns. Notably, jQuery, a JavaScript library renowned for simplifying DOM manipulation (Duckett, Moore & Ruppert, 2014), became the icon of this shift. Developers leveraged techniques such as Ajax to fetch data from APIs, subsequently integrating it into web pages using jQuery. This approach facilitated partial page reloads, thereby enhancing user experience.

The Modern Frontend

As projects scale up, the codes to operate DOM manually are error-prone and hard to maintain, and a series of problems come with it. To solve these issues, a bunch of new solutions came to the stage: npm for package/dependency management and customizable automations, webpack for bundle modules features, babel for JavaScript-compatible issues, and modern frameworks like react, Vue and Angular, providing functionalities including automatic DOM operations and reusable component functionalities (Jang, 2017). With these techniques, frontend developers can only focus on the business logic on a smaller scope of the page/component, which improves the overall robustness. Partial page reloads are further upgraded to single-page applications, bringing a seamless experience. Since then, we come to the modern frontend era.

Server-Side-Rendering

However, SPA has its drawbacks: slow first-screen rendering and unfriendly to search engines. The solutions that perform modern server-side rendering have attracted attention, whose representation is Next.js. The first page will be rendered based on the predefined skeleton on the server side and sent to the browser immediately, reducing the time of first-screen rendering (Osmani & Miller, 2024). Once the browser loads the necessary JavaScript, it will take over the upcoming rendering jobs, serving the same as SPA, called hydration.

Conclusion

In recapitulation, the essay rewinds five milestones of the evolution of front-end technologies, from ancient to modern. Overall, each technical iteration aims to solve issues that compromised user experience from previous stages.

Reference

• Hoffmann, J. (2017, May 1). Tables for Layout? Absurd. The History of the Web.
• Rauschmayer, R. (2014). How JavaScript Was Created. Speaking JavaScript. O’Reilly Media.
• Duckett, J., Moore, J., & Ruppert, G. (2014). JQUERY. JavaScript & jQuery: interactive front-end web development. John Wiley & Sons Inc.
• Jang, P. (2017, October 18). Modern JavaScript Explained for Dinosaurs. Peterxjang.
• Osmani, A., & Miller, J. (2024). Rendering on the web. web.dev.