5 Frontend Trends for 2020

5 Frontend Trends for 2020 (and predictions)

Tech Relations, who is a Swedish based Consultant Broker and who mostly appoint consultant developers in 3 days, will give you a summery of those 5 frontend trends we see coming in 2020.

Micro Front Ends — An Extension of Microservices

This is probably the newest matter in the front end in recent years. This year, it really gained traction.
An unopinionated prediction is that, for 2020, it will be embraced and used for more developers and companies. But what are micro-fronts?
The idea is simple. Avoid the continuing struggle with monolith front-end codebases. So, based on Cam Jackson, writer on the Martin Fowler blog, he defines it as:

“An architectural style where independently deliverable front-end applications are composed into a greater whole” — Cam Jackson-Martin Fowler

As you can see, this front-end architecture will continue getting traction because it helps and solves big problems in complex and modern applications, and organizational complex structures as well.

Front-End Frameworks — React.js the Most Loved

Just a few days ago, the State of JS 2019 survey was launched. You can find everything on their website. In the front-end frameworks section, the result of this gives the winner as React.js.

Stack Overflow, in its survey, also shows us how developers love React and the fact that they are thinking of continuing working with it and building beautiful, robust, scalable, and complex applications with it.
One remarkable thing I consider is that we should keep an eye on the fast-growing Svelte.js. In just one year, it has gained a lot of lovers, so much so that it is now so close to React.js.
This is a prominent tech to follow and learn about next year.

 Web Components

“Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps” — MDN

The idea behind web components is to work in an agnostic way. This means that they have the ability to work without a framework or with any framework standardization.

They provide you with a set of JavaScript APIs that allow you to define custom elements and behaviors. Additionally, Shadow DOM and HTML templates.

ES Modules and Dynamic Imports

ES Modules

Currently, most of the browsers already support the use of ES modules.
And, of course, Node.js couldn’t stay back and now fully supports ECMAScript modules as they are currently specified and provides limited interoperability between them and the existing module format, CommonJS.

ECMAScript modules are the official standard format to package JavaScript code for reuse. Modules are defined using a variety of import and export statements.

Dynamic imports

This feature solves a lot of headaches and waste of money related to the app’s performance.
It helps to, and allows to, load modules dynamically. In other words, on-demand by using promises or the async/await syntax. A shot of this would be:

import(“./math”).then(math => {
console.log(math.add(16, 26));
});

Really awesome, isn’t it?

JavaScript Will Be Unstoppable

This is obvious. JavaScript will continue its reign in 2020 due to all features and stuff we have seen above and because of the incoming features and releases as well.

Other approaches and features to watch are:

• Composing software.
• Functional programming.
• allSettled, optional chaining for JavaScript, Object.fromEntries().

Originally published on Medium

 

Please contact Tech Relations if you are a consultant or are looking for consultants in Stockholm. We have +2000 affiliated freelancers and hired IT-consultants and work with 12 customers.