Technical requirements for a front-end engineer in 2021.
Disclaimer: This article is based on my observation, opinion, and personal
Table of content
- Programming Language
- Frontend Framework
- CSS Frameworks
- Git and Git workflow
- UI Libraries
- Design Tools
- Static Site Generators
- SEO and Accessibility
- Progressive Web Apps (PWA)
- Other things you should know to level up your game
Back in the days, All you need to know as a front-end engineer is just HTML,
designs. However, Things have changed in the past few years and it's constantly
There're a lot of front-end frameworks React, Vue, Svelte, Redwood.js, just to
mention but a few, and also uncountable libraries that support us in building
standard applications and websites.
Speaking of programming languages, the first thing that comes to your mind is
You need to know Typescript in 2021 and only a few companies do not have
Typescript as a requirement. You might as well consider learning Web Assembly as
it's is becoming more and more popular.
Read more about web assembly.
The three most common Front-end frameworks are React,
Angular, and Vue, and they're going
to be around for a long time. The fight right now is between Facebook's React
and Vue. Vue currently has over
180k stars on Github while
React is at 165k stars, However, React has
over 10.4m weekly downloads while Vue is at 2.3m downloads per week. In
conclusion, React is more popular than Vue with about 80%.
You're going to need a CSS framework most of the time because of speed,
flexibility, and a shorter time to build an application.
There's a lot of CSS frameworks out there that suits your specific need, and the
first, oldest, and most popular on my list is Bootstrap.
Git and Git workflow.
I strongly recommend that you learn how git and git-flow commands as it is
widely used for version control and most importantly, It's going to save you
a*s most of the time. Here are some basic git commands you need to know:
Check out this cheat sheet for a comprehensive guide on how to use
UI Libraries (React and Vue).
This section is targeted towards React/Vue developers as I have remarkable
experience with these frameworks.
As a front-end engineer, You might want to rapidly build an application/website,
and writing CSS alone is time-consuming.
There're countless React UI libraries out there, Nevertheless, I would like to
mention a few that I've used and can comfortably use again and again.
- Nature UI: This library is focused on tailwindcss lovers because most of its customizations are done with tailwindcss and it also offers you the ability to style components with emotions CSS prop. I am the creator of this library BDW so check it out :).
- Material UI: This is by far the most popular UI Library out there with a lot of components to handle nearly everything you need to build your application. You must also note that customization can be tedious.
- Chakra UI: Chakra UI is another goto library for building react applications with speed and flexibility if you prefer to style your components with props.
- Ant Design: This is more of a slick and minimal design-focused UI library with a lot of components to handle nearly everything you need to build your application.
- Semantic UI: I have used Semantic UI in the past and must say that it is quite flexible and easy to get started with.
- Vuetify: Vuetify is another Google's material design standard library, same as Material UI but for Vuejs.
- Chakra UI Vue: This is just a Chakra UI library for building Vuejs applications.
- Vue Tailwind: As a tailwindcss lover, I am not going to skip this library, although it doesn't have a lot of components like the rest, the developers are constantly adding more components.
As a front-end engineer, Most people assume that you must be pretty good at
designing, Therefore, I would like to mention a few popular design tools I use
- Figma: This is the tool I use for almost all my designs. A few benefits of Figma is that it has a cross-platform desktop application for most operating systems and it is open source. The web version works the same as the desktop version.
- Adobe XD: Although I had the opportunity to try out Adobe XD, I couldn't continue to use it because of its compatibility with Linux Distros and I'm a Linux user. It is quite easy to use and I can say that It's no different from Figma.
Static Site Generators
Static sites have been the standard output of websites in the past because most
However, Things are no longer the case since the emerging of Front-end
frameworks like React, and Vue, therefore, the outputs are most likely to be
As a good front-end engineer, You should know how to use at least one of the
following Static Site generators.
Learn more about
Static Site Generator
SEO and Accessibility.
Most companies usually have a designated team for handling Search engine-related
things, However, I suggest that you learn how to write accessible and search
engine optimized code as it's going to be a huge plus to you and your company in
the long run.
React, Vue, or VanillaJS), API (server-side processes are abstracted and
prebuilt at deploy time). Find out more about JAMstack on
Most APIs are bundled with built-in validations, However, I recommend that you
add an extra validation on the client-side. This can reduce the number of
requests sent to the server, add an extra layer of security, and saves a
substantial amount of bandwidth when consuming an API with rate limiting.
Here are a few validation libraries I have used and I strongly recommend:
- React-hook-form (React-based): This is a Performant, flexible, and extensible form validation library.
- Formik (React-based): Formik is one of the most popular forms validation libraries.
You might as well try JSON schema for rapid development of forms with
Progressive Web Apps are cross-platform,
performant, hybrid applications with access to native modules. Here are a few
benefits of PWAs:
- Build once, run everywhere: This implies that your single code can run on the Web, Android, iOS, and Desktop, as native applications.
- Boosts performance.
- Tiny app size.
- Push notifications.
Building an application without tests is like solving a mathematical problem
without proof. You need to test for behaviors and states of components in your
application to determine that it is working as expected.
You should at least know how to use some of these testing libraries:
- Testing Library.
- Chai and Mocha.
Graphql has been dominating both in the server-side world
and the front-end world. It was first released in 2015 by Facebook to tackle
issues developers are facing.
Check out this comprehensive comparison between Graphql and Rest
Will Graphql replace REST?. I'd like to know your take on this.
Edit: If you're already using Graphql to build APIs, then I recommend you checkout Butter CMS. Here's a more recent comparison between graphql and Rest, with detailed examples https://buttercms.com/blog/graphql-vs-rest-api
Animation is one of the most effective tools that you have to use on your
website. The skillful use of animation on your website or blog can help to
increase your targeted traffic in ways that ordinary text-based content cannot
do for you.
Here are a few most popular animation libraries:
- Framer Motion (React-based)
- React Spring
- React transition group
- Animate on scroll (AOS)
- Scroll magic
Other things you should know to level up your game.
- Storybook js: This is an open-source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient. An alternative to Storybookjs is Bit.
- Add search functionality to your website or web app as it helps users to easily search and navigate through the contents of your app. Here are a few open-source search libraries I strongly recommend:
What do you think is missing in this article? Let me know in the comments.
Happy Codding 💻 🤓
Top comments (2)
Nice liste, thank you :)
I'm happy to help...