Technologies
- Introduction
- Language
- Frameworks & Front-end Technologies
- Design Systems & Component Libraries
- Vue 3
- Testing
- Code Style and Linting
- Accessibility
- Packaging and Module Bundling Tools
- Dependency Injection & Extension Manager
- Editor Technologies
- APIs
- Testing
Introduction
The goal of this document is to gather related technologies for different areas of Cristal in order to make sure we do the best long term choices for the development of it
Language
There are some strong reasons to use Typescript instead of Javascript in order to have compile time verification of the code.
Frameworks & Front-end Technologies
The goal is to list the best front-end frameworks, whether it is the core framework or frameworks on top of it.
We are looking for a front-end Framework that is serverless (Cristal should work as a standalone tool with "traditional" rest backends).
We have some initial preference with VueJS which we have used for LiveData.
TODO: listing frameworks built on top of VueJS
- See: https://madewithvuejs.com/blog/the-best-vue-js-frameworks
- https://nuxt.com/ full integrated framework
- https://gridsome.org/ GraphQL is at the core
- https://vuetifyjs.com/en/ Material design component library. Some accessibility
- https://quasar.dev/ not much about accessibility
- https://primevue.org/
- https://element-plus.org/en-US/ seems more desktop oriented
- https://bootstrap-vue.org/ bootstrap 4 + vue2. Emphasis on accessibility
- https://bootstrap-vue-next.github.io/bootstrap-vue-next/ early version of bootstrap4 + vue3 + typescript
- https://www.radix-vue.com/ emphasis on accessibility. Looks nice.. but seems tied to tailwind css
Web Components frameworks / libraries
Also looking at: https://www.webcomponents.org/ See https://vuejs.org/guide/extras/web-components.html
- https://startinblox.com/en/ (Web Components connected to SOLID)
Other frameworks
- React
- Nextjs.org
- AngularJS
About 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
One approach could be to choose a framework build on top of web components () . We would need to research more these frameworks, which would still be "non standard" as the features describe before are not existing in standards.
- https://lit.dev/
- https://minze.dev/
- https://www.sencha.com/blog/web-components-best-web-components-framework/
- https://github.com/microsoft/fast (Microsoft)
- https://hybrids.js.org/#/
Another approach would be to be more independent from a framework like Vue by using webcomponents as the basis components for the design system. Vue is compatible with Web Components both for using them and providing our components as Web Components.
For that we need to research web components UI libraries:
- https://opensource.adobe.com/spectrum-web-components/ (Adobe) with community project for vue: https://github.com/toshusai/spectrum-vue
- https://github.com/microsoft/fast (fast-element, Microsoft) with documentation on how to use in Vue: https://www.fast.design/docs/integrations/vue/
- https://github.com/vanillawc
- https://lit.dev/ (Lit Element)
- https://polymer-library.polymer-project.org/3.0/docs/devguide/feature-overview (Google)
Since Vue supports providing our components as Web Components, we should definitively look at providing part of our UI as Web Components as a way to embed in other application. We'll have to see how that allows for tight integration in other applications. This is something we should prototype early. Vue mentions on their web site that the "cost of the vue library" would be 14k (to verify as the library is 80k but after compilation it could be lower). This seems to be negligible compared to all the other code that we will need to provide wiki functionalities or even our UI library.
Design Systems & Component Libraries
Design Systems & Components Libraries
Vue 3
Documentation Generation
Options API vs Composition API
Testing
Code Style and Linting
Accessibility
- Vuetify accessibility info https://vuetifyjs.com/en/features/accessibility/
- Radix has strong emphasis on accessibility
- BoostrapVue has strong focus on accessibility
- PrimeVue https://primevue.org/accessibility/
- DSFR
Packaging and Module Bundling Tools
Article about standard Modules
https://philipwalton.com/articles/using-native-javascript-modules-in-production-today/
Module Bundler
- https://webpack.js.org/ https://snipcart.com/blog/javascript-module-bundler
- webpack does not seem to allow to generate standard modules. See "Webpack does not currently support a module output format, but here are a few issues to follow the discussion (#2933, #8895, #8896)." in https://philipwalton.com/articles/using-native-javascript-modules-in-production-today/
- https://rollupjs.org/ supports generating standard modules which is interesting
- https://vitejs.dev/ (used by Vue3) (seems to be a frontend to rollup or esbuild on the build side)
- Alternatives: browserify, esbuild, parcel, rollup, vitejs (second most popular according to previous page)
- Comparisons
Package Manager
Dependency Injection & Extension Manager
Dependency Injection & Extension Manager
Editor Technologies
APIs
TODO: list APIs of products we could integrate with
- Solid W3C API: https://github.com/solid/solid-spec/blob/master/api-rest.md
- NextCloud API: https://docs.nextcloud.com/server/latest/developer_manual/digging_deeper/rest_apis.html
- NextCloud WebDAV API: https://docs.nextcloud.com/server/latest/developer_manual/client_apis/WebDAV/index.html
- XWiki rest APIs: https://www.xwiki.org/xwiki/bin/view/Documentation/UserGuide/Features/XWikiRESTfulAPI
Testing
TODO: testing tools
- https://vitest.dev/ mentioned on https://vuejs.org/guide/scaling-up/testing.html
- Need to ask cryptpad team about framework they decided to use
- WCAG testing: need to ask cryptpad and xwiki team about testing WCAG
