It is not that easy to change from Back-End to Front-End development. I used the back-end framework where you typically construct data structures, write tests such as Test-Driven Design, use storage layers and registry, database tables, and create front-end API endpoints.
The list is endless and Back-End has its share of complexities so back then I said I had no time to learn the inner workings of the production of Front-End.
If anything, I’ve been bound to mostly back-end until I’ve been forced to move and lean to Front-End so I can code the best product with great UI interactions without relying too much on Front-End frameworks and black boxes other framework provides me with the heavy lifting and great apps to build.
The User Interface and User Experience
What you’re most concerned about in the back-end is your data structures, database structure and performance, application design, services, and build reliable APIs that developers would understand to consume in Front-End.
It’s very different to Front-End. You need to think about the user interface, and how people communicate with your app, and then quantitatively evaluate user experience. There are times when you need to design yourself the User-Experience and improve the flow of the app you are making.
What I like about the creation of Front-End is that you answer customer needs explicitly and think for their user experience. And I’d say the Front-End approach is very different as it’s customer-centric because it’s more about how you’d make the customer happier while you’re using the device you’re working on than when you’re thinking about addressing data structures.
It makes you think about “UI-first” and how the software flows when you launch your project
Once I started some personal projects to improve my Front-End skills it naturally enhances my understanding about how the UI functions and flows when the user clicks on some buttons and interacts with some components of the UI.
Back in my Back-End days, I can’t imagine how the user would communicate and enhance the user experience since I was mainly concerned only with CRUD operations and how the device would save the data to the database, including the most important and sensitive information such as formula, credit card info, etc. So you could say that when it comes to the UI part, I’m really sucking.
Things were different when I was switching to Front-End. Now I was thinking about how the user communicates and whether they’ll like the interaction or not, using our app first. Then I would design a suitable backend structure and database based on the presented UI or mockups.
This lets you think about how to improve the reusability of the UI
Since the introduction of Front-End frameworks like React, we’ve now been thinking and organizing our UI in terms of “components” that can be reused through different pages and this is a good thing. The days of reinventing the wheel on how you can reuse the UI components yourself are gone. Now, it is uniform.
Having said that, switching to Front-End made me think about UI reusability and strengthened my decision making in choosing the right Front-End framework that matches my needs and project scope, whether it’s React, Vue, or Angular.
You want to design your own mock-ups for the app
It may not be connected to Front-End skills themselves to learn to draw mockups for your ideas, but it certainly enhances my visuals and my ability to mock my own design to code it in the Front-End area.
Mockups are a different Front-End ability, but because I was excited to code Front-End from other people’s mockups and prototypes, I was excited to do my own mockup as well and code it using Front-End technologies I’ve learned.
It is all about performance on the browser side and optimisation on the customer side
Not only must you think about the user interface, but also about the performance of the app or server. This is critical because from time to time users can communicate in their browsers, and the users interact with your Front-End application.
It made me think I need to improve the browser efficiency whether it’s using caching techniques like localStorage, optimizing JavaScript compression, bundling and transpiling with webpack, or using dynamic imports in scripts.
I found that enhancements come not only from Back-End but also from Front-End to give users a smooth web app experience.
Learn how to create Responsible Web Pages
One of the challenges and arguably the difficulty of designing Front-End is creating Responsive Web Pages. You will need to ensure that your UI is responsive enough across different devices, whether using desktop computers, tablets or smartphones.
This was my annoyance and challenge at first, when I was still learning the Front-End architecture ropes before I got the hang of it. For the record, it looks like creating sensitive pages was easy at first glance but I didn’t realize I was wrong all along.
Of course, if you’re going to focus on Front-End frameworks to eliminate this burden, but we don’t want to depend too much on Frameworks and do the dirty work ourselves to learn how Front-End development works from the ground up.
Learn how to use SEO too
SEO is the driving force behind your app’s page rankings, so learning it as well is very important.
SEO is well used in the Front-End software you’re building and you’re helping your clients or device rank high so that potential users can see it and use it instantly.
I was able to determine that SEO is also an important skill to have because of learning Front-End and it can even increase sales for your customers or your app itself.
Learning how to be successful at CSS
CSS is an integral part of developing Front-End. By harnessing your CSS skills, you won’t survive, and don’t know how to match the UI components with CSS.
This was extremely challenging for me at first. I have no keen eye for design nor know how to align a component of the UI to my liking. But as I learn and learn the development of Front-End and get good at CSS this has become a second nature to me and I don’t struggle anymore.
Remember not to excessively depend on Front-End frameworks
As someone like me who is used to doing Back-End work, I have to admit that I rely mostly on Front-End frameworks just to get things done and ship products to work for others.
When I worked at a startup back then and was only equipped with Back-End skills at the time, I depend constantly on Front-End UI libraries and frameworks to do dropdowns, sidebars, but things started to get very quickly complicated and unmanageable for Front-End code, because every single bit of codebase relies on Front-End libraries.
Transitioning into a full-time Front-End developer gave me freedom because you weren’t bound to use frameworks just to make your Front-End UIs beautiful and interact fluidly. If anything, you’re free to do how your Front-End aligns and animates without relying too much on frameworks.
Conclusion
From the back-end perspective as I used to, Front-End is really challenging for me at first until development of apps with good foundation in Front-End became a second nature for me.
It may be easy for others to code at first glance on Front-End depending on who you ask but certainly a difficult thing for me at first.
With the way things are going nowadays in the Web Development world, I just thought that learning how to do Front-End would help my career and can contribute more to my customers so I jumped the Front-End bandwagon and started learning immediately.
For people who want to move from Back-End to Front-End and don’t know where to get started, this is my advice to you: just do this. Exercise a lot. Learn the basics and the right skill sets / technologies to get great at Front-End Development.
