01 logo

De-mystifying Frontend

Through The Lens of a Backend Developer

By Vidisha JitaniPublished 5 years ago 3 min read
De-mystifying Frontend
Photo by Ferenc Almasi on Unsplash

It so happened.. I recently started learning frontend and found it to be amazingly similar to backend itself. With this blog, I have tried to jot down my understanding and learnings of frontend concepts from the eyes of a Java and Python developer.

The goal is to finally be able to make an analogy between the frontend and backend concepts and to develop a different perspective.

This blog assumes that you have a basic college-level experience of HTML, CSS, and JS. If yes, do you remember how tedious and painful it was, to maintain id and classes for each element and to add corresponding styling and scripting on them. Maybe that's why you are a backend developer now.

There are a lot of buzzwords in frontend which you might have probably heard, and it must be somewhere there in your to-read list as well. Let me just try to explain a few in terms of backend concepts.. ?!

Typescript

Ever used Type Hinting in Python?! This is for adding the same functionality in Javascript. Looks like dynamic language problems 😛

Ecmascript

Encountered any new syntax in javascript? Highly likely that it's because of ES. It's for standardizing different frontend languages like Javascript, Typescript, etc. Few of its syntaxes are very similar to python itself. Check out this link, if you don’t believe me.

Babel/Grunt

Currently, all browsers don’t support ES6. So, a step is needed to convert from ES6 to ES5. It's like, you have written in python3 and something is converting your code to python2 for you.

WebPack

This is like the frontend’s build process where they translate code and create jars (bundles) from it which can be deployed later on. Translation usually involves changing from ES6 to ES5 or minifying the code. Bundling helps in shipping the code to the server/CDN from where UI code will be served.

React

React is a UI framework that helps in structuring the frontend logic, easing frontend development to a great extent.

In the last 5–6 years the world of frontend has changed a lot, primarily due to React being launched in 2013 by Facebook.

React is based on Components. This is very synonymous to our classes. Components consist of:

  • States: These are like the properties we define inside our classes. This helps in maintaining states.
  • Props: Arguments that are passed from somewhere else via function parameters. These are used to change the states of the component.
  • Render Function: This is a function that is responsible for defining how the component will look and is related to visual aspects. Since the backend doesn’t have any visual aspects, I couldn’t find any analogy with the backend over here.
  • Lifecycle functions: These are like our Java’s Spring Bean Lifecycle callbacks. These functions are called when a component is loaded and unloaded in the DOM, similar to classes being created and removed from the Spring container.

One thing I found very disturbingly different about frontend is — it keeps evolving at a very fast pace.

So when I thought was done with React I realized, it has already moved on to something new from class-based components.

Functional Components

Class-based components are a bit heavy for the javascript engine. Apparently, it can optimise functions in a much better way — hence, functions based components. But since functions can’t have states and internal functions, they can only be used to represent presentational logic.

React Hooks

React hooks basically solves the above problems. Now states and lifecycle functions can be defined in functional components itself using its constructs — useEffect() and useState().

It looks like, I have come a long way in my frontend journey, but it doesn’t end here. A lot of Suspense is still in Store for me and you…

apps

About the Creator

Reader insights

Be the first to share your insights about this piece.

How does it work?

Add your insights

Comments

There are no comments for this story

Be the first to respond and start the conversation.

Sign in to comment

    Find us on social media

    Miscellaneous links

    • Explore
    • Contact
    • Privacy Policy
    • Terms of Use
    • Support

    © 2026 Creatd, Inc. All Rights Reserved.