The Future of JavaScript in the Front End World

Rangle.io
9 min readAug 28, 2018

By Mandy Bitar

If you’ve been involved in front end development over the past few years, you know that there’s more than enough to give someone ‘analysis paralysis’. New frameworks and libraries are popping up every so often. Companies all over the world are facing the daunting task of choosing the right stack for their digital implementation. That’s a big challenge, in addition to working hard to keep up with the latest trends at the same time.

Even for some devoted front end developers, there comes a time when tech stack becomes a personal choice. This can take precedence over the tech selection being the right or wrong method to solve the problems.

As the race continues to come up with the fastest, highest performing and easiest framework or library, one only wonders: when will the JavaScript world consolidate into a few mainstream stacks? What does the future of JavaScript look like? And how will AI contribute its share to this technology?

JavaScript Background & Prevalence

Since its inception in 1995, JavaScript has been growing into the most popular, dominant language of the web. Over the last decade, the adoption of JS has only been growing, showing no signs of slowing down.

According to StackOverflow’s annual survey, 69.8% of respondents and 71.5% of professional developers are using JavaScript today. With the prevalence of more web-enabled devices, the race to come up with the best ‘one size fits all solution’ grows bigger. This is great news for developers who either know JS or are planning to learn it. For those that are far from the front end world, suggestions are for them to try and gain (even basic) experience with it. This quote sums it up perfectly:

“This [JavaScript] is perhaps the hottest skill developers need to up-skill in for the foreseeable future”

Frameworks & Web Components — The Foreseeable Future

After the framework wars of the last decade, ‘The Big Three’, as some like to call them, are leading the way to a more stable and defined future. React, Vue, and Angular are by far the most prominent frameworks and libraries of JavaScript used today. In this article, I’ll go about sorting them in the order of prevalence and promise that they keep on leading in the future.

React

Built and backed by Facebook, React is a favorite amongst developers for building and maintaining products, whether a quick POC or large enterprise software. It’s currently used by many leading companies like Instagram, Netflix, Walmart, Whatsapp, and more. React’s benefits include its component-based architecture, Virtual DOM for great performance, super fast learning curve, and popularity amongst developers with a huge community of support.

Vue

Created by Evan You and adopted by Alibaba, Vue is becoming a fast favorite amongst those who discover it. The reason is, Vue was initially designed to help designers who had little programming experience. The goal was to help them focus on creating functional interfaces rather than worry about coding itself. This made it very easy to learn with a minimal entrance threshold. Moreover, Evan, a former Google employee, observed things that were cumbersome or could be improved in Angular and applied them to Vue. He did the same when React was released and was able to come up with a medium that has now become one of the most promising frameworks to learn and adopt. In addition, Vue.js supports declarative rendering, asynchronous DOM updates, two-way data binding, strict adherence to web component specifications, and simple integration with HTML templates.

Angular

Built and backed by Google and used by Youtube, Paypal, Google Maps, etc. Angular has been a top choice for enterprise implementations thus far. Its latest release, Angular 6, brought forward two main highlights. A promise with its Ivy renderer to speed up the rendering in the application and Angular elements which allows the use of Angular components outside of Angular, such as in Vue or React. Using the Elements Package, you can create Angular components and publish them as Web Components, which can then be used in any HTML page. For those coming from an OOP background or Java background, Angular is easier to ramp up on and learn.

Alongside Frameworks, we have recently seen a rise of web components, but what are they and why do they matter?

From a community suffering from frameworks fatigue, Web Components are the next biggest thing getting traction since HTML5. But what are they? ‘Web Components are a powerful new W3C Standard that’s already been agreed upon by all the major browsers and can be used today in our apps (with a polyfill). It’s an addition to the DOM that has the ability to turn the web into small, reusable and modular components, untied to any framework, but purely built with HTML, CSS, and JS’.

Web Components have small bundle sizes eliminating the need to ship a custom component implementation. They’re praised for their re-usability. Because web components are built into and supported natively in the browser they can be used anywhere, in any framework or with no framework at all. Finally, they are loved for their simplicity. There is no need to learn a certain framework if you don’t want to. If you already know basic JS and the basic DOM APIs, then you can interact with a web component.

Ionic/Stencil

Ionic is a powerful framework-agnostic library for building mobile and progressive web apps that have direct access to native device features. And with the latest Ionic 4 release, the introduction of Stencil will not only make it more powerful and performant by allowing developers to use it outside of Angular. How? Stencil is a web component compiler that builds modern web components that are fast and small. By creating our UI components with Web Components instead of Framework specific components like React or Angular we can reuse these components in any framework that supports them or all on their own.

Polymer

Polymer is a JS library developed by Google and used by Google Earth and Youtube. It uses web components to build web applications and provides the ability to compose enclosed JS, CSS, and HTML as custom elements while leveraging the browser’s native technologies rather than relying on JS libraries.

However, Polymer hasn’t reached maturity yet and presents a few challenges. First, since it produces DOM, then any interactions or DOM manipulation will be in basic JavaScript, which adds more boilerplate code, making the organizing and the managing of a larger application more challenging. A reason why React and other libraries came about. Second, Polymer created placeholders for variables in strings to improve performance and solve the problem of converting data to a string just to convert it back into an object. But by using these placeholders, you have tied your application explicitly to Polymer because the placeholder is not in the Web Component spec. The last couple of challenges are: downloading of entire library and Polyfills, and a lack of server-side rendering.

How will AI transform Front End Development — Far (or maybe not) into the Future

Beyond libraries and frameworks, how will AI and machine learning shape the future of front end development? It’s a question asked by many, but a few companies are already leading the charge. They’re using different techniques in hopes of disrupting a field that has gone through different cycles of frameworks and libraries. The approaches are divided into two.

One side aims at assisting developers by generating starting code from wireframes and sketch-files or generating an entire front end output. This helps developers focus on more important parts of development, such as application logic and building features. It speeds up the iteration of design phases and modifications. Those companies range from Airbnb who lately has built an AI that turns sketch files into raw code, to Uizard which uses a deep learning/ML (neural network) that they had trained to take a screenshot of graphic interface and translate it into lines of raw code. What’s impressive with Uizard is; a single textual to GUI renderer will work across multiple platforms such as iOS, Android and Web-based interfaces and the algorithm thus far works with a 77% accuracy.

Then Microsoft’s Ink to Code app, who also took a stab at this and made their software available to download for free from the Windows Store. And finally, Supernova, which is a startup on a mission to accelerate the app development workflow of mobile designers and developers built a tool, The Supernova Studio macOS app, which promises to automatically convert mobile app designs created in Sketch, into native UI code, aiming to bridge the gap between prototyping and design, and front end development.

The other side took AI a step further and are getting machines to do the entire front end coding. BAYOU, which is a project that was funded by the military and Google out of Rice University, uses a deep learning tool that basically works like a search engine for coding. Through reading the source code of 1500 Android apps (~100 million lines of Java), BAYOU’s neural net is now an AI that can program other software.

Where is Web-Assembly in all of this? A possible future

Web assembly is a binary format that can be natively decoded, in all browsers, much faster than JS can be parsed. This is a term that has been buzzing around in the developer community. It could actually become the most adopted in the near future as complement to JavaScript.

Why? Because it enables performance by reducing TTI (time to interactive) making for fast web application, as well as diversifying languages with which front end development can be written. This allows developers the usage of their favorite language or the ability to build a few parts of the web application with web assembly while boosting speed and leaving the rest of the application in JS.

Concluding Thoughts

The world of front end that we understand today is being dominated by three big frameworks; React, Vue and Angular (with Vue as the most promising of the three). However, knowing the past life cycles of frameworks, it will come as no surprise if a brand new framework comes along that is faster, more performant, and solves problems that existing frameworks are currently struggling with.

The future I envision however will be a hybrid of everything available today. Where one framework, which is defined as the easiest to adopt by developers and proposes a complete solution, uses complementary techniques such as web components, web assembly and AI, to create an end to end solution for developing applications.

The core parts of the application will be built using web components so that they are used and shared easily.

Web assembly will serve as speed boosts in parts of the application to make the application faster and better performant.

AI will serve to speed up the development process, whether to provide starting code reducing boilerplate, or used to validate the quality of the code produced.

Is a specific framework the answer? Or web components? Or possibly some kind of hybrid approach? Does the future lie in techniques and practices we adopt more than technology, such as using micro front ends where different teams are working with different stacks? Are organizational structures the answer to choices we make in technology? Let me know your thoughts in the comments section below!

For further reading and related topics:

React vs. Vue (vs. Angular)

Vue.js Is Good, But Is It Better Than Angular Or React?

The Present Future of User Interface Development

The Future of JavaScript Frameworks Looks Very Fast

Top 5 Trends in Front-End Development for 2018

--

--

Rangle.io

The latest in digital transformation and innovation.