Becoming a better frontend developer in 3 steps
Tags: codenewbie, webdev, career
Published: 2020-04-20 11:29:24

---
title: Becoming a better frontend developer in 3 steps
description: Clean coding principles
canonical_url: https://blog.alexandrudanpop.dev/posts/becoming-a-better-fe-developer-in-3-steps-2khn/
---

## Hello developers
While this is not an exhaustive list, I tend to think that following this advice will help you greatly :rocket:. So let's see what you can do:

## Step 1- Invest a bit in knowing how backends work
Most of the time, you will work in a team and interact with backend engineers. In order to communicate effectively with them, you need to have a common language. 

So it helps a lot if you already have at least some basic knowledge of how backends work. Things like setting up a **Web API**, communicating with databases, versioning, caching, etc. 

{% youtube _7rT-ixivWU %}

When new features are developed, I think you should be involved in designing how a new REST API or a GraphQL schema should look like. Take part in deciding the communication model or the DTO between your backend API and the client application you are building.

It's important to have some basic understanding of different styles of **architectural patterns** like layered architecture, onion, CQRS, microservices.

## Step 2 - Invest in fundamentals instead of learning shiny new things
Having a very vibrant frontend ecosystem, it's easy to spend all day long finding out new cools ways of doing various things. The problem is that this will stand in your way of becoming a great engineer. 

Learn **Javascript, HTML & CSS** before you learn React, Vue or Svelte. Learn interacting with HTTP API's before you learn GraphQL. When you pick a web framework stick to it, don't needlessly jump from one to another, become very skilled in one of them.

You can follow this diagram to see where you stand and decide what you should learn next:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/x1qqh8rjqszz4fibunn1.png)
<a href="https://roadmap.sh/frontend" target="_blank">Image stolen from here</a>

While this list can look cumbersome, don't get discouraged... Good developers know fundamentals very well and add a few things on top of that.

## Step 3 - Learn clean coding principles
This will help you thrive in any project :heavy_check_mark:. Clean coding principles apply to any code you write - so it's not language-specific. Some **clean coding techniques**: 
* KISS (keep it simple stupid) 
* DRY (don't repeat yourself) 
* YAGNI (You Aren't Gonna Need It)
* Readability & consistency
* Favoring Composition over inheritance
{% youtube wfMtDGfHWpA %}

And there are some more language-specific ones, like for **Javascript** favoring:
* pure functions
* immutability
* declarative programming
* avoiding globals
* use toolings like type-checkers and linters
* write automated tests
* build on the shoulders of giants - use open source libraries or frameworks instead of building or re-inventing things that are already out there

## In the end
Let me know what you think in the comments section!

If you like this post follow me on [Twitter](https://twitter.com/alexandrudanpop) where I post more cool stuff about React and other awesome technologies. :fire::fire::fire: