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.
As the web evolved, there was a desire to make web pages more interactive and dynamic. This led to the development and introduction of JavaScript at Netscape in 1995. With JavaScript, developers could start building more dynamic content, like form validations, pop-up messages, and basic animations. Although initially met with scepticism, JavaScript quickly became a fundamental part of web development, leading to a more interactive and engaging user experience. But still, to fetch new data or perform some user action, the browser had to do a full reload of the webpage, which is not a good user experience and also a waste of resources.
The Rise of Dynamic Content: PHP
While the client-side of websites was seeing advancements in interactivity with technologies like JavaScript, the server-side was also undergoing a transformation. In 1994, PHP was introduced as a set of scripts to monitor his online resume and related documents. It swiftly evolved into a full-fledged server-side scripting language that continues to dominate web development even today.
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.
The introduction of AJAX (Asynchronous JavaScript and XML) in the 2000s marked a significant shift in web development, addressing this very limitation. AJAX enabled web pages to fetch and send data to the server asynchronously, without the need to reload the entire page.
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
The boom of AJAX and the need for more interactive web pages also brought forth challenges for developers. As they started using AJAX and JavaScript more frequently, they faced a variety of problems, such as cross-browser inconsistencies, verbose code, and a steep learning curve for newcomers. This need for simplification and a unified way to handle common tasks was one of the factors that led to the creation of jQuery.
jQuery was introduced in 2006. It quickly became one of the most popular JavaScript libraries due to its simple and intuitive syntax. It allowed developers to write less code to achieve common web tasks like DOM manipulation, event handling, and AJAX requests. jQuery’s motto, "Write less, do more", captured its essence perfectly. With its chainable methods and extensive plugin ecosystem, developers could create rich interactions with ease, and it significantly reduced the pain of dealing with browser inconsistencies.
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.
However, as Javascript became more and more mainstream, browsers started following a set standard. And, with the evolving landscape of web development, browsers began implementing features that standardized many of the functionalities that were previously fragmented. Over time, the web standards caught up, and many of the once-compelling reasons for using jQuery—such as consistent DOM manipulation methods and AJAX calls—became native features of modern browsers.
At the current time, jQuery methods can be slower than using native JavaScript methods for certain operations. Modern JavaScript engines have optimized native operations, making them faster and more efficient than jQuery for many common tasks.
The start of the framework era in Frontend
As the web continued to grow in complexity, so did the needs of developers and users. Websites and web applications became larger and more intricate. While jQuery was great for simpler tasks, it wasn't necessarily designed to handle the intricacies of large-scale single-page applications (SPAs). This led to the rise of JavaScript frameworks designed to tackle the challenges of building these SPAs.
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
In 2013, Facebook introduced React—a JavaScript library for building user interfaces that brought a refreshing take on frontend development. React was not just a regular library; it was a revolutionary way to think about building UIs. Unlike other frameworks and libraries of its time, React emphasized the importance of component-based architecture.
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.
Conclusion
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.
