In my last blog, I provided a view of how the community sees front-end frameworks through the popularity metrics. Now, let’s take a look at the core philosophies of each framework as well as the pros and cons.
Angular is designed to be a complete, opinionated framework for building a system of user interface components. It uses a familiar Model View Component architecture style for components. And, it has a specialized template syntax for the ‘View’. Other highlights of the framework include the following.
Angular strongly favors TypeScript as an implementation language. It also favors rxjs and reactive functional programming for any type of asynchronous operation.
It also relies on a change detection algorithm to make DOM updates any time data in a component has been updated, while using an external dependency injection system to break up grouped code into modules as needed.
Data input can take advantage of a two-way data binding. In this method, data is automatically bound to the model as it is input from the user. Conversely, the UI is automatically updated as it is fetched from the server and added to the model.
Benefits of Angular:
- Since the framework is a complete solution, all version updates can be completed seamlessly through angular-cli.
- TypeScript provides strong typing and intelisense—catching bugs earlier and promoting developer productivity.
- MVC style design paradigm with separate View templates is a very familiar pattern with developers. Some convenience functionality is abstracted into special view template tags (i.e. *ngIf).
- It is features rich, allowing the framework itself to handle very complex applications.
- The more opinionated framework helps developers keep a consistent approach to solving common problems.
Reactive programming with rxjs and TypeScript requires time to skill up. In addition to TypeScript and rxjs, the framework itself is verbose and complex. It has the largest bundle size (although Angular 9 should make this negligible). And, while two-way data binding simplifies coding, it can also cause side effects that are harder to follow and understand. Plus, change detection is competitive but not the most performant way of updating the DOM.
<<< Start >>>
<<< End >>>
React is designed to be a UI component library only, focusing on lightweight and efficient UI updates. When needed, it can be combined with a large ecosystem of additional libraries to create a full framework. Other notable highlights of the framework are as follows.
React uses a Virtual DOM to efficiently manage actual updates to the DOM since DOM updates are expensive. And, components will compare variables and automatically update when values have changed by reference. This allows developers to embrace functional programming and immutability principles.
Finally, data input is unidirectional, and code must be written to match an intent with a model update. The model is the single source of truth and any changes are deterministic.
Benefits of React:
- Since the core framework is a lightweight UI library, there is more flexibility in the way you include it in your system. React components can be partially added without fully committing to a full new framework or rewrite.
- There’s more flexibility in architecting your specific solution. You can choose libraries for routing, http, form validation, i18n, animation, testing, etc.
- It has great TypeScript support if desired for structured and productive coding.
- The functionally written components and unidirectional data flow concepts allow for simpler and better testing as they are more deterministic.
Developers may face decision fatigue in having to choose between different libraries or philosophies. And, libraries must be independently upgraded and maintained.
Extra flexibility may lead development teams to solve the same problem in multiple ways if not moderated. Templates written directly into components is a departure from typical MVC and the mixed syntax gives some developers pause.
Unidirectional data flow, while increasing testability and developer control, forces developers to write more code.
Vue uses a familiar MVC style architecture design for components and a specialized template syntax for the ‘View’, while using a Virtual DOM to efficiently manage actual updates. It also tracks sub-component dependencies so it can efficiently determine when a sub-component must be re-rendered when a parent updates.
Data input is unidirectional, and code must be written to match an intent with a model update. The model is the single source of truth and any changes are deterministic.
Benefits of Vue include:
- While other frameworks are competitive, Vue is the smallest and most performant.
- Vue’s small and lightweight core component library gives you the flexibility to use it as a partial component system rather than a full commit to an application rewrite.
- Since companion libraries are officially supported by Vue, it provides more cohesion and better maintainability rather than relying on a third-party ecosystem.
Vue has the smallest community and ecosystem. However, it is growing. And, there are not as many cross-platform renderers. It’s backed by a small team and does not have a dedicated team of developers from a large company working on it. Vue is flexible in structure but that can sometimes lead to inconsistent coding styles within large teams if not moderated carefully.
All three frameworks are proven to be capable of building world-class front-end applications. However, there are different factors that may make one a better fit than the others for your specific needs. Based on project experience, I’ll take a look at some different examples of where one framework may have an advantage over the others in the next and final edition of this blog series.