loading...
Cover image for 10 Things Front-End Developers Should Learn in 2021

10 Things Front-End Developers Should Learn in 2021

simonholdorf profile image Simon Holdorf Originally published at thesmartcoder.dev ・8 min read

There's no doubt that front-end development will be one of the hottest disciplines in tech in 2021.

It was previously sufficient for developers in the front-end space to know some HTML, CSS, and maybe jQuery to create interactive websites, but today they're faced with a broad and constantly changing ecosystem of skills to develop; tools, libraries, and frameworks to master; and a need to constantly invest in personal education.

The last couple of years brought us awesome new libraries and frameworks, like ReactJS, VueJS, and Svelte, utilizing JavaScript to power major web applications.
This piece aims to give you some guidance on what you should focus on in 2020 as a front-end developer to level up your game, whether you're just starting with programming or already have some experience.


1. Frameworks

In 2021, we'll probably see a duel between Facebook's ReactJS and the community-driven VueJS. React currently has 159,000 stars on GitHub, while Vue has been starred even more - 175,000 stars. Angular, for example, has only 67,500 stars.
The search volume in 2019 for React (blue line), Vue (red line), Angular (yellow line), and Svelte (green line) supports this assumption - with Vue being slightly above React. Angular cannot keep up in terms of search volume, and Svelte plays absolutely no role in this comparison.

Framekwork Comparison

So for 2021, front-end developers working with or wanting to work with JavaScript frameworks should focus on React and Vue as their primary choices. Angular is a valid option if you're working on large enterprise projects.

If you want to learn more about these frameworks, check out these great resources:
React
Vue.js


2. Static Site Generators

Static site generators combine both the power of server-side rendering (very important for SEO but also initial load time) and single-page applications.
Many projects these days choose an SSG even if they don't need server-side rendering because solutions like Next or Nuxt come with handy features, such as markdown support, module bundlers, integrated test runners, etc.

If you're serious about front-end development, you should take a close look into the following projects, and try to get some hands-on experience on them:

  • Next (React-based)
  • Nuxt (Vue-based)
  • Gatsby (React-based)
  • Gridsome (Vue-based)

These will probably be the hottest ones in 2020, though there are more out there. Check out these resources if you want to learn more about them:
Next.js
Nuxt.js
Gatsby
Gridsome


3. JAMstack

The term JAMstack stands for JavaScript (running on the client - for example, React, Vue, or VanillaJS), API (server-side processes are abstracted and accessed over HTTPS via JavaScript), and markup (templated markup that's prebuilt at deploy time).

It's a way of building websites and apps for better performance - lower scaling costs, providing higher security, and offering a better developer experience.

While these terms are nothing new on their own, they all have the same thing in common - they don't depend on a web server. So a monolithic app that relies on a Ruby or Node.js back end or a site built with a server-side CMS like Drupal or WordPress isn't built with the JAMstack.

There are some best practices if you want to work with the JAMstack:

Entire project served on a CDN

Because no server is needed, the whole project can be served from a CDN, unlocking speed and performance that can't be beaten.

Everything lives in Git

Everyone should be able to clone the whole project from a Git repo without the need for a database or a complex setup.

Automated builds

You can automate builds perfectly because all of the markup is prebuilt - for example, with webhooks or cloud services.

Atomic deploys

In order to avoid inconsistent states by redeploying hundreds or thousands of files in large projects, atomic deploys wait for all files to be uploaded before changes go live.

Instant cache invalidation

When a site goes live, you must make sure your CDN can handle instant cache purges for changes to become visible.

Well-known hosters, like Netlify or Vercel, support JAMstack applications, and large corporations use them to deliver great experiences to their users.

It's definitely something you want to get your head around as a front-end developer in 2021. If you want to learn more about JAMstacks, here are some great resources:

JAMstack
JAMstack WTF
"New to JAMstack? Everything You Need to Know to Get Started"


4. PWA

Progressive web apps (PWA) will definitely be a thing in 2021. More and more companies are choosing PWAs over native apps to offer rich mobile experiences to their users.

PWAs are reliable (instant loading, work without internet connection), fast (smooth animations, quick responses to user interaction), and engaging (native-app feeling, great user experience).

They make use of service workers for offline functionality and a web-app manifest file for a full-screen experience.

Reasons for building a progressive web app are, for example:

  • Can be added to a user's home screen from the browser
  • Work even if there isn't an internet connection
  • Support web push notifications for enhanced user engagement
  • Make use of Google's Lighthouse features

If you want to learn more about PWAs, feel free to check out these additional resources:

Progressive Web Apps
"Your First Progressive Web App"


5. GraphQL

One of the hottest topics right now and definitely a thing for you to learn or improve on in 2021 is GraphQL.

While REST has long been considered the de facto standard for designing web APIs by offering great concepts like stateless servers, RESTful APIs are more and more considered inflexible when it comes to keeping up with the rapidly changing clients accessing them.

GraphQL was developed by Facebook to tackle the exact issues developers are facing when dealing with Restful APIs.

With REST APIs, developers would gather data by fetching it from multiple endpoints that have been created with a specific purpose - like, for example, a /users/_id endpoint or a /tours/_id/location endpoint.

Using GraphQL, this would work differently. Developers would send a query to a GraphQL server with their data requirements. The server would then return a JSON object with all the corresponding data.

Another benefit of using GraphQL is it uses a strong type system. Everything on the GraphQL server is defined via a schema using the GraphQL schema definition language (SDL). Once the schema has been created, both front-end and back-end developers can work quite independently from one another because they're aware of the defined data structure.

If you want to learn more about GraphQL, check out these great resources:

GraphQL
How to GraphQL
"Getting Started with GraphQL Content API"
"GraphQL: A data query language"


6. Code Editors/IDEs

Just like in 2020, Microsoft's VS Code will be the number one editor for most front-end engineers in 2021.

It offers almost IDE-like features, like code completion and highlighting, and can be extended almost infinitely via its extension marketplace.

The marketplace, in particular, is what makes VS Code so awesome. Here are some great extensions for you as a front-end developer:

  • JavaScript (ES6) code snippets
  • npm
  • Prettier
  • CSS Peek
  • Vetur
  • ESLint
  • Live Sass Compiler
  • Debugger for Chrome
  • Live Server
  • Beautify

These are some pretty cool examples. There's much more to discover in VS Code, so I encourage you to try out it if you aren't already using it.


7. Testing

No untested code should find it's way to production.

While it might seem convenient to not have any tests in your personal projects, it's mandatory to have them when working in commercial and enterprise environments. So it's better for any developer to integrate tests in the development workflow whenever possible.

One can differentiate between test cases like:

Unit tests
Testing a single component or function in isolation.

Integration tests
Testing interactions between components.

End-to-end test
Testing full-blown user flows in the browser.

There are more ways of testing, such as manual testing, snapshot testing, etc. If you want to move to a senior developer position or aim for a job with a large corporation that has some development standards, you should try to work on your testing skills.


8. Clean Code

Being able to write clean code is a great skill and is in high demand by many organizations. If you want to step up from a developer position to a senior developer position, you should really learn the concepts of clean code.

Clean code should be elegant and pleasing to read. It should be focused, and you should take care of it. All tests are run in clean code. They shouldn't contain duplications, and the use of entities, such as classes, methods, and functions, should be minimized.

Some things a clean-code developer should do are:

  • Create meaningful names for variables, classes, methods, and functions
  • Functions should be small and have as few arguments as possible
  • Comments shouldn't be required at all - the code should speak for itself

If you want to learn more about clean coding check, out the books and posts from Robert C. Martin.


9. Git

Git is without doubt, the standard for version control in web development these days. It's really important for every front-end engineer to know basic Git concepts and workflows to work effectively in teams of all sizes.

Here are some popular Git commands you should know:

  • git config
  • git init
  • git clone
  • git status
  • git add
  • git commit
  • git push
  • git pull
  • git branch

While it's always good to know these commands for increasing your productivity, front-end engineers should also learn the fundamental concepts behind Git. Here are some resources for you:

"Explaining the Basic Concepts of Git and How to Use GitHub"
"How To Use GitHub - Developers Collaboration Using GitHub"
GitHub


10. Soft Skills

Often overlooked but really, really important for developers is the acquisition of soft skills.

While it helps to understand the technical side of things, it's equally important to know how to communicate in a team. If you're serious about a career in tech and/or plan to move to a senior position, you should work on the following soft skills:

  • Empathy
  • Communication
  • Teamwork
  • Approachability and helpfulness
  • Patience
  • Open-mindedness
  • Problem-solving
  • Accountability
  • Creativity
  • Time management

Always remember: The most important deliverable for a senior developer is more senior developers.


Conclusion

In this article, I showed you 10 important things front-end developers should try to learn, improve, or master in 2021.
This list isn't trying to be complete, but I hope it gives you some inspiration for the next year - the choice is all yours!

I recently started a new blog The Smart Coder where I create free content for the community. This article is from there, you should check it out :)

If you like what I write and want to support me and my work, please follow me on Twitter to learn more about programming, making, writing & careers🥰

Discussion

pic
Editor guide
Collapse
tobiastimm profile image
Tobias Timm

IMO people should also invest more time to deep dive into JavaScript itself.

Collapse
simonholdorf profile image
Simon Holdorf Author

Well, this discussion is probably as old as the language itself. 50% say you should learn the basics first, the other half finds it okay to start with what benefits you most. For me personally, I would go with how I learn best.

Collapse
tobiastimm profile image
Tobias Timm

Yeah, you are right, but I think it is always a good thing to point out because frameworks will be replaced by other frameworks. The core of the language most probably not.

Thread Thread
simonholdorf profile image
Simon Holdorf Author

Yeah, I totally agree with that. It's always good to stay relevant by learning the fundamentals!

Collapse
tyrionfront profile image
Ruslan

Smthng like "silver bullet" is learning basics during learning JS - all the S.I.C.P. concepts are able to be realized on JavaScript according to it's current functionality.

Thread Thread
ogrotten profile image
ogrotten

Is this the SICP of which you speak?

source-academy.github.io/sicp/

Thread Thread
tyrionfront profile image
Ruslan

UPD:
Yes. Talking about the conceptual idea- that is just exactly what I mean.
This link is the source and proof of my prev. sentence:
ru.hexlet.io/tracks/sicp-on-js

Thread Thread
stereobooster profile image
stereobooster

Except that JS doesn't have tail call optimization.

Thread Thread
tyrionfront profile image
Ruslan

Not long time ago JS didn't have many of current features so I suppose that solving the issue U R talking about is just a matter of time.

Thread Thread
sylwiavargas profile image
Sylwia Vargas

I definitely agree with you @tyrionfront that when learning to code (frontend or backend), it's super-important to learn basics of sicp. For me, only when I started learning about the basics of cs, JS started making sense, really. While I do understand that if e.g. you want to be a front-end programmer, maybe you don't need to be fluent with data structures, it definitely helps to understand them, even on the basic level!

tobiastimm profile image
Tobias Timm

Thats not 100% true. Safari / WebKit has proper tail call optimization

Collapse
codefinity profile image
Manav Misra

With strong core JS skills, we are not being limited by 1 language and just seeing 'magic.' We have some 'under the hood' understanding to be flexible and bounce between a couple of frameworks at a time.

Collapse
andrewi16 profile image
Andrew Irwin

udemy.com/course/understand-javasc...

Amazing course, to get a deep dive in Javascript.
teaches you from scratch about the basics, then brings you right through
to more advanced stuff. Giving you a really good overall understanding.
Short course as well only 12 hours.
Highly recommend.

Collapse
unsignedmind profile image
unsignedmind

Depends on where you are going. Personally I learned Angular before really getting into JS. Of course I was curious and took some courses afterwards, but you not necessarrily need much JS knowledge when developing with Angular. On the other hand when going with react for example I would definitly recommend having a good base in JS because React is much closer to Vanilla.

Collapse
dsaw profile image
Devesh Sawant

Yes, there are gotchas and concepts in Javascript that need to be learnt and go a long way in development. One thorough tutorial I recommend is github.com/getify/You-Dont-Know-JS!

Collapse
simonholdorf profile image
Simon Holdorf Author

Very good books, thanks for sharing!

Collapse
simonholdorf profile image
Simon Holdorf Author

So what are you going to learn in 2021? I am going for soft skills because I find them highly important!

Collapse
unsignedmind profile image
unsignedmind

More Angular :D but that's work. I thought about to get back to SQL a bit and try around with Prisma. Besides that expand skills on design templates. Oh yes and a portfolio :D

Collapse
simonholdorf profile image
Simon Holdorf Author

Sounds like a plan, all the best my friend!

Collapse
csaltos profile image
Carlos Saltos

Great article !! ... thanks for sharing.

It looks pretty new and exciting but the part about the traditional clean code it's kind of old by now ... better give it a check to the WET approach at deconstructconf.com/2019/dan-abram...

By the way, all these new challenges sound a perfect case for using Svelte with JAMStack and PWA apps.

Collapse
simonholdorf profile image
Simon Holdorf Author

Thanks for sharing Carlos, very interesting and a good point!

Collapse
danytulumidis profile image
Dany Tulumidis

Great Post! I would add that its very important to learn the fundamentals of a section (for example Javascript). If you are good in JS you can easily pick up any JS Framework.
Fundamentals gives you the skills to learn new frameworks and technologies very fast because you know how it works you just need to learn a bit of syntax etc.

Just my 2 cents :)

Collapse
nikitakolik profile image
nikita

Thanks for your posting a good article. I'm very impressed with your article especially in 'soft skills', you said "The most important deliverable for a senior developer is more senior developers". It's really impressive.

Collapse
simonholdorf profile image
Simon Holdorf Author

Thanks, Nikita, glad you like it!

Collapse
micahlt profile image
Micah Lindley

Awesome article! That's an interesting comparison between React, Vue, and Angular - know I know what I'll be learning this year! I'd like to point out that you mentioned ZEIT earlier in the article. It's actually been rebranded as Vercel. 😄

Collapse
simonholdorf profile image
Simon Holdorf Author

Yeah gonna correct this, thanks for pointing it out. I don't know why I still call it ZEIT, maybe it sticks better than Vercel in my head.....

Collapse
unsignedmind profile image
unsignedmind

Good article. Especially the soft skills! I want to hightlight empathy, patience and open-mindedness for bigger project teams :)

Collapse
simonholdorf profile image
Simon Holdorf Author

Thanks for the comment! Yeah, soft skills are very important!

Collapse
jlizanab profile image
José Lizana

my_self ~ $ npm install -g softSkills

Collapse
simonholdorf profile image
Simon Holdorf Author

If only it was so easy :D great comment!

Collapse
ije profile image
X.

thanks for sharing! i'm creator of Aleph.js (a React framework in Deno, inspired by Next.js). i'm wondering are you interested in Deno in 2021?

Collapse
simonholdorf profile image
Simon Holdorf Author

Hey, thanks for the comment, I'm interested but not yet convinced of Deno. Gonna look into your framework for sure!

Collapse
ije profile image
X.

cool, thanks

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe

Good to know that clean code and soft skills are included! Would like to add this article to my weekly dev newsletter. :)

Collapse
simonholdorf profile image
Simon Holdorf Author

Sure, go ahead, my friend :)

Collapse
marchofprogress profile image
Erik O.

Angular is not bad at all, and people should care less about github stars than they do. Actually it is the most popular framework in my country. Good writing anyway.

Collapse
simonholdorf profile image
Simon Holdorf Author

Angular is cool, but I still miss the "old angular". Guess that's the reason I love Vue so much...But hey, you are right, do what you like and what helps your career and don't care for the stars too much!

Collapse
kamiquasi profile image
Luke

A little self-promotion, but for those wanting to improve their patience: dev.to/kamiquasi/5-practical-activ...

Collapse
6lack6ix profile image
Chinweike David

Awesome content ✌🏿.... Keep the good work up

Collapse
simonholdorf profile image
Simon Holdorf Author

Thanks for the warm words, my friend!

Collapse
shnmkhk profile image
Shanmukha Katuri

Well written article articulating the essentials for a typical web developer or a full stack developer

Collapse
simonholdorf profile image
Simon Holdorf Author

Thanks, myfriend!

Collapse
v6 profile image
🦄N B🛡

Maybe they could learn Product Management, too.

Collapse
simonholdorf profile image
Simon Holdorf Author

Yeah, why not if it helps their career or is of interest for them...

Collapse
rpostulart profile image
rpostulart

Nice blog!

Collapse
simonholdorf profile image
Collapse
raddythebrand profile image
Raddy

Great article!

Collapse
simonholdorf profile image
Simon Holdorf Author

Thank you, Raddy!

Collapse
ogrotten profile image
ogrotten

Interesting and helpful. Thanks for posting.

Collapse
simonholdorf profile image
Simon Holdorf Author

Glad you like it!

Collapse
peterwitham profile image
Peter Witham

Great list, thanks for sharing.

Collapse
simonholdorf profile image
Simon Holdorf Author

Thanks, Peter, glad you like it!

Collapse
nialljoemaher profile image
Niall Maher

Fantastic article! Well done ❤️

Collapse
simonholdorf profile image
Simon Holdorf Author

Thanks, my friend!

Collapse
pixelgoo profile image
Anton Melnyk

Computer science basics, not another framework.

Collapse
atulcodex profile image
Collapse
fadeluck profile image
Fadly Setiawan

I heard a lot about 'Proactive' as well, seems that would be a thing in terms of soft skills stuff

Collapse
simonholdorf profile image
Simon Holdorf Author

Yeah that's definitely a good approach in many situations

Collapse
bharti5698 profile image
Bharti5698

Great article !!

Collapse
simonholdorf profile image