Building a modern web application is becoming more and more complex. A few years ago, a website owner could simply edit an HTML file and upload the file to a web server. Those days are gone.
Want to know why? Read on.
To understand the ‘why,’ we need to understand the history behind web apps.
History Behind the Web App Development
The original intention of the web browser and server was to exchange plain English text with embedded hyperlinks. The original design worked great to read and navigate research papers.
Current web applications are built on top of the original foundation, yet today’s web applications are used for various applications.
Today’s web app can replace –
…just to name a few.
To give you an analogy- building a modern web application is like building a high-rise multiplex building on an old foundation.
Why not revamp the web?
Why don’t we build a whole new foundation? You have a great idea!
Unfortunately, it will never be a reality.
And here is why.
To give you yet another analogy – consider a large, congested city. Most of us live in a city where roads are narrow, and traffic is terrible – and we complain that this city is a living hell. Moving to a small, quiet place would be good. But in reality – nobody. … and I mean nobody … leaves the city. More folks move into the city, making it even more crowded!
To ease the congestion, we build new roads and new bridges. We even have a train station go through an apartment building. e.g. Liziba Station in Chongqing, China.
A similar scenario happens in the web development world. Every startup knows that it is near impossible to ask users to move away from the existing internet. So, startups must adopt the status-quo and focus on building new frameworks and libraries on top of existing infrastructure.
In short, old requirements remained, and new requirements piled up at an exponential rate.
Now that we know the history – let us look at what we need to build a modern front-end web application. In my previous blog, I had explained choosing a right back-end.
In this blog, we will focus on front-end development – and we will focus on the tools needed.👇
Modern Frontend Web Development Build Tooling
Frontend Framework:
Today’s users expect that web applications have a sleek, desktop app-like user interface. This means web apps can not rely on page reloads. Web apps need to maintain the state and keep track of the virtual dom. Javascript frameworks such as ReactJS are used just for that.
In 2021, the ReactJS Javascript framework captured a significant market share compared with AngularJS and VueJS.
In addition to state management, a frontend framework can also take care of the following things.
- Transpiler: Old browsers do not support newer versions of the Javascript (ECMAScript) standard. This is why transpilers such as Babel are needed. Babel is a toolchain used to convert Javascript 2015+ code into a backward-compatible version. This allows programmers to use newer syntax and not worry about backward compatibility.
- Bundler: The code needs to be packaged into small packages to manage runtime load time and dependencies. Webpack is required just for that.
- Testing Framework: Framework such as Jest is needed to automate tests.
Package Manager:
Nearly every modern web project is built by using third-party libraries (packages) bundled together. NPM is the largest repository of packages. NPM has mostly resolved version dependencies between libraries.
Source Code Management: Modern web apps are built by large teams – that means we need to have a code repository (Git ) to manage and ‘blame’ the individual who broke the code!
Conclusion
You may believe that web development is complex for compelling you to hire an army of boneheaded and overpaid consultants 🤑 But, once you understand the bigger picture, you will realize that every piece in the workflow is needed.
I like to believe that today, modern web development is accessible to any layman.
So my dear readers – Code your perfect project using proper build tools. It will pay off in the long run.
Don’t be too 🥬 strict on yourself and have fun 🍧!
Say Hi on Twitter: 👋 Meera Datey