Home >Web Front-end >JS Tutorial >A no-nonsense guide to frontend for backend developers
A no-nonsense guide to frontend for backend developers
- Patricia ArquetteOriginal
- 2025-01-03 11:42:40401browse
- 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:
<html>
<div>Hello World!</div>
</html>
To add formatting you can either add a style attribute:
<html>
<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>
<pre class="brush:php;toolbar:false"><html>
<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="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg" 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>
<pre class="brush:php;toolbar:false"><!-- myfile.html -->
<html>
<script>
// write a JS code here
console.log('Hello World');
</script>
</html>
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:
<html>
<div>Hello World!</div>
</html>
scripts.js
<html>
<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>
<pre class="brush:php;toolbar:false"><html>
<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="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg" 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>
<pre class="brush:php;toolbar:false"><!-- myfile.html -->
<html>
<script>
// write a JS code here
console.log('Hello World');
</script>
</html>
The biggest problem with this setup is that if you look at the HTML element, for example, the
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:
<html>
<!-- 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.</p>
<p>Also note that the comment symbols are different in all 3 sections:</p>
- inside pure HTML it is
- inside CSS it is /* */
- inside JS it is //.
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:
content.html
<html>
<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:
<html>
<div>Hello World!</div>
</html>
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:
<html>
<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>
<pre class="brush:php;toolbar:false"><html>
<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="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg" 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>
<pre class="brush:php;toolbar:false"><!-- myfile.html -->
<html>
<script>
// write a JS code here
console.log('Hello World');
</script>
</html>
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
- An in-depth analysis of the Bootstrap list group component
- Detailed explanation of JavaScript function currying
- Complete example of JS password generation and strength detection (with demo source code download)
- Angularjs integrates WeChat UI (weui)
- How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills