The Future Of Frontend Frameworks27 January 2020
Frontend technologies have always been evolving and changing. From creating webpages based almost entirely on tables we moved to complex, responsive single-page applications.
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.
The present and the future
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:
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:
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?
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.
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.
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.
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…
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:
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.
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?
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.