Everything you see on a screen or mobile device is a GUI (Graphical User Interface). A screen consists of pixels. Each pixel has a different color. Most modern screens have around 16.7 million different colors. Each pixel currently has the correct color so that you can read a blog on your screen.
Software is used to display these pixels in the correct colors. We will focus on the web part that uses HTML. In 1989, Tim Berners-Lee came up with the first idea, and in 1991, the language was further developed along with the very first web browser. HTML itself does not have much styling, and therefore it is styled with CSS. Writing HTML and CSS is called front end development.
How to build an interactive frontend
Most websites are static because they are intended to convey some kind of information, like the very first website: https://info.cern.ch. A website with only HTML has no styling and looks boring. That’s why CSS was developed to style the HTML. Every website with styling uses HTML and CSS to look the way the developer wants it to.
Interaction with HTML
A static website cannot process contact forms or perform certain animations. That’s why there’s also JavaScript ((PHP also exists, but we won’t go into that, in this blog). JavaScript is a scripting language that makes web pages interactive.
Although JavaScript is similar in name to Java, they are two completely different languages. The name JavaScript does come from Java because the browser used to support so-called Java applets. These were small programs, written in Java, that could be executed by the browser. However, this had a lot of limitations, so a scripting language was developed that was directly understood by the browser, JavaScript. This was supposed to resemble Java, which is currently not the case at all.
There are different ways in which JavaScript can be used. The “normal” JavaScript that is loaded via a script tag is called vanilla JS. Additionally, there are server-side scripting frameworks like NodeJS, DenoJS, en Bun. These are JavaScript runtimes and can be used to set up a web server that can serve HTML pages, just like PHP.
The beginning of frameworks
A framework is a software frame that supports a certain part of software development. It provides a structure that allows developers to work more easily and quickly on complex applications. JavaScript frameworks like React, Angular, and Vue.js are popular choices, but Laravel (a PHP framework) is also a commonly used choice for developing not only a frontend but also the backend (API).
A web application is usually developed to solve a specific problem. Take bookkeeping, for example - you want to properly process your costs, income, hours, invoices, and documentation. In the past, PHP was often used to build web applications. This meant that the web pages often had to be reloaded from the server because, for example, you submitted data. This all happened via the server, which can be slow if the server doesn’t respond quickly enough. This also results in a long loading time for the web page. To address this problem, APIs are used.
Single-page application (SPA)
When using an API (for another blog), the data must be sent in the background. This is done with JavaScript. Large applications have a lot of actions, which means you have to write a lot of JavaScript to accomplish something simple. To address this problem, jQuery was developed in 2006.
jQuery is often considered the first JavaScript framework, although it’s not really a framework. jQuery was intended to solve many of the problems developers encountered with subtle differences in web browser implementations, and you didn’t need to write as much JavaScript to get the same thing done with vanilla JavaScript. In August 2022, 77% of the 10 million most popular websites used jQuery.
Although jQuery provided a lot of abstraction, large applications still became very messy. In 2010, Jermey Ashkenas came up with Backbone. This was the first JavaScript framework that allowed you to develop single-page applications. Around the same time, AngularJS was developed, which was quickly further developed by Google. This was the first framework that offered a complete architecture for frontend development.
Different types of frameworks
Backbone
Backbone.js is a simple JavaScript framework that provides the structure for developing single-page web applications. It became popular due to its simple and minimalistic approach. With Backbone.js, developers can use models, collections, views, and routers to organize and manage the code of their applications in a way that is easy to understand and maintain.
AngularJS
AngularJS was the first to introduce a way to bind data to HTML and the ability to update the HTML in real-time. It also allowed you to create reusable components and use them throughout your web application. As we all know, reusability is incredibly important. On September 14, 2016, Angular 2 was launched. This version was rebuilt from the ground up to provide better performance and scalability.
ReactJS
In 2013, Facebook released a new framework. Although React is not easy to learn, it is the most popular framework. React uses a virtual DOM to efficiently send updates to the actual DOM (HTML), improving the performance of web applications. Because React is so populair, there are many “packages” that can be used during the development of a web application. For example, a virtual list that ensures your web page doesn’t become slow when you scroll infinitely. This is all developed by the open-source community.
VueJS
VueJS was released in 2014 and has a lot of functionality similar to Angular and React. The way you build components is just different. Vue is very easy to learn because the syntax is very simple. Vue also has a large community that expands the world of Vue with various packages.
React Native
React Native, released by Facebook in 2015, allows developers to build native mobile apps using JavaScript and React. It enables developers to use the same codebase for both iOS and Android, reducing development time. React Native uses the native components of iOS and Android, ensuring a native user experience.
Andere frameworks
There are many other frameworks, not just in the JavaScript world. There are also other frameworks such as Flutter (mobile), Laravel (web), Ruby on Rails (web), and Django (web). Each of these frameworks has its own pros and cons and is suitable for different types of projects and development needs.
Here you can see which frameworks were popular in 2023.
Adaptations on frameworks
The great thing about these frameworks is that you can set it up as you want and customize a lot. You do have to set up your own navigation (/page, etc.). You can also expand an existing application with a framework without having to set up a whole new project.
Since this is not always a good idea, various frameworks have been developed that are built on top of a JavaScript framework. These have, for example, server-side rendering. This means that a page gets built on the server instead of in the browser (a blog is coming soon). They also work with navigation based on the folder structure and have the ability to reuse a specific layout across different pages (for example, a header) without having to re-render it.
NextJS
In 2016, Vercel released NextJS as an open-source project, and since then, its popularity has grown enormously. Next.js builds on the foundation of React and offers additional functionality such as server-side rendering, dynamic routes, and automatic code splitting. This allows developers to build web applications quickly and efficiently for every use case. The server-side rendering allows for good SEO optimization, while you can also use client-side rendering (SPA) in the same project.
NuxtJS
NuxtJS actually has the same functionality as NextJS, with the difference that it is built on top of VueJS. VueJS has a smaller user base than ReactJS, so NuxtJS is also slightly less advanced than NextJS. However, this is not necessarily a bad thing. It is well-maintained, and there are plenty of extensions made by the users themselves.
SvelteKit
SvelteKit is a framework based on Svelte and offers similar functionalities as NextJS and NuxtJS. SvelteKit, however, has a few small improvements over the other two. During the compilation of the code, it is converted into efficient code, resulting in smaller final JavaScript files. This leads to faster load times.
Andere frameworks
There are also a few other frameworks like Gatsby, Hugo, or Jekyll.
Here you can see which frameworks were popular in 2023.
What else is involved
A framework is not the only thing involved in building an application. In previous blogs, we’ve talked about UX (user experience) and UI (user interface) design. After the designs are made, it’s time to translate them into a working application.
Settings and themes
During the design process, a design system is created that describes the colors, fonts, sizes, spacing, and more. This is then implemented in the frontend project. This is done by using CSS variables. A preprocessor like SCSS or postCSS is often used when writing CSS to make it easier. Tailwind can also be used, which allows you to write a kind of CSS directly in your HTML using classes.
Reusable components
As I mentioned earlier, reusability is the future. Not only in programming, but also in space travel or the environment (plastic). If your designs are good, this is not too difficult. You start with the smallest components (atoms) and build larger components which you then place in your layout.
API integration
A web application without data is quite rare. This data comes from the database. Although you can, especially now with the server-side rendering of NextJS and NuxtJS, directly fetch the data from the database, it is often done with the help of an API. The frontend calls this API and receives the requested data. This is usually also secured with authorization. The frontend can also send data to the API. If something goes wrong, the frontend shows this to the user, and the loading is usually also shown so that the user knows what is happening.
Testing
A web application always has some bugs, this can be due to differences in environments, different data, or small mistakes that have been made. These are removed during the testing phase. Automated tests are written that mimic the desired functionality and go through the entire app. If a test fails, we immediately see the cause and can fix it.
However, it is also possible that the desired functionality turns out to be slightly different because it would work better. This is discovered in the so-called “staging” environment. This is an environment where the application is live and you can do what you want there. Before we roll out to production, it is first rolled out to the staging environment where it can be tested by people.
Production and release
After the web application has been thoroughly tested, we go live in the production environment. Here, the application is used as intended. If the application is used a lot, we can scale it so that it remains fast and accessible for everyone. We can also measure everything, which will allow us to make further improvements later.
Maintenance
Technically, an application is never 100% finished. There are always versions that can be upgraded for improvements, new features, and improving functionality. We make sure your application stays up-to-date.
Final word
Frontend development is so vast that I cannot describe everything. If I had to explain each framework, we would still be here a year from now. And this is just one part of a web application. But this is also the beauty of development, constantly staying in motion and learning new things.
You may not be aware of it, but the world is developing at a breakneck pace. It’s been 34 years since HTML and the browser were invented, and within 10 years, openAI has not only created a smart text-based AI, but also image generation and even video generation.
Now the question is, is your company also developing or is it standing still (regressing)? I’m always open to a non-binding conversation where you can ask anything.
Thanks for reading and until next time!
Arjen de Vos 
