Hello all,
As we are starting prototyping for Wiki 3.0, we are also testing and benchmarking frameworks and libraries that we would potentially use for its development.
One important choice we have to face is the choice of the UI framework we will be using for building the interface.
We have several requirements for this matter, the first one being that the framework should be well-maintained, so that we can envision our project in the long term.
The framework should also have a great ecosystem (libraries / devtools / community forums & resources), so that there already are existing solutions and help for common problems we’ll have to solve.
Performance and scalability are also important requirements we want to satisfy.
There are 3 great frameworks that meet these requirements, being React, Angular and Vue.
For now, our choice stopped on Vue, for the following reasons:
- we already have some positive experience with it, from the Livedata Macro
- Vue has a very low learning curve, allowing people to easily get started with it
- Vue allows great flexibility through its syntax, which is important for the type of software we want to build
- even though Vue supports JSX, it also provides its own Single-File Components syntax, that allows to intuitively compose HTML, JS and CSS, without the need of additional frameworks
About using Web Components
Ideally we prefer standards, and therefore the Web components standards is very interesting.
Now as stated on the Vue page on web components, web components do not provide all the features that a framework like Vue provides
There is indeed a certain level of feature overlap between Custom Elements and Vue Components: they both allow us to define reusable components with data passing, event emitting, and lifecycle management. However, Web Components APIs are relatively low-level and bare-bones. To build an actual application, we need quite a few additional capabilities which the platform does not cover:
- A declarative and efficient templating system;
- A reactive state management system that facilitates cross-component logic extraction and reuse;
- A performant way to render the components on the server and hydrate them on the client (SSR), which is important for SEO and Web Vitals metrics such as LCP. Native custom elements SSR typically involves simulating the DOM in Node.js and then serializing the mutated DOM, while Vue SSR compiles into string concatenation whenever possible, which is much more efficient.
Vue’s component model is designed with these needs in mind as a coherent system.
However, as Vue is compatible with Web Components, one approach would be to use Vue to generate Web Components as the basis components for the wiki 3.0 design system, thus getting more framework independent.
We would be interested to have your feedback on this subject, discussing what UI framework to use for the Wiki 3.0, and how the project would benefit from this choice.
Thanks,
Clément