The early web
In the early days of the web, websites were static — they displayed the same content to every user and did not have the interactive features we associate with modern websites. They were primarily composed of text, links, and images. The purpose was to share information, and the appearance and functionality of these sites were limited compared to today.
The Rise of Dynamic Content: PHP
According to a survey by W3Techs, 76.8% of websites still use PHP as server-side language.
PHP made it possible to create dynamic web pages that could interact with databases, thus moving away from the static HTML pages of the early web. Instead of having a fixed set of content to display to every visitor, PHP allowed websites to generate content on the fly based on various factors, such as user input, time of day, or database queries.
Many early websites and platforms, including the widely-used content management system (CMS) WordPress, were built using PHP. It allowed developers to embed server-side scripts directly into HTML, which was intuitive for many developers transitioning from static to dynamic web development.
PHP's ability to seamlessly integrate with databases such as MySQL made it a go-to solution for web developers looking to build content-driven sites, e-commerce platforms, online forums, and more. As the web evolved and the demand for more complex and dynamic web applications grew, PHP adapted and remained a mainstay in the web development landscape. Many new technologies, including Remix and React Server Component, take some inspiration from PHP.
Interactivity on the client-side with AJAX
While PHP and other server-side languages brought about a revolution in creating dynamic web pages that could generate content on-the-fly, there was still a limitation in how real-time data was fetched and presented to users. Every time new data was needed or an action was performed, the entire page had to be reloaded. This process, although functional, was neither efficient nor provided the seamless experience users desired.
By integrating AJAX with existing server-side technologies, developers could now create web applications that updated sections of a page in real-time based on user interactions or other triggers. This advancement brought about a desktop-like experience within web browsers and paved the way for many interactive web applications. Notable examples include Google Maps, which allowed panning and zooming without page reloads, and Gmail, which could fetch new emails or save drafts without the need to refresh the entire interface.
This combination of server-side dynamics powered by languages like PHP and the client-side interactivity enabled by AJAX reshaped the web, leading to a richer and more engaging user experience.
The Rise of jQuery
One of the primary achievements of jQuery was that it allowed the same code to be run on different browsers, as back then, it was hard to write code that would work on every browser due to the lack of a standard across browsers. jQuery slowly became a standard dependency for websites.
The start of the framework era in Frontend
Knockout.js, introduced in 2010 by Steve Sanderson, brought the concept of two-way data binding to the fore, simplifying how data changes were reflected in the UI and vice versa. It gained popularity as an early implementation of the Model-View-ViewModel (MVVM) architectural pattern for web development. It allowed developers to create dynamic, interactive web user interfaces by providing a way to bind HTML elements to data models, automatically updating the UI when the underlying data changed.
Ember.js, created in 2011, provided an opinionated framework for building web applications. It emphasized conventions over configuration and aimed to give developers a prescribed way of doing things, resulting in faster development cycles.
As these and other frameworks like AngularJS emerged, a notable shift in the landscape was the component-driven architecture. Among the champions of this new paradigm was React.
The Emergence of React
Components in React encapsulate both logic and UI, making them modular and reusable. This made it much easier for developers to manage and scale applications by breaking down complex UIs into smaller, self-contained components.
React's virtual DOM (Document Object Model) is another groundbreaking feature. In traditional web development, every change in the application state often required a complete re-render of the UI, which was performance-intensive. React's virtual DOM, on the other hand, created a representation of the actual DOM in memory. Whenever state changes occurred, React efficiently updated this virtual representation, compared it with the previous version, and then updated the actual DOM only where changes were needed. This process is known as "diffing", and it significantly boosted performance.
Another significant advantage was React's "unidirectional data flow". Unlike the two-way data binding in frameworks like AngularJS, React adopted a top-down approach, making state management more predictable and straightforward. This approach reduced a lot of bugs that emerged from unpredictable data changes.
Over time, React’s ecosystem flourished. The community contributed with a plethora of tools, libraries, and best practices. The introduction of features like Hooks in later versions made React even more flexible and powerful, allowing developers to use state and other React features without writing a class.
Limitations of Client-Side Rendering and the Shift to Server
Client Side Rendered Single-page applications (SPAs) marked a significant milestone in the web's evolution. They offered a smooth user experience by loading a single HTML page and dynamically updating it as the user interacts with the app using JS. This eradicated the need to reload the entire page and provided an experience similar to native desktop applications. However, as SPAs became more popular, several performance issues began to emerge.
Complex State Management: As applications grow, managing state can become complex. SPAs often rely on client-side routing and state management solutions, which can become intricate and hard to manage as the application scales.
To solve these challenges, the web development community revisited server-side computing techniques from the days before SPAs. We evolved our approach by adopting Server Side Rendering (SSR) and Server Side Generation (SSG). Instead of sending a minimal HTML to the client browser and relying on client-side rendering, these techniques enable us to prepare content on the server, providing the browser with a pre-rendered page.
In SSG, the generation happens during the build time, meaning that the pages are pre-rendered and stored, ready to be served instantly on request. And since these are static files, they can be deployed without needing a server and can be stored easily on CDN and cached.
Static Site Generation (SSG) involves pre-rendering pages during build time. Since these pages are static, they're ready for immediate delivery upon a user's request. Given their static nature, they can be deployed without dedicated server infrastructure, hosted on Content Delivery Networks (CDNs), and cached for faster access. But this works only for websites where content does not change often. And even a small update to the content necessitates rebuilding the entire site. The build times are also very long since data for all pages is fetched, and every page is rendered during this phase.
On the other hand, with SSR, the server dynamically generates the required content for each request on demand. The client receives a fully populated webpage. Once loaded, client-side libraries (like React) kick in, making the pages interactive and providing a SPA-like experience.
In this course, we will be focusing on Remix. Remix is a full-stack meta-framework built on top of React. It takes the best parts of innovation over the year in the web and provides a framework to build fast, performant web applications with minimum abstraction over native platform features. It combines SSR with nested layout and parallel data fetching to reduce the time to get the fully rendered page.
In the next lesson, we will dive deep into how the decisions made by the Remix make it a framework for the future of the web. Along with that, we will take a high-level overview of the technical details of Remix.
Before diving into this course, it's essential to have a foundational knowledge of React. If you're new to React or need a quick recap, we have a concise article that covers the basics.
Web has come a long way from its humble beginnings of static pages. Today, we are at the cusp of another evolution, where the boundaries between native and web applications continue to blur. With advances in technologies and frameworks, the future of web development holds immense promise. We are also seeing the convergence of server and client computation, which is leading to hybrid architectures that optimize for both initial load performance and interactive capabilities.