Cloned the Vue 3 starter project in Angular

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.

Bundle Size

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. 😄

You may ask: But the browser needs to parse and execute those JavaScript, right? Or do they? 🤔

Lighthouse

To find out the information on unused JavaScript, we need to dig deeper into the Lighthouse result (which can be found in the repo mentioned on top). You get a treemap with information on unused JavaScript by clicking the “View Treemap” button on the Lighthouse result page.

So a more comprehensive graph would look like this:

So my third impression:

• Angular has about 35% of unused JavaScript while Vue has about 29%. I am not sure where they live, but the router seems a major suspect. Angular has more room to improve here.

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.

Conclusion

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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<main>
    <div class="item">
        <i>
            <svg></svg>
        </i>
        <div class="details">
            <h3>Documentation</h3>
        </div>
    </div>
</main>

You get this instead:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<main>
    <app-welcome>
        <app-welcome-item>
            <div class="item">
                <i>
                    <app-icon-documentation>
                        <svg></svg>
                    </app-icon-documentation>
                </i>
                <div class="details">
                    <h3>Documentation</h3>
                </div>
            </div>
        </app-welcome-item>
    </app-welcome>
</main>

So when migrating styles from the Vue project, some styles would need to go into the :host selector.

As a side note, for an Angular directive, the host element is the element that it gets attached to. For example:

1

<code myHighlightDirective> console.log("Hello, World"); </code>

The host element of the myHighlightDirective would be this <code> element.

That’d be all for this post. See you next time! 👋