A Quick Guide to Building Amazing Javascript-Based UIs for Backend Developers

Introduction

If you’re interested in landing a high-paying job as a full-stack developer or developing a frontend UI for a project you’ve already built a Python server, learning Javascript can be highly beneficial. Being proficient in Javascript allows you to create interactive and user-friendly interfaces in which you can take pride.

In this article, we’ll cover all the necessary steps to start. We’ll talk about:

Understanding Basic Javascript Syntax
Setting up your development environment
Building The Frontend UI
Utilizing Tools and Frameworks to speed up your productivity

I will also include a bonus step for interacting with your Python backend.

Ultimately, you will feel confident enough to build a simple yet efficient frontend UI that seamlessly interacts with your backend server.

Step 1 – Understanding Basic Javascript Syntax

Backend developers often find frontend development overwhelming, preferring the backend logic they’re used to. However, as a Python developer, you already possess the necessary skill sets to pick up JavaScript easily.

As interpreted languages, both programming languages share some similarities. They are both object-oriented and dynamically typed. They're also versatile and suitable for different use cases like data analysis, web development, and more.

Let’s compare the basic syntax in both languages, such as loops, conditionals, functions, and classes.

Loops (python)

for i in range(7):

    print(i)

Loops (Javascript)

for (let i = 0; i < 7; i++) {

    console.log(i);

}

Conditionals (python)

x = 5

if x > 10:

    print('x is greater than 10')

elif x < 0:

    print('x is negative')

else:

    print('x is between 0 and 10')

Conditionals (Javascript)

let x = 5;

if (x > 10) {

    console.log('x is greater than 10');

} else if (x < 0) {

    console.log('x is negative');

} else {

    console.log('x is between 0 and 10');

}

Functions (Python)

def add_numbers(a, b, c):

    return a + b + c

Functions (Javascript)

function addNumbers(a, b, c) {

    return a + b + c;

}

If you find yourself needing a reference for Javascript Syntax, you will find the MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript and w3schools https://www.w3schools.com/js/DEFAULT.asp very resourceful.

Step 2: Setting up your development environment

Now that we’ve gotten the basic syntax and language constructs out of the way, let’s set up your development environment. Luckily, you’re familiar with Python-only IDEs like PyCharm and versatile ones like Visual Studio Code, JetBrains, and Sublime Text.

Visual Studio Code: https://code.visualstudio.com/ is currently the most popular, with a vast resource of community plugins like ESLINT and Prettier for code formatting and error checking, so you can download that if you don’t have one already.

Next, to run your Javascript code, you will need to install Node.js, which is the most popular Javascript engine. It also comes with NPM, a package manager similar to Python’s PIP.

By running this code in your terminal, you can check if Node.js is installed on your computer.

node -v

npm -v

If you do not have it installed, you can download it from the Official site: https://nodejs.org/en.

Step 3: Building The Frontend UI

Let’s move on to the fun part – building our UI! To create a simple UI that works on modern browsers, we need to use three languages: HTML, CSS, and Javascript. HTML, as a markup language, provides structure to the content we want to display to users. CSS helps us style the content, while Javascript adds interactivity to our elements.

Let’s consider a basic example,

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>My Frontend Page</title>

    <style>

      body {

        background-color: #000000;

font-size: 24px;

      }

      button {

        padding: 10px 20px;

        background-color: #FF0000;

      }

      button: hover {

        cursor: pointer;

      }

    </style>

  </head>

  <body>

    <h1> I'm a Python Developer that loves Javascript.</h1>

    <button>Click me</button>

    <script>

      function handleButtonClick(event) {

        alert("Button clicked. yay!");

      }

      const button = document.querySelector("button");

      button.addEventListener("click", handleClick);

    </script>

  </body>

</html>

In the example above, we have created an HTML structure that displays a text message within <h1></h1> tags, along with a button that says “Click me.” We have also added a <style></style> section that sets the background color of our web page to black and increases the font size of our text to 24px. Additionally, we have included some padding, background color (red), and hover styling options to our button. Lastly, we have created a Javascript function that selects the HTML button and adds an alert.

Structure + Style + Interactivity = Frontend UI.

As our frontend files become more extensive, we can separate our CSS and JavaScript logic into their own files and link them in the HTML file.

Resources:

Mozilla MDN Web Docs (HTML) https://developer.mozilla.org/en-US/docs/Web/HTML
Mozilla MDN Web Docs (CSS) https://developer.mozilla.org/en-US/docs/Web/CSS
W3Schools (HTML) https://www.w3schools.com/html/
W3Schools (CSS) https://www.w3schools.com/css/default.asp

Step 4: Utilizing Tools and Frameworks to speed up your productivity

As we mentioned in the last step, as our code logic becomes increasingly complex, it might make sense to start considering some useful frontend tools and frameworks. Here are some examples of these tools and frameworks:

HTML: Pug, Handlebars
CSS: Tailwind, Bootstrap, SASS
Javascript: jQuery, React, Angular, Vue, Next.js

A common fear of Backend developers is that frontend development requires the knowledge of lots of these frontend tools and frameworks. While this is somewhat true, it’s important to remember what they are – choices. We can choose to use as little or as much as we like. We can even do away with them and stick to the basics – pure HTML, CSS, and Javascript.

Let’s take React, for example. Created by Facebook, it’s the most popular Javascript framework, allowing you to build reusable UI components that you can use several times across your web application. It also has a huge community support from developers, giving you an abundance of ready-to-use, open-source resources. That way, you get to build complex frontend UI that is organized and easily maintainable in a way that speeds up your productivity.

Let’s consider a basic example using our previous example in Step 3. Here’s our red background Button as a React component.

import React from "react";

function RedButton() {

  function handleButtonClick() {

    alert("Button clicked. yay!");

  }

  return (

    <button onClick={handleButtonClick}

      style={{

        backgroundColor: "#FF0000",

        padding: "10px 20px",

        borderRadius: "5px",

        cursor: "pointer"

      }}

    >

      Click me

    </button>

  );

}

export default RedButton;

Now, we can use this Button component as often as we desire all over our app. For example,

import React from "react";

import RedButton from "./RedButton";

function Dashboard() {

  return (

    <div>

      <h1> I'm a Python Developer that loves Javascript.</h1>

      <RedButton />

    </div>

  );

}

export default Dashboard;

Bonus Step: Interacting with your backend server

Assuming you already have a basic Python backend server, you can now use your newfound JavaScript frontend skills to interact with your REST API endpoints via a GET request and display them to the users.

import React, { useEffect, useState } from "react";

import RedButton from "./RedButton";

function Dashboard() {

  const [myText, setMyText] = useState("");

  useEffect(() => {

    async function fetchText() {

      const response = await fetch("<http://my-python-api.com/text>");

      const data = await response.json();

      setMyText(data.text);

    }

    fetchText();

  }, []);

  return (

    <div>

      <h1> I'm a Python Developer that loves {myText}.</h1>

      <RedButton />

    </div>

  );

}

export default Dashboard;

In the code above, we made use of the native Javascript FETCH API: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch and two React inbuilt Hooks – useState for maintaining our app state and useEffect for loading our fetchText() API call function when the user visits our dashboard.

Conclusion

In this article, we extensively examined similarities between Python and Javascript. We also discussed below topics that a backend developer should know to build their first interactive frontend user interface with Javascript.

Basic principles of HTML and CSS
Javascript variables and data types
Conditional statements and loops in Javascript:
Manipulating the DOM by querying HTML Elements
Popular frontend tools, libraries, and frameworks
HTTP requests with Javascript

Becoming proficient in Javascript and frontend development as a Python backend developer can open up numerous career opportunities, particularly since the worldwide demand for skilled full-stack developers who know Javascript is high.

It’s essential to have fun while building your amazing ideas. Even if you don’t become a full-stack developer, having a grasp of JavaScript and understanding what frontend development entails can make you more valuable at work. It can also improve your collaboration with the frontend development team and your manager.