The Future Of Frontend Frameworks

Frontend technologies have always been evolving and changing. From creating webpages based almost entirely on tables we moved to complex, responsive single-page applications.

JavaScript started to play more and more an important part across the years, handling basic functionality for the website at first, and becoming a crucial foundation as of today.

The past… up to now

Over the years, many tools were created which helped to speed up web development. From jQuery (it was used to build the first version of Gmail by the way), to Backbone (the first framework that allowed the creation of a single-page app), AngularJS (the first framework that provided two-way binding and real-time HTML markup updates) to Knockout, Meteor and finally, the ones that are being talked about over and over: React, Angular and VueJS. I bet discussions about those three happen to you on a daily basis.

Read also: Orchestration: the machines can do the work

The present and the future

Alright, let’s put forward some forecasts about the future of frontend frameworks. To smart guess, speculate and place our bets correctly, we’ll need some analysis of the current situation. There’s no future without the present (pretty sure I’m plagiarising Paulo Coelho now…). What do we have today then? Do you happen to be familiar with that drinking game, that one where you have to come up with a word that isn’t part of a name of any JavaScript tool/framework/lib? If it is, you drink. An example: I came up with the word “castle”, but… there is Castle.js in the npm repository: (https://www.npmjs.com/package/castle.js/v/1.0.11). So… I’ve lost already.

Don’t play this game. It’s dangerous.

Despite that, it does prove a point. There is plenty of JS stuff and there is much more if we extend to frontend stuff. Depending on your use case, you can find something suitable for you. Frameworks are an answer to developers’ needs that are often dictated by business needs. Those business needs are a response to what a user may need and how to make money fulfilling that. What also comes into play are the devices and the proportion of their usage. According to Statcounter.com, the usage of mobile devices has eclipsed and surpassed the desktop:

desktopvsmobqle

Even without a graph, based on daily observation, one prediction is easy: the future is mobile. Because of that, we will take a look at how to create a native app nowadays and how it may become even easier soon. But first… Let’s look at the hottest frameworks right now that try to meet our demands for creating a web application. Just for the record, here is the Google Trends filter used for this comparison:
google_trends

As you can see, React took the biggest part of the cake overtaking Angular around May 18′. Vue JS was speeding up fast, but slowed down a bit last year. It has more stars on GitHub than the others though. Angular, although still strong, is falling further and further behind React. But what they offer us right now and what in the near future?

Angular

angular

The one that is the most complex, sophisticated and difficult-to-learn compared to the other two. However, it does provide a whole platform to develop an app with. No additional libraries are needed for things like routing or global state management. It is based on Typescript (a big advantage) and made by Google. Perfect for big enterprise projects.
With Angular, the future looks bright and you can see it for yourself right now. In version 8.0 there is a new rendering engine available called Ivy and it can provide up to 40% less bundle size and that tackles the biggest Angular disadvantage. It will be integrated as default in Angular 9.0 but it is possible to switch it on in the current version. Ivy will provide faster build times and an open door to cool new features like higher order components and component lazy-loading.

React

react

Made by Facebook, perhaps it does not provide as many tools as Angular (we need some libraries to achieve the same level of functionality). However it is faster, lighter and easier to learn. React uses virtual DOM for DOM manipulation (Angular doesn’t do that). It is well supported and reliable. It has to be. It is used by Instagram, WhatsApp and Netflix (among many others).
2019 was a crucial year for React. The major changes were React Hooks, React.Lazy and Suspense. Some new, experimental features for the future are:

  • Concurrent Mode, which will allow an app to adjust to the user’s device and network speed by making the rendering interruptible. React in Concurrent Mode will be able to interrupt an ongoing update to do something more important, and then come back to what it was doing earlier.
  • Suspense for Data Fetching – we will be able start the rendering before fetching data finishes. It will suspend rendered component and proceed to the following ones and then come back again to check if the data is ready.

It is very possible that React will stay in first place in terms of popularity.

Vue

vue.js

Have you heard anyone complaining about Vue.js? Well, I haven’t. It is the most convenient framework, for both learning and usage. Gaining popularity and love from the open source community since the very beginning, Vue is the new and better AngularJS. Doing things similarly, but better in every way. It is not a coincidence. The creator of Vue, Evan You, did actually work on AngularJS. Vue.js is maintained by him and his team. It is an exception among the previously mentioned frameworks. They are both backed by huge companies. Vue is not. This may be perceived as a drawback, but for many – it isn’t. What about the future? In 2020 the new version will be released – Vue 3.0. It will be completely rewritten, based on Typescript and even more lightweight with API for creating observables. That’s huge. After the release, the Vue based repo count will go nowhere but up. There are several major changes scheduled for each of the top frameworks. The developer teams are not taking it easy. Looking at the tendencies right now, it is also noticeable that Typescript is going to be implemented more and more vastly, allowing developers to appreciate better code maintenance and control. There is a real possibility that soon, more projects will be with, rather than without Typescript (I didn’t mention it, but you can use it with React too). Another thing worth noting here is the browser support. Internet Explorer 11 support declines over time. As an example – it is announced that Vue.JS 3.0 will support IE11 but in a separate build with the same reactivity limitations of Vue 2.X. It won’t be a surprise to see many statements about ditching IE11 support entirely in various websites/web apps/tools. And that’s a good thing for developers. Focusing on new features is always more productive.

Svelte

svelte

Well yes, I didn’t put it on the graph. My prediction is that I’d have to if I were writing this in 2021. Svelte is not that new, although since version 3 it has gained a lot of popularity. It is a framework that provides reactive components, but the approach is different. SvelteJS, which runs at build time, relocates all the work into a compile step having itself about 4KB gzipped. You can write 40% less code comparing to React and have faster, reactive components without virtual DOM. It’s perfect for small applications (not much other functionality), but definitely worth testing out and keeping track of in the near future.

Mobile app development

As I mentioned earlier, the future is mobile. At the beginning, there wasn’t much choice in mobile app development. For Android we had to use Java and Android Studio and for iOS there was Swift or objective C and Xcode. Now we have a plenty of options. We could, for example, develop a Progressive Web App (PWA). It will work instantly after the user adds it to the device’s home screen. With a single code base from a framework like React or Angular you can access native features through Service Workers. What’s interesting – PWA made by Twitter was used longer with more content viewed since it was made a default mobile web experience. When you need an extra lightweight app which could run everywhere, whose performance is not so heavy and uses only basic native features, then this is the perfect solution for you. If not, there are also…

Hybrid Apps

Having the same, or sharing most of the code base, hybrid app frameworks are today’s answer to the question of how to develop an app for both Android and iOS. The answer is different depending on the approach. And there are quite a few approaches. Below, you can see some of the most popular:

Ionic

iconic

It was the first hybrid framework. Technology-wise it is quite close to PWAs because your app will be based on HTML/CSS/JS. The idea is quite simple – Ionic just wraps a web app made with Angular inside a native app giving it access to native features. It is not the best approach if we look at performance but quite fast nevertheless. The new version 4.0 will bring some key features like:

  • transition to being a universal framework for the web, iOS, Android and desktop
  • web components
  • React and VueJS support
  • performance improvements and a single code base for PWAs/apps/web apps/desktop thanks to transitioning from Cordova to Capacitor (cross-platform app runtimes)

Some predictions were made that Ionic will soon be redundant. Well, after this newest release, I don’t think so.

Flutter

flutter
The freshest one here, Flutter is relatively new and growing rapidly. Its setbacks are the Dart language Flutter is based on (you’ll have to learn it) and well… being new. These are relatively minor when set against big Google support (they are the authors) and functionality that allows developers to use lots of native widgets and pre-made components. More focused on Android at first, iOS support is catching up. Moreover, the Dart language will look very familiar to somebody who already knows JavaScript. It compiles to the native code of the chosen device. Also, contrary to React Native, all device functionalities are accessible via Flutter core plugins, not by community-made third party ones. Flutter looks very promising for the future and is a very interesting choice now. Especially considering the growing community and planned support for other platforms, like the web, macOS and Fuchsia.

React Native

react

This Facebook version of React offers many pre-build components to create your native app with. Then, the React Native toolchain will compile an app from them as a result. The ease of use contrasts here with some stuck moments that you may encounter using React Native. In some cases you’ll face the necessity of making some workarounds. Thankfully, you can turn to the community with a issues that you encounter – most often, there lies a solution. Many third-party packages are available, though not all of them can be compatible with the newest version of React Native or Android or iOS itself. Being aware of the situation will spare you some headaches. Fortunately, the React Native team and the community work hard to make developers lives easier. In 2019 many updates were released. The newest one, React Native Doctor is a tool made by the community to help with troubleshooting and fixing errors with the development environment. It even gives you links to what you’re missing. In 2020 React Native will be enriched by a new renderer (named Fabric) and the architecture is going to be rebuilt. It will be possible for JavaScript to affect the Native state synchronously (previously it was async). That will fix some issues and give developers more control over changes inside the app.

NativeScript

native_script

NativeScript is something similar to React Native. In this open-source framework, you can have native components markup alongside JavaScript. It is possible to use NativeScript with Angular, VueJS and plain JS. It also allows you to work with the latest native APIs. You won’t have to wait for plugins to begin support for a new feature. NativeScript apps can run on native devices directly. There’s no browser interaction or cross-compiling required. NS aims for a ratio of 90% common code between the iOS and Android platforms and the output result is a fully native app. Alongside core modules, you also have over 700 plugins to choose from. Some disadvantages of this framework? Well, the app size is bigger and performance slower than the previously mentioned React Native. The roadmap for the future presents us an ambitious approach from the NativeScript team. Their plan is to extend NS functionality to Android Auto and iOS CarPlay. Support of desktop apps is also planned and the longest shots consist of providing AR/VR app building blocks, wearables support and more.

The future

The future looks quite optimistic. Since ECMAScript 2015 (and even earlier) many tools were presented to the frontend world. Communities and companies are not stopping in pursuit of delivering solutions that meet developers’ needs. The most popular frameworks are being improved constantly. Some of them are on the verge of crucial changes during 2020, which will make them even more useful. There is a noticeable trend to create an application for many platforms with as much common codebase as possible. The “cross-platform” term will not only apply to the iOS/Android, but to web, desktop, wearable devices and more.

The future is… fluid?

Or full of freedom. Yes, I’m using some odd words here, but I’m not trying to sell you any stuff. These words match quite well to a bigger picture that I would like to present. Future frontend development will be more fluid because of versatility and a wide range of options. Being fluid, if it comes to being platform independent, having responsive design (from a watch to a monitor), great performance or even being language independent. JavaScript still will be there, but more often compiled from TypeScript, although… there is also WebAssembly, which can be output from a compilation from a low-level source language like C/C++. Heavy performing JavaScript applications are able to use WebAssembly functions and benefit from that. What it could offer the framework world is a new level of performance. On top of that, there are Web Workers, which introduce the potential of multi-threading to JavaScript without aid from WebAssembly.

Having all of this while devices become more powerful over time gives us (among other perks) virtual or augumented reality that becomes more interesting and popular than today or performance-demanding games for the web. I don’t know about you, but all those new (and improved existing) possibilities leave me quite excited about the future. And what could be more exciting than that? Well… taking a part, smaller or bigger, in building it together of course.

Read also: Social Media Tags Guide Part 4 – Debugging pages (Verifying problems with social media cards)

Let's make a great project together

Estimate project
Our website uses cookies. You can change the rules for their use or block cookies in the settings of your browser. More information can be found in the Privacy Policy. By continuing to use the website, you agree to the use of cookies.