Front-end Engineer in 2021

Front-end Engineer in 2021

Technical requirements for a front-end engineer in 2021.

Divine Hycenth's photo
Divine Hycenth
·

12 min read

Disclaimer: This article is based on my observation, opinion, and personal preference.

Table of content

Back in the days, All you need to know as a front-end engineer is just HTML, CSS, jQuery/Javascript, and probably, A tool like Adobe Illustrator to create designs. However, Things have changed in the past few years and it's constantly changing.

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.

Programming Language.

Speaking of programming languages, the first thing that comes to your mind is Javascript, and that's correct because it's the language of the web, However, 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.

Frontend Framework

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%.

Everyday, We are nearing Death, and a new Javascript framework. "Anonymous"

front-end frameworks in 2021

Survey from stateifjs.com


CSS Frameworks

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:

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

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.

React.

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.

Vue.js

  • 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.

Design Tools

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

Static sites have been the standard output of websites in the past because most websites comprised of HTML, CSS, and Javascript, which made them SEO-ready. 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 dynamic.

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.

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). Find out more about JAMstack on jamstack.wtf.

Client-side validation.

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.
  • Yup: This is a JavaScript schema builder for value parsing and validation.

You might as well try JSON schema for rapid development of forms with validations.

PWA

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.

Testing

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 🔥

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.

Animations

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:

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 💻 🤓

frontendtechnologyguideJavaScript