Why a framework?
Front- end frameworks to the rescue
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.
- 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
- 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.
- 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.
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 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.
Code Example 2: Sample React Component written in JSX
- 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”.
- 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.
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 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.
- 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
- 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).
- 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.
- 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.
- 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.
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.
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.