RESTful APIs, Client-Side Frameworks, Containerization (2010s)
Learning Objectives
- You know of some of the milestones in web development from the 2010s.
The increasing use of AJAX for building dynamic websites led to a shift in how how data was served from the server. A key part of this was the introduction of Representational State Transfer (REST) architectural style (proposed in a thesis in 2000). REST outlined architectural constraints for client-server communication, including clear identification of resources, resource manipulation, self-descriptive messages, and the use of hypermedia as the engine of application state.
This style was adopted for building server-side interfaces for web applications, leading to the emergence of RESTful web services.
As AJAX enabled dynamic page updates without full reloads, client-side libraries and frameworks emerged to simplify the process. These included Backbone.js (2010), Knockout.js (2010), AngularJS (2010), Ember.js (2011), and so on. The rapid pace of development in this area gave rise to numerous memes poking fun at JavaScript developers and the constant introduction and adoption of new tools.
To see some of these memes, often depicting developers moving their attention to new frameworks and libraries, run a Google images search with “new javascript framework meme”.
These frameworks provided structure for client-side web applications, making it easier to integrate client-side functionality with server-side APIs. This shift — combined with AJAX — led to single-page web applications (SPAs). In SPAs, the JavaScript functionality is loaded into the browser upon the user’s first visit, with subsequent server interactions handled through AJAX calls.
During this time (and the late 2000s), the role of relational databases for web development was questioned as there were concerns about their scalability. These concerns led to the rise of NoSQL databases — non-relational databases that did not use SQL as the query language and that were designed for better scalability. Popular NoSQL databases included MongoDB (2009) and Redis (2009). Over time, relational databases incorporated many of the scalability features, while NoSQL evolved to support more complex data models, leading to a unification often referred to as NewSQL.
The developer experience also improved with the growing adoption of continuous integration and continuous deployment (CI/CD) pipelines. These automated workflows allowed developers to test and deploy code to production more efficiently. Additionally, tools like Docker enabled containerization, allowing applications and their dependencies to be packaged into containers that could run consistently across any machine with a container runtime (with some challenges, though, as some have observed in the course).
Another significant trend was the use of JavaScript for building server-side functionality, initially enabled by Node.js (2009), the predecessor of Deno used in this course. Node.js allowed running JavaScript code to run the server and introduced npm, a package manager that simplified installing and using third-party libraries. This led to the rise of the MEAN stack, which consisted of MongoDB, Express.js, AngularJS, and Node.js.
Using the same language for both client-side and server-side development, including working with a database, contributed to the popularity of the term “Full-Stack Developer”, even though the term is not limited to using one language for all tasks.
As you’ve also learned to work on both server-side and client-side functionality of web applications, you can call yourself a Full-Stack Developer!
A key shift in client-side develoment was the emphasis on building applications from components that together form a whole. This concept, already widely present in object-oriented programming, led to component-based web libraries and frameworks like React (2013), Vue.js (2014), and Svelte (2016).
The composition and rendering of applications also gained more attention, in part due to the increasing size of SPAs. For instance, in 2019, the median web page was approximately 1,900KB in size and required 74 requests to load (source: Web Almanac, 2019), with JavaScript creating the vast majority of these requests.
This sparked efforts on server-side rendering (SSR), where the application (or parts of it) is rendered on the server and the resulting data is sent to the client on-demand. This allows the client to display the page faster, possibly reducing the amount of JavaScript, and also improves the search engine optimization (SEO), making sites easier to index by search engines.
Frameworks like Gatsby (2015), Next.js (2016), and Nuxt.js (2016), were introduced to address these issues. From the beginning, Svelte took a different approach by compiling the components into highly optimized JavaScript code during build-time, which already reduces the amount of JavaScript sent to the client.