Front-end Engineer in 2021
Divine Hycenth6 min read
Published on March 06, 2021.
Last edited: March 06, 2021 by: Divine Hycenth
Technical requirements for a front-end engineer in 2021.#
Disclaimer: This article is based on my observation, opinion, and personal preference.
Table of content#
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%.
Survey from stateifjs.com
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 git-flow.
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 daily:
- 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#
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.
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 validations.
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:
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 https://blog.api.rakuten.net/graphql-vs-rest/.
Will Graphql replace REST?. I'd like to know your take on this.
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 💻 🤓