Front end development hasn't always gotten the respect it deserves compared to back end development.
Many engineers used to look down on JavaScript. But times have changed. Web applications are growing rapidly, mainly due to the development of open-source tools.
This development has moved us farther away from jQuery and has made almost every tech company use the latest JavaScript and tools like Eslint, Babel, and Webpack.
Nowadays, the front end is moving at a speed that makes it hard to follow.
This post is all about catching up with the directions of this development area in 2022. Perhaps you will find something for yourself in these trends.
Svelte is gaining popularity
Svelte is a relatively new tool, which in theory started much too late to be able to have a chance against React, Vue, and Angular. But it's steadily gaining popularity at an unprecedented pace.
In 2021, StackOverflow users announced it as the most loved front-end framework.
But Svelte is more than that. It is a compiler that builds an optimized front end.
Svelte is not imported into the application like other popular frameworks. Instead, code written in Svelte gets compiled into pure JavaScript. This allows Svelte to win in terms of speed against frameworks such as React or Vue.
Using the Svelte framework is very easy. Here is an example of how you'd use state + forms:
Using the framework is very easy. Here is an example of using state + forms.
<script>
let a = 1;
let b = 2;
</script>
<label>
<input type=number bind:value={a} min=0 max=10>
<input type=range bind:value={a} min=0 max=10>
</label>
<label>
<input type=number bind:value={b} min=0 max=10>
<input type=range bind:value={b} min=0 max=10>
</label>
<p>{a} + {b} = {a + b}</p>
Simple as that! Notice three things here:
- Forms are handled in a simple, elegant way, like in the old days, before the SPA frameworks. There is no need to attach onChange props to the inputs.
- Markup and logic lives side by side, encapsulating the logic and a visible layer.
- State is easy to manage.
No wonder the framework is gaining traction in the community. It is only a matter of time before new popular platforms are created in Svelte.
React, Vue, and Angular are here to stay
I started my adventure with the front end just before the premiere of Angular 2, about six years ago. I can’t count how many times since then I have read that Vue, React, or Angular is dying.
The truth has turned out to be quite different, though. Each of these three frameworks has grown in popularity since its inception.
Here is the chart (Source: Npm Trends). It is worth adding that every sudden drop on the chart is there because of December.
Take a look at the chart above. Notice that Angular has grown in popularity by a factor of over ten. React and Vue grew even faster. All three frameworks support pretty much the same use cases.
This means no matter which of the three frameworks you choose, you can expect it to be used and supported for years to come.
It’s worth noting that React didn't have any significant changes in 2021. Yet the pace of its adaptation is astounding. It is likely because of the ecosystem around the technology. React has the largest selection of libraries and supporting frameworks.
Two examples worth mentioning are Next and Gatsby. The latter is one of the perpetrators of the next trend.
Frameworks need to support both static and dynamic pages
Let's establish what static and dynamic pages are in practical terms.
Dynamic pages fetch and process the content when the user opens them. Static pages are pre-defined during the build time. They become separate, generated files on the disc. They can look just the same as dynamic, but the user's browser has less work to do.
If you have a shop, you can have a single dynamic product page, or thousands of static product pages, one for every product.
This means that static pages are more performant for users, but take a lot longer to build.
The reason for abandoning static pages was the popularization of the React and Vue type single-page application (SPA) frameworks. They also restored them to favour.
Dynamic content that SPA's typically generate is much slower than a ready-to-display one written in HTML. The difference is especially big when the page is fetching data from the server. A dynamic page would typically have to download and process such data.
This resulted in giving birth to static pages in SPAs. Gatsby tackled this problem by building a framework and infrastructure for static pages in React.
A website like a blog, portfolio, or even a course platform like freeCodeCamp will be much faster static. Even server-side rendering, as is usually the case with Next.js, does not guarantee better speed (Source: Sidney Alcantara).
Focus on time to first contentful paint results in a large number of solutions for generating static pages in other frameworks, such as Vue or Svelte.
On the other hand, static pages are hard to scale for millions of pages. If you are building an app with a lot of dynamic content like user profiles, you are probably better off using dynamic pages. Both ways of handling content are here to stay.
Platforms turn single developers into entire IT departments
Recent years have brought a flood of platforms that speed up front-end development. This is huge because it allows small teams to move fast.
You can easily implement video using Twilio or Agora.io. You can add authentication in no time using Firebase, Amazon Cognito or Okta (Okta also acquired Auth0).
Deploying front-end code automatically and globally is especially worth talking about. There are three go-to solutions: Vercel, Gatsby Cloud, and Netlify. They can turn one front-end developer with an GitHub account into the entire DevOps department in 5 minutes.
At the moment of writing, all three platforms offer a relatively similar average loading times (Sources: Netlify vs Vercel, Netlify vs Gatsby Cloud).
Gatsby Cloud is React only but makes working with countless static pages almost too easy. If you are building a Gatsby app, it's probably your best bet.
Vercel supports the major frameworks, including server-side ones, like the company founders' own framework, Next.js. If you are working on a server-side rendered app, Vercel will make your life a lot easier.
Netlify focuses on client side frameworks, like pure React and Vue. It offers a wide range of useful tools such as ready-to-use forms, authentication and serverless functions. I believe it is the best choice for the traditional, client side apps.
One underdog worth mentioning is Shuffle.dev. It can create a professional website layout randomly, in seconds. It has a relatively large selection of themes and CSS frameworks and adds new features and content on a weekly basis. At CodeAlly.io, we use it a lot to speed up prototyping.
Front end optimization is key
The front end has come full circle in recent years. Light sites turned into heavy platforms with long render times. Some people may still remember when Slack used the developer version of React (Source: Robert Pankowecki). The trend to make SPAs faster has been around for years but is still gaining momentum.
Libraries that negatively impact the performance, like Moment.js, are replaced by their lighter, performant counterparts such as Day.js. Others get refactored to reduce the bundle size. Examples include Material UI and Lodash.
Sentry, the market leader in error logging, only started working on bundle size optimization a few months ago. Throughout the front-end ecosystem, there is a growing emphasis on using lazy loading, rendering the front end on the server-side, or using CSS files instead of styling the application with JavaScript, as was the case with, for example, styled-components.
Tailwind has gained much popularity recently and, in 2022, it will surely remain popular. It handles reducing the application load time like almost no other CSS tool.
That being said, it has a steep learning curve. The Tailwind code is often hard to read.
I highly recommend trying Linaria too. Linaria combines the advantages of styled-components and the speed of using static CSS files. We have been using it for a while at CodeAlly.io and, the entire front-end team loves this library: https://github.com/callstack/linaria.
Example code in Linaria:
import { styled } from '@linaria/react';
import mainTheme from 'themes/mainThemeV2';
export const Wrapper = styled.div`
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
width: 30px;
max-height: 60px;
border-bottom: 1px solid ${mainTheme.colors.neutral300};
background-color: ${mainTheme.colors.primary300};
border-radius: 8px;
`;
Notice how you can use JavaScript in styles. It is also possible to reuse styles since they are regular JS constants. The code gets compiled into a CSS file during the build process.
This results in a combination of a great developer experience and a blazing-fast front-end.
Conclusion
When I was getting started, things were moving much slower. There is a lot of innovation happening and the front end is evolving fast.
If you want to work in the industry, you might want to check CodeAlly out. It's a platform I founded with friends where tech companies compete for programmers by inviting them for jobs.
New programmers with little to no experience also get to prove their skills with a built-in VSCode and Docker code challenges.
I hope this article was fun to read and you’ve found something valuable here. Until next time!