Cloned the Vue 3 starter project in Angular
How do they compare?
TL;DR; The code can be found here.
Update: The live demo lives here.
As indicated by previous blogs, I used to use Vue 2 at work. I haven’t been able to do that as I have moved and switched jobs. Now I am dealing with a totally different beast (SAPUI5 🙃). As a close follower of the tech trend (maybe a bit too close 😅), I have been long aware of Vite, the new cool kid in town. It’s fast, with good DX and much more, so I am tempted to try it out with a familiar framework, so that’s what I did with the new Vue 3 starter project.
I am pleasantly surprised by the new starter app. The default starter page looks nice and clean, with good information and a nice layout. It immediately occurred to me: Can I clone an Angular version of this? For fun and for performance comparison or whatnot? That seems like a good weekend project. So here’s the result.
Here is a chart of the bundle size for the initial page load of both frameworks. 🟥 for Angular and 🟩 for Vue, of course.
Notice both apps include a router, and initial payloads don’t include the lazy
About page. My initial impression is two-fold:
- Vue is pretty lightweight. This has always been the case, but a one-to-one comparison makes it much more straightforward.
- After compression, the difference in downloading time may be less outstanding. Though I still wish one day Angular will hit the 200kB mark, and after that the 100kB one, for this starter project. 😄
So a more comprehensive graph would look like this:
So my third impression:
And what about the actual scores and numbers? I know, I know, everyone’s favorite, so here you go:
Both frameworks reach 100 on performance, which shouldn’t be surprising to anyone. Overall, Vue is about 0.3 seconds faster across the metrics.
This is a straightforward comparison, so there’s nothing to conclude, really. I did get reminded of the “host element”. If you don’t know Angular, a host element is the HTML element created for an Angular component in the DOM. It matches the component’s selector. That means instead of the “clean” HTML that Vue outputs:
You get this instead:
So when migrating styles from the Vue project, some styles would need to go into the
As a side note, for an Angular directive, the host element is the element that it gets attached to. For example:
The host element of the
myHighlightDirective would be this
That’d be all for this post. See you next time! 👋