The phrase “modern web development” is one that has been clung to for years. But what does this really mean? I know it means something because it sounds right but there’s always a part that thinks it’s a little wave and empty.
While it might sound a bit mellow, the truth is that there is probably such a thing as modern web development. Since the field has changed dramatically in a few years and the situation is different from 2013, for example, modern web development can easily be characterized as anything that is done in web development in 2021. different there is is 5-10 years old.
By this, I’m not just talking about trends like artificial intelligence and mobile development (although they are both important). I’m also talking about more specific ways of building web projects.
So let’s take a look at how we got there and the different ways that “modern web development” is, well, modern.
The History of Modern Web Development: How We Got Here
It sounds obvious, but the rise of mobile is the catalyst for the changes we’re seeing in web development right now.
Mobile and the rise of web applications
There are a few different parts to it that got us where we are today. First, the growth of mobile in the middle of this decade (around 2013 or 2014) initiated the trend of mobile or responsive website design.
These terms may sound a bit old-hat. If so, that’s a mark of how quickly the world of web development has changed. It was mostly about looks and UI, which made web properties easy to use and navigate on mobile devices, rather than just the desktop.
Tools like Bootstrap have grown rapidly, providing an easy, modeled way to build responsive, mobile websites. But what started out as a trend mostly related to looks later changed as mobile usage increased. It required a more sophisticated approach, with mobile users now expecting richer, faster web experiences, and businesses with a new way to monetize these significant changes in user behavior.
Lightweight apps for data-intensive user experiences
This is where concepts like the Single Page Web App appeared. Lightweight and dynamic, able to handle data-intensive tasks and state changes, single page web applications were unique in that they handled logic in the browser rather than on the server. It was arguably a watershed moment in changing the way we think about web development. This has helped to reduce the well-established distinction between the backend and the front end.
Behind this trend, we have witnessed an evolution towards new technologies. Node.js has quietly appeared on the scene (its popularity has really exploded in just a few years), and frameworks like Angular were at the forefront of their popularity.
The central elements of modern web development in 2021
Thus, a number of essential components of modern web development have been created as a result of changes in the industry over the past decade. Some of them are tools, others are ideas and approaches. All are based on the need to manage a balance between complex requirements, performance and simplicity.
Web components
Web components are the most important elements that characterize “modern” web development. The principle is simple: web components provide a set of reusable and configurable elements. This makes it easy to build websites and applications without writing additional lines of code that add complexity to the code base.
It should be borne in mind that web components improve encapsulation. This concept, which is really about building more modular and loosely coupled, is crucial for thinking about what makes modern web development modern.
Web components have three main elements:
- Custom elements, which are a set of JavaScript APIs that you can call and define as needed.
- The shadow DOM, which acts as a DOM attached to individual elements on your page. This essentially isolates the resources that the different elements and components need to work on your page, making it easier to manage from a development perspective and allow better performance for users.
- HTML templates, which are pieces of HTML code that can be reused and called only when needed.
Together, these elements paint a picture of modern web development. Developers are trying to manage more complexity and sophistication while improving their productivity and efficiency.
React.js
One of the reasons React was successful in spoofing Angular is the fact that it does a lot of the things Google wanted to do.
Perhaps the most significant difference between React and Angular is that React solves some of the scalability issues presented by Angular’s two-way data binding (which was for a time incredibly exciting and innovative) with one-way flow.
There is a lot of talk about this, but by moving towards a single data flow model, applications can handle data on a much larger scale without encountering problems.
Elsewhere, concepts like the virtual DOM (which is separate from a phantom DOM, help improve developer encapsulation). Indeed, flexibility is one of React’s main strengths. To use Angular, you need to know TypeScript, for example. And while you can use TypeScript when working with React, it’s not essential. You have options.
Redux, Flux and how we think about app state
The growth of React has caused web developers to think more and more about the state of the app. Although this is nothing new, with applications becoming more interactive and complex, it has become increasingly important for developers to take the issue of “state” seriously.
Therefore, libraries such as Flux and Redux have appeared on the scene that act as objects in which all the values that make up the state of an application can be stored.
Conclusion: Modern web development is both a set of tools and a way of thinking
The web development toolset has been evolving for over a decade. Mobile has been the catalyst for significant changes and has allowed us to enter a modular, light and very flexible world. Heavyweight frameworks like AngularJS have led the way, but it looks like an alternative has found a real buy-in from the wider development community.
Of course, it won’t always be like this. And while React has dominated the minds of developers for almost three years (quite a long time in the engineering world), it’s sure something will replace it at some point. However, no matter how the toolchain evolves, the basic idea that we’ll build better apps and better websites when we break things will likely endure.
The complexity will not decrease. Even as writing code becomes easier, it becomes crucial to understand how the components of an application fit together – from front-end to API integration -. Even if this starts to distract you and pose new problems that you hadn’t even thought of, it’s clear that things are going to stay interesting when it comes to web development in the future.
