Understanding Frontend Development: A Deep Dive
“All frontend devs do is make buttons orange.”
Honestly, I thought the same before I got into web development. Once you dive deeper, you realise how far that is from the truth. Few of important task which every developer must have faced at some point are mentioned below.
1.Responsive Design:
One of the most important aspect that every dev have to take care of is making sure that the website that they design is representable in every screen size. It is one of the thing that sounds simple but gets tricky really quickly. Generally we have to define different CSS for laptop/desktop screen and for mobile phone display.
2.Form Handling:
Input forms are essential part of every modern web application, either it be a search box, email input box or something more security sensitive such as password input. These forms have complex logic running under the hood for making functionality like “Password and Re Enter Password matching”, “Email validation”, “Predictive Search Autocomplete”, etc.
3.State management and Data Storing
In frontend we often have to share and store datasets between components and pages without calling backend APIs. For storing these data we have several methods such as local state, context api, localStorage, sessionStorage, etc. Devs need to consider pros and cons of these methods and choose a method which fit there requirement.
4.Authentication and protected routing:
Authentication is undoubtedly the most critical frontend task that every full stack application demands, thankfully it is often made easier by using Auth Libs such as Clerk, NextAuth, etc. Giving role based access to user and setting up protected routes and redirection flow is also something that devs have to take care of in frontend.
5.Handling API calls:
Frontend gets its data from backend via APIs, most commonly RESTful APIS. Each API have its own template for making a request. And once request is made dev have to handle loading state and the response that is coming from API, if there is any error then it must be handled in way that it doesn't break the program, and user is also notified about the nature of error and its status code (404, 400, 500). Apart from this there are several safety functions like rate limiting and debouncing, that must be integrated with certain API calls.
6.Security Responsibilities
Apart from these tasks frontend devs always have to keep security in mind while development. Either it be encrypting password as soon as user enter it in password input box or it be making sure that any critical information such as jwt token or API keys could not be accessed from javascript. Frontend vulnerabilities can lead to serious security breaches.
Frontend development is way more complicated then just colouring a button. Even simple things that we use in our daily life have complex system running it behind the curtains which are often overlooked. When I started my web dev journey then getting to understand the working of websites that I have been using for years was a fun and enlightening experience.