π #4: Partial Hydration in VitePress and Five Things Every Developer Should Know about Software Architecture
Why I'm excited about native Partial Hydration with Vue and VitePress and my takeaways from a talk about five things every developer should know about software architecture.
Hey,
Last week, there wasn't too much for me to discover in the digital world because I spent three days at the company-wide karriere.at summer event on an island in Croatia.
Yet there was one tweet by Evan You himself that caught my attention: he implemented an "MPA mode" in VitePress that enables Partial Hydration, aka Island Architecture with Vue SFCβs.
Other than that, I watched an interesting talk about five things every developer should know about software architecture.
This is the 4th issue of my Recent Discoveries newsletter. If you don't want to miss the next issue, hit subscribe.
Native Partial Hydration with Vue and VitePress
A Tweet by Evan You got me very excited. When I understand this correctly, this pretty much resembles a convention for using the Island Architecture pattern with Vue SFC's. I hope that this also gets implemented in Nuxt and Gridsome at some point.
A filename convention (similar to React Server Components) to enable Partial Hydration for non-SFC's would also be great: my-component.client.js. That way, we could use this feature for .jsx and vanilla JS components too.
Evan You states that this is just a "why not" feature, but not necessary, as VitePress pages are fast, even with JavaScript. This is definitely the case for relatively simple pages like the VitePress page itself. Although I'd love to be wrong about that, I'm very skeptical that this holds true for more typical, long scrolling marketing landing pages. In my experience, starting somewhere around 150 to 200 kB of JavaScript, a >90 Lighthouse score is out of reach. But let's see, I base my experience on Vue 2 projects, as I said before: I'd love to be proven wrong on that and see typical marketing pages built with Vue 3 get >90 Lighthouse scores out of the box.
Anyway, I believe this is a huge step into a more sustainable future using Vue to build marketing sites. If some JavaScript code is not beneficial to the UX, we should not send it over the wire.
Five Things Every Developer Should Know about Software Architecture
Last week I watched this talk by Simon Brown:
The five things are:
Software architecture isn't about big design up front
Every software team needs technical leadership
The software architecture role is about coding, coaching, and collaboration
You donβt need to use UML
A good software architecture enables agility
The two most important takeaways for me in this excellent talk were:
not necessarily using UML but the C4 Model with the Structurizr DSL;
and how good software architecture enables agility.
How I see it, my job as an architect is to enable teams to build better software faster.
Sponsors
Storyblok is a headless CMS with a Visual Editor. Theyβre currently working on their V2 release! You can join the beta crew if you want to be among the first to experience the new and improved editting experience.
Nuxt.js is a web framework for building modern apps & websites with Vue.