What I Learned by Transitioning from Backend to Frontend Development

What I Learned by Transitioning from Backend to Frontend Development

How I switched from building products for frontend developers to building products for users.

Transitioning from Back-End to Front-End development is not that easy. I got used to the structure of back-end stuff where you usually build the data structures, writing tests like Test-Driven Development, using persistence layers and repository, database tables, and creating API endpoints for Front-End consumption.

The list is endless and Back-End has its share of complexity so back then I said I don’t have time to learn the inner workings of Front-End development.

If anything, I got myself tied to mostly back-end until I was forced to transition and lean towards Front-End so I can code the best product with great UI interactions without relying too much on Front-End frameworks and black-boxes some framework provides for me to do the heavy lifting and create great apps.

To date, these are my experiences while I transition from Back-End to Front-End developer:

It’s all about User Interface and User Experience

In back-end, what you worry mostly were your data structures, database structure and performance, code architecture, services, and building robust APIs that developers can understand for consuming them in Front-End.

In Front-End it’s very different. You need to care about the User-Interface and how your users interact with your app then measure User-Experience quantitatively. There are times you need to design the User-Experience yourself and improve the flow of the app that you’re making.

What I like about Front-End development is you directly tackle customer needs and care about User Experience they’re experiencing. So I would say the approach in Front-End is quite different because it’s customer-centric and it’s all about how you would make the customer comfortable in using the app that you’re working on than say, tackling data structures.

It makes you think of “UI-first” and how your app flows when starting your project

When I was starting some personal projects to improve my Front-End skills, it obviously improves my thinking when it comes to how the UI works and flows when user click some buttons and interact with some UI components.

Back in my Back-End days, I cannot imagine how the user would interact and improve the user flow as I was mostly concerned only with CRUD operations as well as how the app would save the data to database, including the most critical and sensitive information such as formula, credit card info, etc. So you could say that I really suck when it comes to UI part.

When I transitioned to Front-End, things were different. Now I was thinking of how the user interacts and use our app first whether they’re gonna like the experience or not. Then I would design an appropriate back-end structure and database based on the UI or mockups being presented.

It lets you think of how to improve UI reusability

Ever since the advent of Front-End frameworks such as React, we now think and arrange our UI in terms of “components” that can be reused across different pages and this is a good thing. Gone are the days of reinventing the wheel on how to reuse the UI components yourself. It is now being standardized.

With that said, transitioning to Front-End made me think of UI reusability and improved my decision-making in choosing the right Front-End framework that suits my needs and project scope whether it’s React, Vue, or Angular.

To share your UI components across different projects and teams, I advise you to take a look at what Bit’s tooling can offer you.

Example: UI components isolated using Bit and shared on bit.dev

You want to sketch your own mockups for app

Learning to sketch mockups for your ideas may not be related to Front-End skills itself, but it definitely improve my visuals and ability mock my own design to code it in Front-End.

Mockups are a different skill from Front-End but because I was excited to code Front-End from mockups and designs of others, it made me excited to do my own mockup as well and code it using Front-End technologies I’ve learned.

It’s all about Browser-side performance and client-side optimizations

Not only that you have to care about User-Interface but also in client-side or browser performance. This is important because users are going to interact in their browsers from time to time and your Front-End code is what users interact with.

This made me think that I have to amp up the browser performance whether it’s using caching strategies such as localStorage, optimizing JavaScript compression, bundling and transpiling through the use of webpack, or whether to use dynamic import in scripts.

I realized that optimizations doesn’t only come from Back-End but also to Front-End to give users a seamless experience in using the web app.

You learn how to build Responsive Web Pages

One of the headaches and arguably the challenge of Front-End development is to build Responsive Web Pages. You’ll have to make sure that your UI is responsive enough across various devices whether they’re using desktop computers, tablets or smartphones.

This has been my headache and challenge at first when I was still starting to learn the ropes of Front-End development until I get the hang of it. For the record, at first glance it seems that building responsive pages were easy but I didn’t realized I was wrong all along.

Of course if you’re going to rely on Front-End frameworks this headache is being taken away but we don’t want to rely too much on Frameworks and do the dirty work ourselves to learn how Front-End development really works from the ground up.

You learn how to look at SEO as well

SEO is the driving force behind the page rankings of your app so it’s very important that you learn it as well.

SEO is well used in Front-End app that you’re making and you’re helping your clients or your app to rank up high so potential users can see it and use it right away.

Because of learning Front-End was I able to determine that SEO is also an important skill to have and it can even increase sales for your clients or your app itself.

You learn to be good at CSS

CSS is a major part of doing Front-End development. You won’t survive without harnessing your CSS skills and don’t know how to align your UI components using CSS.

At first this was very challenging for me. I don’t have a keen eye for design nor know the proper way to align a UI component to my liking. But as I learn and learn Front-End development and get good at CSS, this has become a second nature to me and I no longer struggle.

So, by transitioning to Front-End development I learned to be good at CSS.

You learn not to depend too much on Front-End frameworks

I have to admit that as someone like me who are used to do Back-End work, I rely mostly on Front-End frameworks just to get things done and ship products to work for others.

When I was working at a startup back then and only equipped with Back-End skills at the time, I constantly rely on Front-End UI libraries and frameworks to do dropdowns, sidebars, but things started to become complicated very easily and unmaintainable for Front-End code because every single bit of codebase relies on Front-End libraries.

Transitioning to become a full-time Front-End developer gave me freedom because you were not tied to using frameworks just to make your Front-End UIs pretty and have fluid interaction. If anything, you’re free to do how your Front-End is going to align and animate without too much of dependence on frameworks.

You want to be a designer

This is funny because when I transitioned from Back-End to Front-End, I wanted to learn how to design myself. Like, designing everything from scratch and code it using my Front-End skillsets I harnessed over the past years. Then I have this idea of learning how to do Adobe Photoshop which is of course takes a couple of months to harness your skills on it.

But definitely, doing Front-End work made me more imaginative and made me excited to learn about design as well!