De-mystifying Frontend
Through The Lens of a Backend Developer
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…




Comments
There are no comments for this story
Be the first to respond and start the conversation.