How to Transition from Backend to Full-Stack Developer
A practical and honest guide from personal experience
First of all, ask yourself: why do you want to be a full-stack developer? Before jumping on to the bandwagon, make sure you are aware of what you are getting yourself into.
Here is a non-exhaustive list (IMO) of what a full-stack developer is:
- A sponge: flexible enough to work on multiple domains at times and absorbent to soak up all the knowledge.
- An architect: being a jack of all trades does not mean that you are a master of none, it simply means that your problem statement is different from a pure backend or frontend engineer. The craftsmanship of a full-stack developer is hard to summarize in one sentence, but a good enough description would be — a backend and frontend engineer solves problems from a first-person view, while a full-stack developer solves problem from the third-person view.
- A diplomat: since you get to see the big picture, you will most likely interact more with the PMs as well. You are the glue and cement between the frontend and backend teams, because you travel between realms, and therefore you should be objective and not have any bias towards a certain tech stack.
But don’t fret, if you are already a proficient backend developer, you are probably more than 50% closer to becoming a full-stack developer. Think of full-stack development as consisting of 50% backend and 50% frontend. Let’s say the passing score is 70%, then you just need another 20% to be qualified as a full-stack developer!
Ok, sorry for the oversimplification, but you should definitely give yourself some credit for being proficient in the backend domain. So if you are determined to embark on this journey, let’s get started.
Preparation Stage
Avoid the tutorial hell — build something!
The best way to gain experience and credentials is to get your hands dirty.
- Look for opportunities in your team or surroundings. Get involved in an existing UI project, or spearhead a new idea. Aim to improve a certain process or to solve a real problem.
- Otherwise, get yourself exposed to the frontend world by building pet projects such as personal websites, budgeting apps and so on.
The key here is to gain insight of what it means by building a user facing tool. This provides you with a realistic experience and a good story to tell.
Master your frontend basics
Bread and butter
- JavaScript is a must, but absolutely learn TypeScript if you have time on your side.
- CSS or CSS preprocessor such as SASS
- HTML (of course)
Frontend framework or library
- Focus your full attention to build a solid foundation in one of these popular frontend framework/libraries — React, Angular or Vue.
- What do I mean by foundation? Here are some examples for React:
— Class-based component basics (don’t delve too much into it, most places are migrating to hook-based React).
—Basic hooks such as useState, useEffect, useCallback, useMemo, useRef, useContext and useReducer. Understand when to use them and compare their differences.
— State management in React, e.g. Redux + Saga, React context, prop drill and etc.
— Design pattern: e.g. Presentational & Container Component Pattern and Compound Component Pattern
— Articulate the benefit of React and how React works under the hood.
Pay your dues and grind your foundation, treat it as your sledgehammer to break into the first door
Good to have
The list here is not necessarily crucial, but it would give you an edge when applying to a new team or a new job as a full-stack developer:
- Frontend/JavaScript testing — jest, chai, enzyme/react-testing-library (React specific)
- UI component tool — storybook
- End-to-end testing — Cypress or TestCafe
Cover your back(end)
If you have paid your dues in your current backend engineering work, you should have no problem in your backend domain knowledge.
Some interviewers will challenge your backend knowledge more than your frontend because this is where you should be more comfortable with, so make sure you are well-prepared.
I won’t go deep into how to prepare for the backend, but here are some reminders:
- design pattern, testing and OOP (if relevant)
- Error and exception handling
- CRUD and HTTP
- Security related topics (XSS, XSRF, Injection, authentication & authorization and etc.)
- Performance optimization and caching strategy
Test yourself with open-ended questions
Now, once you have gained sufficient exposure in frontend, test yourself with these open-ended questions. Try to tackle them from a full-stack perspective:
- How would you build an e-commerce website?
- Thin client & thick server VS thick client & thin server
- How would you optimize an application’s or feature’s load time
- Microservice vs Monolith architecture
Communication skills
One of the most underrated skills. This is purely my opinion, as a full-stack developer, you tend to work with more people as compared to other engineering roles.
Since you have an overarching understanding of the application end-to-end, you are likely to work closer with the stakeholders and PMs.
You will almost definitely be the burger patty between the frontend and backend engineers, so it is important to have empathy and understanding of both domains.
Additional Resources
Here are some resources, which I personally like, that might help you in your preparation:
Transitioning into a new role is scary, but don’t let the unknowns deter you. Set small goals and an achievable timeline, then you will be fine. Don’t wait for the perfect moment and just do it.
If you found this article helpful, do share it with your friends and give a few claps. Feel free to check out my other articles as well:
If you enjoy such stories, do consider becoming a medium member. It costs $5 per month and gives you unlimited access to Medium content. I’ll get a little commission if you sign up via link.
