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:
<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="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg" 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>
<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="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg" 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>
<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="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg" 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>
<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
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1671
14
1428
52
1329
25
1276
29
1256
24
Python vs. JavaScript: The Learning Curve and Ease of Use
Apr 16, 2025 am 12:12 AM
Python is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.
From C/C to JavaScript: How It All Works
Apr 14, 2025 am 12:05 AM
The shift from C/C to JavaScript requires adapting to dynamic typing, garbage collection and asynchronous programming. 1) C/C is a statically typed language that requires manual memory management, while JavaScript is dynamically typed and garbage collection is automatically processed. 2) C/C needs to be compiled into machine code, while JavaScript is an interpreted language. 3) JavaScript introduces concepts such as closures, prototype chains and Promise, which enhances flexibility and asynchronous programming capabilities.
JavaScript and the Web: Core Functionality and Use Cases
Apr 18, 2025 am 12:19 AM
The main uses of JavaScript in web development include client interaction, form verification and asynchronous communication. 1) Dynamic content update and user interaction through DOM operations; 2) Client verification is carried out before the user submits data to improve the user experience; 3) Refreshless communication with the server is achieved through AJAX technology.
JavaScript in Action: Real-World Examples and Projects
Apr 19, 2025 am 12:13 AM
JavaScript's application in the real world includes front-end and back-end development. 1) Display front-end applications by building a TODO list application, involving DOM operations and event processing. 2) Build RESTfulAPI through Node.js and Express to demonstrate back-end applications.
Understanding the JavaScript Engine: Implementation Details
Apr 17, 2025 am 12:05 AM
Understanding how JavaScript engine works internally is important to developers because it helps write more efficient code and understand performance bottlenecks and optimization strategies. 1) The engine's workflow includes three stages: parsing, compiling and execution; 2) During the execution process, the engine will perform dynamic optimization, such as inline cache and hidden classes; 3) Best practices include avoiding global variables, optimizing loops, using const and lets, and avoiding excessive use of closures.
Python vs. JavaScript: Community, Libraries, and Resources
Apr 15, 2025 am 12:16 AM
Python and JavaScript have their own advantages and disadvantages in terms of community, libraries and resources. 1) The Python community is friendly and suitable for beginners, but the front-end development resources are not as rich as JavaScript. 2) Python is powerful in data science and machine learning libraries, while JavaScript is better in front-end development libraries and frameworks. 3) Both have rich learning resources, but Python is suitable for starting with official documents, while JavaScript is better with MDNWebDocs. The choice should be based on project needs and personal interests.
Python vs. JavaScript: Development Environments and Tools
Apr 26, 2025 am 12:09 AM
Both Python and JavaScript's choices in development environments are important. 1) Python's development environment includes PyCharm, JupyterNotebook and Anaconda, which are suitable for data science and rapid prototyping. 2) The development environment of JavaScript includes Node.js, VSCode and Webpack, which are suitable for front-end and back-end development. Choosing the right tools according to project needs can improve development efficiency and project success rate.
The Role of C/C in JavaScript Interpreters and Compilers
Apr 20, 2025 am 12:01 AM
C and C play a vital role in the JavaScript engine, mainly used to implement interpreters and JIT compilers. 1) C is used to parse JavaScript source code and generate an abstract syntax tree. 2) C is responsible for generating and executing bytecode. 3) C implements the JIT compiler, optimizes and compiles hot-spot code at runtime, and significantly improves the execution efficiency of JavaScript.
