Why a framework?
The importance of User Interface (UI) and User Experience (UX) quality and the size and complexity of web applications have grown exponentially. Along with this trend, the developers started facing problems with the synchronization between the UI and the state of the application. Writing Vanilla JavaScript or just JavaScript using libraries like jQuery or CoffeeScript became more difficult as the codebase became unmaintainable because of its size. The developers needed a new way of building web applications in a modular way, so they could focus on the real app logic, not on the synchronization of state and UI. Hence, using small building pieces (components) that can be reusable came to be of significance.
Front- end frameworks to the rescue
In 2010, the first JavaScript front-end framework appeared. Backbone and AngularJS were introduced and immediately gained such popularity that many companies are still using them until now. They solved the main problem exposed above. The frameworks are providing a mechanism for automatic detection of state changes and are responsible for updating the UI to match the state.
Nowadays, we are facing another problem. Which JavaScript framework should we choose? This blog post will review the 2 most used ones – Angular and React.js, as well as the trendiest one – Vue.js.
Angular
The successor of AngularJS, Angular is one of the first JavaScript front-end frameworks. Angular is backed by Google and used in many enterprise projects of big companies like Google, Microsoft and other Fortune 500 companies.
Angular is a complete platform that makes it easy to build applications in the web. It provides the developers with powerful tools like an HttpClient, a Dependency Injection (DI) mechanism, a Router and many more.
Architecture Overview
- Modules – The main building block of an Angular application, that groups a set of components, services and styles. They are reusable and can be exported and imported wherever they are needed.
- Components –The smallest building block of Angular apps and each one must be declared inside a module in order to be used. The components can be reused in the app to avoid repeating code
- Services – They contain data or logic that isn’t associated with a specific view. Injected through the Dependency Injection mechanism of Angular, services can be used in a single or across many different components.
- Templates – A template combines HTML with specific Angular markup to create flexible and dynamic web components.
Code Example 1: Sample Angular Component
Pros
- A complete framework – It provides a complete solution for building web applications. That way you can reduce the number of the 3rd party libraries in your projects.
- DOM Manipulation: It supports a 2-way data-binding mechanism to sync the data between models and views.
- Angular CLI – А tool that helps you create modules, components and services and it scaffolds the files for you. You only need to focus on the actual implementation without losing any time with writing boilerplate code.
- Highly testable applications – It encourages developers to write highly testable code by providing them with unit and E2E testing tools, integrated in the framework.
- Directives – Angular makes use of directives which can be defined as custom HTML attributes. They allow manipulation and extensibility of the native DOM elements.
- Forms – 2 ways of creating forms – Template Driven or Reactive Forms – really easy way of creating dynamic forms.
Cons
- Steep learning curve – Although Angular is a complete solution for building web apps, it takes time to get familiar with all its capabilities. The learning curve of TypeScript could also be a problem for many inexperienced developers, coming from the JavaScript world.
- AngularJS-to-Angular problem – Many developers and organizations are bothered by the fact that when Angular came up, AngularJS applications became obsolete and a migration to Angular meant a complete rewrite of the codebase.
- Heavy files – The size of a built-for-production Angular application with only 1 component without any other services or styles is around 570KB. This will impact the initial loading speed of your application.
Conclusion
A great framework, Angular is created with medium and big enterprise applications in mind. A big application can take advantage of its component-based architecture, the dependency injection mechanisms and the rest of its features, although to master them you will need a solid knowledge of JavaScript, along with TypeScript.
For smaller applications, along with a team that is inexperienced with Angular and TypeScript, the effort to get things done may be too costly.
React
React is not exactly a framework as it is more like a library for building user interfaces. Created in 2013 by Facebook engineers, it was initially used for Facebook’s news feed section. Being open-sourced, React’s popularity has increased exponentially and it is used in many big companies like Facebook, Instagram, Microsoft, Airbnb, etc.
React is only responsible for the view layer, which means that it isn’t a complete MVC framework like Angular or Vue.js. It doesn’t provide built-in functionalities like Dependency Injection (DI) mechanism, Http client for making request or a router. If you opt to go with it, you will need to use third party libraries or custom solutions in order to take advantage of their functionalities.
Architecture Overview
The main building block of a React application is the component. As already mentioned, components let you split the UI in separate, reusable and isolated pieces. The components are usually written in JSX, a normal JavaScript, mixed with HTML-like code. Refer to Code Example 2. React components could be written in pure JavaScript without using JSX, although it isn’t recommended. They could be also written using TSX – TypeScript, mixed with HTML-like code. The decision is up to you, although the favored way of doing it is by using JSX.
Code Example 2: Sample React Component written in JSX
Pros
- Virtual DOM – The Document Object Model (DOM) is a way to define all the HTML elements in a web page using objects, so they can be manipulated later via JavaScript. React comes with its own and highly optimized Virtual DOM implementation. Its usage positively impacts the speed of making manipulations by tracking all changes and updating only the changed elements.
- Reusable components – In React developers can write stateless components, which automatically makes them more reusable than the normal stateful components.
- One-way data binding – React uses a one-way data binding flow to ensure that the child components won’t change their parent’s state. This way, it is evident where a change has been made at all times. By using this approach, you can make the application more stable and facilitate the debugging process.
- Lightweight – It is an extremely lightweight library. The core of a React application built for production (utilizing React 16.8.6) takes only around 110KB.
- React Native – A framework that allows you to share your codebase between your web applications and your mobile applications for both Android and iOS following the principle “Write once, reuse in all devices”.
Cons
- Lego-like structure – React is a library, only responsible for the User Interface. In order to use other functionalities like routing, Dependency Injection mechanism, state management, etc. you will need to find third-party libraries that fit your needs. That way your application will depend on a big number of external libraries and any changes in them could cause problems.
- JSX – Although JSX brings many benefits, mixing JavaScript and HTML in some cases may not be advisable. If you have a large codebase containing big components, the code can easily become messy, hard to read and unmaintainable.
Conclusion
React is a good option for more experienced teams. If you follow the best practices for writing and wiring React components and make the right decisions for the 3rd party libraries that go along with React, the chance of getting a fast and scalable application is incredibly high.
When determined to build cross-platform applications, React and React Native are definitely most desirable.
Vue.js
Vue.js is the youngest framework among the three. The creator and current lead of the Vue development team, Even You, is an ex-employee of Google and claims that he has combined the best features of AngularJS, Angular and React.
Vue.js is an incredibly flexible front-end framework, that has almost no limitations for the developers. In Angular the developers are basically forced to use TypeScript, whereas in React you are stuck with JSX. In Vue it is up to you – you can utilize normal HTML templates just like those in Angular or you can make use of JSX or TSX. These are only a few things that demonstrate how powerful and customizable Vue.js is.
Architecture Overview
- Components – The main building block of a Vue application is the component. It has the same purpose of an Angular/React component – to be reusable, isolated and to facilitate the splitting of the app into small pieces.
- Mixins – Mixins are a flexible way to distribute reusable functionalities for Vue components. Many of the Vue.js libraries are actually big mixins that are injected in a Vue application. Depending on the use case, the mixins can be considered an implementation of the Dependency Injection Pattern.
Code Example 3: Sample Vue Component using TypeScript and normal HTML
Pros
- Virtual DOM – Just like React, Vue has its own implementation of a virtual DOM that helps to track the changes and update only the necessary elements in applications.
- Performance – According to some benchmarks, Vue is considerably faster than Angular in the segment of DOM manipulation, due to its Virtual DOM.
- Flexibility – As already mentioned, the developers have the freedom to choose the way they want to create VueJS applications. Either by using TypeScript and/or JSX or by using single or multiple file components (see Code Example 3).
- Easy learning curve – Vue is fairly easy to learn compared to Angular and React, just because it gives you the opportunities to use the languages/technologies that you already know. JavaScript, for instance, instead of TypeScript or plain HTML templates instead of JSX.
- Official libraries and tools – VueJS has a great amount of external libraries like Vue router, Vuex (state management library), Vue Dev Tools, Vue Cli. The greatest thing about all these external libraries is that they are officially created and supported by the team that is developing the Vue.js Core.
- Perspective – Vue.js has a clear road map and the users know beforehand what is to be released with the next versions of the framework. That makes the planning process easier since you know what features will be released next.
Cons
- Not backed by a big enterprise company – Although VueJS is the fastest growing and maybe the trendiest among all the front-end frameworks the lack of a big company that backs the project may be considered negative.
- Smaller Community – Because of its youth, Vue has a smaller community compared to Angular or React. This means that there are not that much third-party libraries that can be used right away. For example, when you need an Official Google Maps library for Vue.js, you need to make a wrapper or just use the Vanilla JavaScript library.
- Fast-paced development – Although the road map for Vue.js is clear, the possible changes that may be introduced with its newer versions may be considered as a negative point for teams that are not ready to make small to big changes in order to keep their software up to date with the newest versions of the framework.
Conclusion
All in all, Vue.js is an incredible framework, that gives you a lot of power. The easy learning curve makes Vue.js a great choice for developers with less experience. It will favor teams that want to develop fast without the need to invest a lot of time in preparation and training. Its growing popularity among front-end developers (> 135k stars in GitHub) is a sign that Vue.js might just be the future of front-end development, so giving it a try is definitely worth it.
Tips
All the frameworks presented in this article can be used to create the same application in most cases. The tricky part is to decide which to use according to your needs and expertise. The tips below are based on my personal experience, so they might not be necessarily true in your case.
- Developing a cross-platform application? Go with React and React Native.
- In need of tools like Dependency Injection Mechanism, Http client or forms handling out-of-the-box? Go with Angular.
- Want to use the features of TypeScript out-of-the-box? Go with Angular.
- Inclined to use Object-Oriented Programming? Go with Angular.
- Interested in an especially flexible framework? Go with Vue.
- Not experienced with TypeScript? Go with Vue.
- Planning on a small to medium application? Go with Vue or React. For a bigger enterprise app, you could consider using Angular.