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.
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
, and Angular
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.
Created by Evan You
and with Chinese giant Alibaba
as its main proponent. Vue is becoming a fast favorite amongst recent converts to front end development. 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 on 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.
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 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 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.
How will AI transform Front End Development
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
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.
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.