Technical requirements for a front-end engineer in 2021.
Disclaimer: This article is based on my observation, opinion, and personal
preference.
Table of content
- Programming Language
- Frontend Framework
- CSS Frameworks
- Git and Git workflow
- UI Libraries
- Design Tools
- Static Site Generators
- SEO and Accessibility
- JAMstack
- Progressive Web Apps (PWA)
- Testing
- Graphql
- Animations
- 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,
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"
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 initgit clonegit statusgit addgit commitgit pushgit pullgit 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:
- Jest.
- Testing Library.
- Enzyme.
- Chai and Mocha.
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.
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
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:
- Framer Motion (React-based)
- React Spring
- React transition group
- GSAP
- 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...
Thanks