A Practical Guide To Become a Senior Frontend Developer

There are several different definitions for the title ‘Senior’ and it changes from one company to another. Yet, it’s agreed upon that there are are a lot of both hard and soft skills required. Chris Coyier wrote an article about character traits and behaviors that a senior frontend developer should have that gives a nice overall picture. In this article, we will cover 12 things you can do to make the best out of these times so that when they are over, you can become a senior frontend developer.

Photo by Ruffa Jane Reyes on Unsplash

1. Master The Fundamentals

Senior frontend developers should be very comfortable articulating HTML, JS, and CSS. Additionally, they should have basic concepts about how the internet works including browsers, networks, and servers. This means that concepts like prototypes, event bubbling, call stack, promises, ES6 are no foreign to you. The same applies to CSS, animations, grid systems, naming conventions, and specificity. There are numerous concepts to learn, below you can find some resources that you can skim and look for things you don’t know about, yet. CSS Reference, Html Reference, Javascript Fundamentals, Frontend Handbook.

2. Get Started By Reading The Documentation

Most developers are curious and want to jump straight to writing code and experimenting with it. That’s all good and fun but it’s not the most efficient way to go about mastering a framework or tools. Reading the documentation is going to help you save time smashing your keyboard trying to figure out how a feature works. It will also spare you from re-implementing existing features that you didn’t know about. Make sure you read the whole documentation as it is your guide to understanding the ins and outs of the framework. Most of your questions are answered in the docs. If they are not, then you get to contribute to the framework and help others, win-win.

3. Understand The Build Process

Most frameworks provide you with out of the box build process through a CLI such as angular-cli or create-react-app. You should know what is happening behind the scenes in order to modify and tweak your build process as your application develops. Start with understanding the essential concepts such as transpiring, bundling, minifying and packaging. Afterward, you can move into the ‘nice-to-have’ like linters, hot-reloaders, and git hooks. Once you feel confident in your understanding, bring the pieces together by choosing one of the popular bundlers (webpack/parcel) and start building your first application from scratch.

4. Read The Style Guide

Antipatterns and pitfalls are more common than you think, you can learn from other people’s mistakes and avoid wasting yourself and the company lots of valuable time. The style guide contains lots of helpful best practices that help you understand the framework even further and have a consistent coding style along with your teammates. You can also enforce these using linters such as vue-eslint-plugin.

5. Get Hold of The Devtools

Debugging is one of the most valuable tools you have in your toolbox. Developers often read more code than they write and therefore it’s very important to be able to debug code quickly. Using the dev-tools browser extensions, you can view and change the components state and props, track custom events, observe route changes, locate your component in the DOM, and do much more. Mastering the dev tools will massively increase your productivity over common debugging methods like console.log or debugger.

6. Grasp Reactivity

React and Vue both heavily rely on reactivity systems. Grasping these mental models allow you to understand how the framework is built so you can optimize your usage. In your journey, you will realize how frameworks listen to state changes and update your DOM automatically. You will also learn about virtual dom and untangle the confusion with shadow dom. Moreover, you will get a deep introduction to declarative programming and how it compares imperative programming which will yield in a great shift in how your write code. There is an amazing course on Frontend Masters by Evan You where he explains the reactivity system of Vuejs from the ground up.

7. Find Out Different Component Patterns

Components are the fundamental units of modern frontend systems. The ability to design and architect several components can have a huge impact on the long term on your project’s maintainability. Equipping yourself with different methodologies and patterns will allow you to scale up your application and introduce new features at ease. Check out these two articles Advance Vuejs Component Patterns and Advanced React Component Patterns for an in-depth explanation.

8. Write Composable Code

Code composition is one of the attributes of well-designed software systems. Leveraging code composition you will be able to reuse existing code, and come up with bigger composable pieces and hence avoid having too many components. Almost all communities have established a set of patterns to compose your code such as react-hooks or in the vue world, the vue-composition API, and mixins. Look in your codebase and search for potential use-cases to experiment with these patterns and see if it improves your codebase.

9. Optimize Components Communication

In modern frontend systems, a component-based strategy is often followed, where every component has a specific behavior and responsibility. This often results in having tens or even hundreds of components, and of course, component communication becomes an interesting topic that needs to be tackled elegantly. Several strategies emerged to help in providing solutions such as the flux pattern, event emissions or callbacks and props.

10. Cover Your Code With Automated Tests

This is hands down one of the most challenging tasks in front-end development yet most teams, unfortunately, are not doing enough automated testing on the frontend. Having different browsers and screen sizes to supports, lots of the heavy lifting being moved to the fronted makes it crucial to have automated tests in place if you want to maintain your product quality. Explore unit tests, snapshot tests, and end to end tests.

10. Get Out Of Your Comfort Zone

At some point, with enough practice, you will feel confident enough in your framework of choice. This is the point where you should jump ships and explore another framework. Getting out of your comfort zone will allow you to have an objective view on the differences between frameworks and understand that the whole framework wars are pointless. You will also be able to transfer some concepts over and your ability to jump from one framework to another will skyrocket. So go ahead and learn new frameworks be it React, Angular, Vue or Stencil there are tons of them I’m sure you will find one you like.

11. Go Beyond

I believe that most likely if you reached this point you will be acing most of the tasks that get into your way. Nevertheless, the world of frontend has no ends. Go and explore topics such as server-side rendering, Jamstack, accessibility, mobile applications, desktop application, service workers, algorithms, functional programming.

12. Remember To Have Fun

Programming can be fun and enjoyable, if you are always writing code you might lose this feeling so I recommend that you start a side project with no financial benefits, no learning purpose, just for fun. Building something you want to use, experiment with technology, do the things you always wanted to do and never had time for. Thanks for reading, I hope that you use this quarantine as an opportunity to grow and learn more. Be Safe and enjoy your stay at home.