What is a JavaScript framework?
Since JavaScript’s inception in 1995, it has been used in different capacities throughout the web to achieve the look and feel of modern interfaces, providing the interactivity that plain HTML is unable to achieve on its own. Out of the box, JavaScript is very open, requiring developers to hook into DOM (Document Object Model) elements or page events to perform work, resulting in lots of boilerplate code for basic functionality. This was improved via libraries like jQuery, which greatly simplifies certain processes, but how the implementation of JavaScript is used is entirely up to the developer.
The front-end JavaScript frameworks addressed in this article solved the problems of the ‘openness’ of JavaScript, to streamline development, making for more consistent code and requiring less boilerplate to solve common problems. This meant that developers could build highly interactive user interfaces or UI components faster than ever before.
What frameworks are popular?
As the web has matured, so have the capabilities of websites, largely driven by big companies such as Facebook and Google. In 2010, Google released their internally-developed-and-used AngularJS framework to the public. In response to this, in 2013, Facebook made their own framework that drives the Facebook web experience, React, public for developers to learn and use. Making these originally internal frameworks public meant that these big companies could hire new developers who are already familiar with how their code works, and the use of these frameworks makes building highly capable websites easier for developers.
Due to improvements and breaking changes in design, AngularJS has been dropped in favour of Angular (sometimes referred to as Angular v2+) from 2016. Competitors to React and Angular exist in the market as well, the most popular of which being Vue.js, which was created by an ex-Google employee and was designed to address the shortcomings of React and Angular.
This page on GitHub shows a breakdown of current trends among developers based on several metrics. Most of the graphs and general consensus is that as of the end of 2020, React is the most popular front end framework, followed by Angular which has a somewhat stagnating level of developer interest, followed lastly by Vue.js, which while still in a relatively infant state, is growing in popularity and may even exceed Angular in the coming months.
What is TypeScript?
One of the bigger differences between the frameworks is the support of TypeScript ‘out of the box’. TypeScript is a strongly typed superset of JavaScript, whereas JavaScript gives variables types at runtime. Angular uses TypeScript as its language of choice, with Vue.js following suit from v3. React lets the developers choose whether they want to use JavaScript or TypeScript.
The advantage of using TypeScript over JavaScript is clear for developers with an object-oriented programming background, given that languages like C# and Java are typed languages. Strong typing lends itself to safer code, making it easier to identify and fix mistakes.
JavaScript framework comparison
| React | Angular (v2+) | Vue.js | |
|---|---|---|---|
| Initial Release | May 2013 | Sept 2016 | Feb 2014 |
| Language | JavaScript and JSX | TypeScript and HTML | JavaScript and HTML |
| Styling | CSS | CSS | CSS |
| Learning Curve | Medium | High | Low-Medium |
| Component-based | Yes | Yes | Yes |
| Document Object Model | Virtual | Direct | Virtual |
| Data Flow/Binding | One way | One/Two way | One/Two way |
| Dependency Injection | Yes, with library | Yes, out the box | Yes, out the box |
| Native Mobile Support | React Native | NativeScript/Ionic | Weex/NativeScript |
| Progressive Web App Support | Yes | Yes | Yes |
React’s key selling point is that it is flexible, quick, and easy to use. React makes it easy to start building a page, but as the complexity grows, more and more libraries will need to be learnt and implemented into the system. Angular and Vue.js already include libraries for dependency injection, routing, and other necessary functionality. This makes the learning curve steeper for Angular than React, as building a basic page requires more learning of how the program architecture works. Vue.js has been built with easy transition for experienced web developers in mind, making use of familiar JavaScript and HTML syntax for controllers and views.
Another key difference is data binding. React uses one-way binding with states and hooks for each component to update the DOM when values change. Angular and Vue.js have support for both two-way and one-way data binding. Two-way binding means that if the value changes the component is re-rendered with the new value automatically.
Which is right for you?
Utilising any front-end JavaScript framework will make your project easier to maintain and quicker to build than if you were using ‘vanilla’ JavaScript. Which framework you chose will depend on scope and requirements of the project, developer experience and to a degree personal preference.
For a recent redesign of Blue Crystal’s proprietary database and application monitoring solution, BlueDiamond, we have chosen Angular as the framework of choice, due to its included features, opinionated architecture, and the object-oriented programming experience of the project’s developers. Given the needs of the project, such as communication with an API, routing between pages, flexible data entry and validation, Angular’s opinionated architecture meant that it was easy to follow best practices for development. React’s more flexible architecture gives control over what plugins are used but can lead to a less than ideal codebase if developers are not careful with structure. If building an offline mobile app had been a priority for the project, React might have been a better choice because of the capabilities of React Native.
Facebook and Google both provide a wealth of resources for developers to learn the React and Angular frameworks. This support, along with their popularity and abundance of use throughout the web, make either of these frameworks a good choice for businesses looking to build bespoke applications to streamline their practices.
