Why I Left Angular Behind for Vue.js
I had been developing with Angular for more than two years. I discovered this JavaScript framework with its version 6. I enjoyed it for so many months, quarters, and years. But I abandoned it while the early coming version 9 and the Ivy renderer engine were released.
Moving from Angular to Vue.js has been a pleasant moment, a real enjoyment in my front-end developer life. The goal of this article is to explain to you why.
At the very beginning, I was a back-end developer, developing REST API web services for several companies. I loved this well-structured code, with meaningful instructions and a strong business logic. The purpose was real: to fetch data from the database, transform it, and provide complex objects in the form of web services so that front-end developers could use them.
The Rise of JS Frameworks
Around 2015, the most popular front-end frameworks were growing increasingly fast. Angular, React, and Vue.js were gaining more and more supporters. They definitely had a different approach regarding single-page application (SPA).
Angularwas (and still is) a complete framework, made for enterprise-level use, with lots of features. This bunch of tools helps you create an app without thinking about which library you may use for HTTP requests, unit testing, i18n, and so on.
React, the direct concurrent to Angular, changed the game when they released Redux, their Flux pattern implementation. React’s leitmotiv is to render components thanks to a dedicated set of state. React is user-interface-centric. Adding Hooks has shifted the way to develop web apps and leveraged the component composition.
Vue.js is the tiny outsider. Even though there are fewer people using Vue.js than Angular or React, Vue.js can boast that it’s supported by a strong community which is growing super quickly. Technically, it’s almost a mix between Angular and React, using a reactive state to render components.
Mind awakens
At this point in time, I was a back-end developer building web APIs to fetch geographical data (e.g., clusters calculation, point of interest), and I was totally lost when looking at the front-end dev’s code. I had some knowledge of AngularJS (coming from engineer school) but that was drastically different. I started being bored for several reasons, and it was time to make a strong change in my work life.
I made up my mind to change my position and start a front-end career. My decision had several points:
- I realized I like visual content and seeing my code render something. All those bunches of JSON were not enough.
- I began to be bored with understanding all the business logic. As a back-end developer, you first need to get the context, all the concepts and the entities involved. In contrast, front-end dev’s goal is to render data. Occasionally, business rules must be implemented but they’re not as complex as the ones in the background layer.
- The web development world evolves very quickly, and the possibilities are almost unlimited when it comes to dealing with rendering content, or learning new browser capabilities or new JS framework patterns. Our knowledge always needs to be up-to-date.
- As it’s a user-centric job, you take care of both the user interface and the user experience. You can imagine yourself as the user, browsing the website and checking every little detail that may disturb you.
- A front-end developer can be proud of what they have developed: Their web application is concrete (well, it’s just pixels, but you know what I mean). But the back-end developer can’t feel the same, and they can even be frustrated when front-ends are mad at them when REST APIs are down.
- Finally, due to this important rise of the JS frameworks, I thought I was missing something big.
Angular, I Choose You!
I chose to learn Angular. Of course, I already had some knowledge about it, and, as it’s made for enterprise-level use, it was the easiest way to be hired to practice this framework.
I learned a lot with some classes on the Udemy platform and by reading a lot of Medium articles.
TypeScript everywhere
As I started practicing Angular with the sixth version, TypeScript was compulsory and I fell in love with it. Easy one, you would say, since its postulate around OOP is close to back-end programming languages. Having this well-defined context was like a softener to learn all the essentials of front-end development.
Class-component style and decorators
The class-component style to declare a component attracted me because it looks like OOP classes. Decorators such as Input /Output or Service / Component and Module are similar to C # data annotations.
Application architecture
In an Angular app, the code is, by default, neatly separated:
- Data — All data-related content is contained in services and the app state store (and its feature modules,
reducers,selectors, …). - Rendering tools — Filters and directives are easy to use and test.
- Component hierarchy is easy to set with the atomic design pattern or featured-centric design pattern.
- Module composition — Angular modules are consistent containers with blocks of code dedicated to an application domain, a workflow, or a closely related set of capabilities.
- Dedicated files for each component: three files (even four, if we include the test file) which help for readability and separation of concerns.
I guess you have understood it here: structure, structure, and structure again — which is very close to the back-end environment.
A powerful UI Library (Angular Material)
Angular Material is the Angular implementation of material design. The set of components and utilities is very impressive and helped me a lot to improve my skills in Angular, especially for advanced topics about content projection, dependency injection, or component structure.
Testability
Testability is intrinsic to Angular, with Karma, its test runner, and Jasmine, the test library. It’s like each app component you develop is ready to be tested. An important set of functions is available to get a component and manipulate it to handle almost all use cases.
Moreover, creating end-to-end (E2E) tests is eased since Angular has developed its own library: Protractor.
Honeymoon Has Passed
After months and years using a framework, you have handled many topics and issues. You know the strengths and disadvantages of it.
Learning curve
Angular’s learning curve is very steep, even after years of practice. Deep topics are well understood and managed by a small community of enthusiastic adepts.
Amongst all the JS frameworks, it’s the steepest one. That comes from the specific runtime of the Google-leg framework, dependency injection, and application lifecycle.
Over-typed language means complexity
The fact this framework is written with TypeScript is a real opportunity to get control of all the code with a well-structured outline.
However, for specific subjects, it can lead to an impressive amount of code and typing to achieve simple tasks.
For example, when testing a component, you need all this setup (code extract from Angular documentation):
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { BannerComponent } from './banner.component';
describe('BannerComponent', () => {
let component: BannerComponent;
let fixture: ComponentFixture<BannerComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ BannerComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(BannerComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeDefined();
});
});
Another illustration of this point is the CDK Portal feature.
Finally, there is the Angular’s capability for content projection.
Major release, but minor changes
Angular has a precise schedule regarding its releases.
I started using this framework from version 6 until version 9. During this period, no main new functionalities or specific paradigm has been added to improve its coding experience for developers.
- v7: CDK improvements (virtual scrolling, drag-and-drop, etc.)
- v8: Angular Ivy as opt-in, differential loading
- v9: Ivy official release
You can find more details here.
During this period, React has provided its Hooks. Vue has added new attributes or improved TypeScript compatibility.
As I am writing this article, Angular v10 has just been released, and, as I said, nothing really new has been developed.
Vue.js: Front-End Development Made Simple
During summer 2019, I followed a class on Udemy about Vue 2. A friend of mine was so happy to use it, and I wanted to have my own opinion. I was impressed by its simplicity and how easy it is to start a project.
Back to basics
What I really like about the Vue framework is how each component we can create is close to the template and its options are template-centric:
computedmay be qualified as prepared data to be easily rendered in the templatewatchersallow to reactive to data changes in the template- Dynamic components are so easy to handle compared to Angular setup
transitionsand animations, dynamic styles, etc.
Performant
Evan You’s framework is incredibly fast and lightweight, and build time is very short, even in larger applications. The building process is clear and can be customized easily (even though Angular has promoted CLI Builders).
For instance, computed are methods which are stored in memory and update themselves when their dependencies have changed. In contrast, methods are re-executed each time.
Learning curve
Angular’s learning curve might be the steepest one, but Vue shall be the softest one. The documentation is practical and easy to understand. Starting a project is very quick.
Coding experience
Having all code related to a component is super handy — no need to switch between template, style, and component file.
Component creation, imports, and usage are clear and simple. The lazy loading component is so easy too.
Plus, we can add plugins to a Vue instance, and they can be invoked from anywhere:
Some examples:
this.$store
this.$emit
this.$i18n (when you use vue-i18n)
...
And of course, we can extend it.
TypeScript support
Unlike Angular, TypeScript is not mandatory in a Vue app. This JavaScript super-set is a complementary tool. It does not break the app when there is a TS compilation error. You can use it as a way to structure your code. In a single project, a pure JS component and a TypeScript component can co-exist. And this is super strong!
I Don’t Regret It, But…
For now, I imagine the honeymoon is not ended since I have been using Vue for almost a year. But I regret a few things I did not find in Vue that Angular can boast:
- Creating a template that can be reused at several places in the template (like
ngTemplate) is powerful, but I did not find a way to reproduce this in Vue. - Template type checking is a strong asset from Angular v9.
- App architecture is way better defined in Angular than in Vue. For example, there is a dedicated file for data (services), a module definition file, and so on.
For sure, I won’t go back to Angular. I really have great pleasure using Vue. In addition, Vue 3 promises incredible new features, such as native TypeScript support and a new paradigm: Vue composition API.
Design Principles of Vue 3.0 by Evan You — VueConf Toronto
Final Thoughts
Angular, React, and Vue are all different JS frameworks with a strong approach. They offer a ton of features and run the apps quickly.
No matter what, I will continue to keep an eye on Angular because I believe in its potential. I am really excited about Vue 3 and can’t wait to see it in action. Even though the composition API is really close to React, I want to discover all its assets.
Suggest:
☞ Angular Tutorial - Learn Angular from Scratch
☞ Vue js Tutorial Zero to Hero || Brief Overview about Vue.js || Learn VueJS 2023 || JS Framework
☞ Learn Vue.js from scratch 2018
☞ Is Vue.js 3.0 Breaking Vue? Vue 3.0 Preview!