A no-nonsense guide to frontend for backend developers

• Introduction
• Absolute basics
• Client-side vs. Server-side
• Components
• Frontend libraries
• Conclusion

Introduction

I am a backend developer... the usual kind... the kind that is good at math but terrible at aesthetics. Any attempt at design that I ever made always resulted in boring looking generic junk. I tried using dozens of tools but the end result would always look like it was written in Microsoft FrontPage 2003

I was self-conscious enough to see that, so I gave up trying. I will write you a document, but only if you give me a ready $LaTeX$ style file. I will write a blog, but only in Markdown and let someone else worry about visual appeal. I will prepare a DevFest presentation, but only if organizers provide a PowerPoint template. I will never try to design anything, be it a button or a sign-in form.

And yet, I cannot just shave my head and retreat to backend JSON API sanctuary --- I still need to write frontend for my pet projects and build dashboards for internal use. But trying to enter the frontend world is incredibly painful --- dozens of frameworks, libraries, philosophies. I have been hearing the words React or Angular or Node for the last 8 years but I was too scared to actually try and make sense of them. Learning C or Leetcode has been easier than this.

Nevertheless, I forced myself to learn it, and now I want to be a Prometheus (I am not sure if there isn't already a JS framework with this name) and bring this knowledge to my people --- the backend devs.

As a bonus, I included the ultimate recommendation of which frontend framework to choose. I myself had a decision paralysis for a very long time and this will help you overcome it and start building things without overthinking it.

Absolute basics

Let's start with the absolute basics to ensure that we are on the same page before discussing frameworks. You can skip this section if you want.

Minimal web page

A minimal web page consists of a text file with extension .html and tags for content:

    <div>Hello World!</div>

To add formatting you can either add a style attribute:

    <div>



<p>or if you have a lot of formatting, add id to your content and refer to it from <style> tag. The style is formatted using CSS language which looks like an HTML element followed by JSON related to it:<br>
</style></p>

<pre class="brush:php;toolbar:false">
    <div>



<p>This will create static pages that do not change and do not react to any events. To add some interactivity, like checking if you left a form field empty or entered a valid email, you will need JavaScript.</p>

<h3>
  
  
  Running JavaScript
</h3>

<p>Before using any programming language you must first install it on your computer. For C/C++ you need to install a compiler like GCC or Clang, for Python you need to install a CPython interpreter.</p>

<p>To run JavaScript you only need a web browser --- all modern web browsers can run JS code. It is as simple as opening a web browser and going to pressing F12. This will open a JS console:</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="A no-nonsense guide to frontend for backend developers"></p>

<p>You can also create a text file with extension .html  and put a <script> tag on it, open this file in browser, and the outcome will be displayed if you press F12:<br>
</script></p>

<pre class="brush:php;toolbar:false"><!-- myfile.html -->

    <script>
        // write a JS code here
        console.log('Hello World');
    </script>

However, for safety reasons, the browser console has no access to your file system and lacks some other features that would make it possible to use JS to, at least, achieve the functionality of other scripting languages like Python or Ruby. So, there is a second way to run JS code on your computer --- installing Node.js. It is essentially a JS interpreter which can do stuff like reading and writing files:

//$ node
//Welcome to Node.js v23.3.0.
//Type ".help" for more information.
> console.log('Creating a new directory');
> fs.mkdirSync('new_dir'); // access filesystem using fs

With Node.js you can run JS code in the server or in your Docker container without having to install a web browser. We will see below that this is very useful.

Classical stack

Combining the sections above we can create a web page using the classical HTML CSS JS setup.

They can be combined in a single .html file with 3 sections: content itself, styles, and scripts:

    <div>Hello World!</div>

scripts.js

    <div>



<p>or if you have a lot of formatting, add id to your content and refer to it from <style> tag. The style is formatted using CSS language which looks like an HTML element followed by JSON related to it:<br>
</style></p>

<pre class="brush:php;toolbar:false">
    <div>



<p>This will create static pages that do not change and do not react to any events. To add some interactivity, like checking if you left a form field empty or entered a valid email, you will need JavaScript.</p>

<h3>
  
  
  Running JavaScript
</h3>

<p>Before using any programming language you must first install it on your computer. For C/C++ you need to install a compiler like GCC or Clang, for Python you need to install a CPython interpreter.</p>

<p>To run JavaScript you only need a web browser --- all modern web browsers can run JS code. It is as simple as opening a web browser and going to pressing F12. This will open a JS console:</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="A no-nonsense guide to frontend for backend developers"></p>

<p>You can also create a text file with extension .html  and put a <script> tag on it, open this file in browser, and the outcome will be displayed if you press F12:<br>
</script></p>

<pre class="brush:php;toolbar:false"><!-- myfile.html -->

    <script>
        // write a JS code here
        console.log('Hello World');
    </script>

The biggest problem with this setup is that if you look at the HTML element, for example, the , you cannot know which style it has and which scripts are listening to it unless you look at the other two files. Similarly, if you look at the .js file, you see a function sayHelloWorld() but have no idea whether it is needed or not, or if some element is calling it or not, without looking at the .html file. This goes against the so-called Locality of Behavior principle.

Anyway, this setup has been used on the Web for several decades.

Client-side vs. Server-side

Great! We have covered the basics. Now let's talk about the main dilemma that underlies all discussions regarding the choice of a frontend framework, and the architecture of your app in general. Before we start, let's clarify some terminology: client-side means the browser or an app in which the users consume your content, and server-side is usually the backend server that stores the login information, has access to database, and overall serves as the backbone of the entire app. Now we are ready to dive deeper.

Classical HTML generation

In any non-trivial web app that displays any kind of data we will need a way to generate HTML scripts automatically. Otherwise, whenever the data is updated, somebody will have to manually update the HTML tags.

Since HTML is a simple text file, it can be easily created by any scripting language as a string. There are many libraries that do this. For example, with Jinja2 library we can write all elements of a list mylist = [1,2,3,4,5] into table rows using a language that resembles Python:

//$ node
//Welcome to Node.js v23.3.0.
//Type ".help" for more information.
> console.log('Creating a new directory');
> fs.mkdirSync('new_dir'); // access filesystem using fs

Of course, the browser would not understand this --- you will need to render this Jinja2 script into actual HTML by running special commands in Python, which will render an .html file:

    <!-- page HTML content here -->
    <div>



<p>You can see that we have a button that triggers a function sayHelloWorld(), which is defined inside  <script> tags and it has font size of 40pt, which is defined inside <style> tags.</script></p>

<p>Also note that the comment symbols are different in all 3 sections:</p>

<ul>
<li>inside pure HTML it is <!-- -->
</li>
<li>inside CSS it is /* */
</li>
<li>inside JS it is //.</li>
</ul>

<p>This shows that the browser understands that these are 3 different languages. So, the usual practice is not to clutter .html file too much and separate it into 3 files and call styles and scripts by file path:</p>

<p><strong>content.html</strong><br>
</p>

<pre class="brush:php;toolbar:false">
    <div>



<p><strong>styles.css</strong><br>
</p>

<pre class="brush:php;toolbar:false">#mytext {color:red; font-size:20pt}
button {font-size: 40pt}

This feature is so crucial that it even has a special name --- templating. I want to stress one thing: such HTML generation from a template happens in the server in a language of your choice (Python/Ruby/Java/C#), usually a language your backend code is written in. Browsers do not understand these languages natively --- they only understand JS, so we send them a pre-rendered HTML file. This will become important later on.

JSON vs HTML API

In the previous section we saw how backend can generate HTML scripts and fill them with the data from database and other information. For example, if the user presses the Like button on some social media post, the backend must update the content of Liked Posts page to include that new post there. This can be done in two ways:

1) Backend has an HTML template ready with some Jinja2 script and renders it with the latest query result from the database:

    <div>Hello World!</div>

Here the rendered HTML is sent directly to the frontend together with the CSS styles and JS scripts. The browser simply displays what the backend has already prepared and is not aware of the types of data or any logic on the page.

2) Backend sends the JSON that specifies the query result from database 's liked_posts table in a format that browser would understand:

    <div>



<p>or if you have a lot of formatting, add id to your content and refer to it from <style> tag. The style is formatted using CSS language which looks like an HTML element followed by JSON related to it:<br>
</style></p>

<pre class="brush:php;toolbar:false">
    <div>



<p>This will create static pages that do not change and do not react to any events. To add some interactivity, like checking if you left a form field empty or entered a valid email, you will need JavaScript.</p>

<h3>
  
  
  Running JavaScript
</h3>

<p>Before using any programming language you must first install it on your computer. For C/C++ you need to install a compiler like GCC or Clang, for Python you need to install a CPython interpreter.</p>

<p>To run JavaScript you only need a web browser --- all modern web browsers can run JS code. It is as simple as opening a web browser and going to pressing F12. This will open a JS console:</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="A no-nonsense guide to frontend for backend developers"></p>

<p>You can also create a text file with extension .html  and put a <script> tag on it, open this file in browser, and the outcome will be displayed if you press F12:<br>
</script></p>

<pre class="brush:php;toolbar:false"><!-- myfile.html -->

    <script>
        // write a JS code here
        console.log('Hello World');
    </script>

The browser runs special JS functions that request such JSON, and when they receive it, they use extract data from it and generate HTML from it on the browser itself:

//$ node
//Welcome to Node.js v23.3.0.
//Type ".help" for more information.
> console.log('Creating a new directory');
> fs.mkdirSync('new_dir'); // access filesystem using fs

Option 2 is popular for some reason, although it is more complicated. In this setup you only expose the frontend port to the client, and it will serve the static HTML JS app without any need for the backend. And only when it needs to fetch data from the backend, will the frontend connect to the backend itself, abstracting away this functionality from the browser. Of course, to do so the frontend now will need its own router. Basically, this is frontend trying to do what backend should be doing.

Components

So far, we have covered the basics of how the working frontend code can be written and where it is located. We have seen how HTML can be automatically generated but, up till now, we assumed that the JS part is written manually. This is very often not the case in the real life frontend development. Manually writing JS scripts is cumbersome and your code structure gets very messy very fast. Moreover, if you need to reuse scripts, you will have to old-school copy and paste them. So, since the very beginning, developers used some sorts of libraries to make JS development easier and more structured.

JQuery

In the early days, using vanilla JS to find and modify elements or to send AJAX requests to the server was very cumbersome. Thus, many developers used JQuery, which was a neat syntactic sugar on top of the vanilla JS. Many add-ons have been written in JQuery, like Datatables (interactive tables with search, pagination, sorting out of box), or animated clocks, or counters etc. Using such components pre-written by someone else was really easy --- just download the code and add it to your HTML page under <script> tags. Revisiting the example from above, we could add a row to a table much easier with JQuery:<br> </script>

    <div>Hello World!</div>

or sending an AJAX request to the backend API would require an entire separate library for vanilla JS while it could be done easily in JQuery:

    <div>



<p>or if you have a lot of formatting, add id to your content and refer to it from <style> tag. The style is formatted using CSS language which looks like an HTML element followed by JSON related to it:<br>
</style></p>

<pre class="brush:php;toolbar:false">
    <div>



<p>This will create static pages that do not change and do not react to any events. To add some interactivity, like checking if you left a form field empty or entered a valid email, you will need JavaScript.</p>

<h3>
  
  
  Running JavaScript
</h3>

<p>Before using any programming language you must first install it on your computer. For C/C++ you need to install a compiler like GCC or Clang, for Python you need to install a CPython interpreter.</p>

<p>To run JavaScript you only need a web browser --- all modern web browsers can run JS code. It is as simple as opening a web browser and going to pressing F12. This will open a JS console:</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="A no-nonsense guide to frontend for backend developers"></p>

<p>You can also create a text file with extension .html  and put a <script> tag on it, open this file in browser, and the outcome will be displayed if you press F12:<br>
</script></p>

<pre class="brush:php;toolbar:false"><!-- myfile.html -->

    <script>
        // write a JS code here
        console.log('Hello World');
    </script>

With time, though, vanilla JS and HTML standard itself added a lot of functionality, making JQuery kinda obsolete. For example, pop-up calendars to select dates are built-in in HTML nowadays. Still, a lot of current web depends on JQuery in one way or another.

Bootstrap

Around 2010, Bootstrap was created as a library of reusable components, such as beautiful buttons, responsive forms, and pop-ups. The main feature of Bootstrap was that it relied on the HTML syntax, trying to minimize the time and energy the developers spend writing actual JS code. It used JQuery and CSS under the hood, but it completely abstracted it away for its users. Basically, using Bootstrap was as simple as adding classes to the HTML elements.

For example, you want to write a button which shows or hides a text when pressed. In JS this looks like:

//$ node
//Welcome to Node.js v23.3.0.
//Type ".help" for more information.
> console.log('Creating a new directory');
> fs.mkdirSync('new_dir'); // access filesystem using fs

The web browser would not understand this element, so the final step is to compile this JSX code into HTML JS. The result will be something like:

    <!-- page HTML content here -->
    <div>



<p>You can see that we have a button that triggers a function sayHelloWorld(), which is defined inside  <script> tags and it has font size of 40pt, which is defined inside <style> tags.</script></p>

<p>Also note that the comment symbols are different in all 3 sections:</p>

<ul>
<li>inside pure HTML it is <!-- -->
</li>
<li>inside CSS it is /* */
</li>
<li>inside JS it is //.</li>
</ul>

<p>This shows that the browser understands that these are 3 different languages. So, the usual practice is not to clutter .html file too much and separate it into 3 files and call styles and scripts by file path:</p>

<p><strong>content.html</strong><br>
</p>

<pre class="brush:php;toolbar:false">
    <div>



<p><strong>styles.css</strong><br>
</p>

<pre class="brush:php;toolbar:false">#mytext {color:red; font-size:20pt}
button {font-size: 40pt}

However, this approach didn't really catch on yet.

JS component libraries

For those people who hesitate using libraries like React.js, there are JS libraries that provide pre-compiled components like Chart.js which you can use to create charts with vanilla JS:

function sayHelloWorld() {
    console.log('Hello World');
}

which is not the most intuitive way to write dynamic pages.

It is a library and supports numerous 3rd party tools for routing and state management. That is why it is too flexible and less intuitive for beginners.

Verdict: Not recommended.

Vue.js

Brief summary:
Uses templates to add JS into HTML:

{% for item in mylist %} {% endfor %}

{{ item }}

It is a minimal framework. And you will find yourself writing a lot of vanilla JS code to achieve some functionality that is easy in Vue.js

Verdict: Not recommended.

Alpine.js

Brief summary: a minimal library that has no build step --- the entire library is a single 15 KB JS file.

Uses templates like Vue.js and Svelte but you can write JS directly inside HTML attributes without any <script> environment:<br> </script>

    <div>Hello World!</div>

It markets itself as a modern replacement for JQuery and it is really cool for adding a little bit of interactivity without a complicated user interface.

Verdict: Recommended if you need a little bit of interactivity and handling JSONs.

HTMX

Brief summary: a library that promotes having all logic in the backend and requesting HTML instead of JSON.

Promotes using any backend-side templating library like Jinja2 to generate required HTML and then send this HTML snippet to the client without any JS.

    <div>



<p>or if you have a lot of formatting, add id to your content and refer to it from <style> tag. The style is formatted using CSS language which looks like an HTML element followed by JSON related to it:<br>
</style></p>

<pre class="brush:php;toolbar:false">
    <div>



<p>This will create static pages that do not change and do not react to any events. To add some interactivity, like checking if you left a form field empty or entered a valid email, you will need JavaScript.</p>

<h3>
  
  
  Running JavaScript
</h3>

<p>Before using any programming language you must first install it on your computer. For C/C++ you need to install a compiler like GCC or Clang, for Python you need to install a CPython interpreter.</p>

<p>To run JavaScript you only need a web browser --- all modern web browsers can run JS code. It is as simple as opening a web browser and going to pressing F12. This will open a JS console:</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="A no-nonsense guide to frontend for backend developers"></p>

<p>You can also create a text file with extension .html  and put a <script> tag on it, open this file in browser, and the outcome will be displayed if you press F12:<br>
</script></p>

<pre class="brush:php;toolbar:false"><!-- myfile.html -->

    <script>
        // write a JS code here
        console.log('Hello World');
    </script>

and the backend sends not a JSON but an HTML snippet:

//$ node
//Welcome to Node.js v23.3.0.
//Type ".help" for more information.
> console.log('Creating a new directory');
> fs.mkdirSync('new_dir'); // access filesystem using fs

Supports all HTTP verbs (GET/POST/PUT/PATCH/DELETE).

Verdict: Recommended if you don't need JSON data.

Which framework to choose?

I will try to be as simplistic and dismissive as possible, because if I went into an objective analysis of pros and cons, you wouldn't get any useful information aside from "it depends". I will be biased towards the least movements necessary to set up a user interface and to avoiding build step if possible. So, here is my ultimate recommendation:

Conclusion

In this blog post I wanted to share everything that I learned about frontend as a backend developer. It seems that this stuff is overly complicated and intimidating, although, upon digging, I realized that there is a logic and structure to it. I hope that I could convey my understanding to you, and that you found this post useful.