Wiki source code of Technologies
Last modified by Vincent Massol on 2026/08/13 09:36
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{toc/}} | ||
| 2 | |||
| 3 | |||
| 4 | = Introduction = | ||
| 5 | |||
| 6 | 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 | ||
| 7 | |||
| 8 | = Language = | ||
| 9 | |||
| 10 | There are some strong reasons to use Typescript instead of Javascript in order to have compile time verification of the code. | ||
| 11 | |||
| 12 | {{info}} | ||
| 13 | **In the prototype being worked on, Typescript has been experimented successfully with tsc and vue-tsc. The support of typescript by vue is nice. The vitejs tool worked well with typescript. The editor used is VSCodium which is displaying all code errors properly and the development productivity is quite high.** | ||
| 14 | |||
| 15 | **Typescript has strong advantages of favoring "api-based" development.** | ||
| 16 | {{/info}} | ||
| 17 | |||
| 18 | |||
| 19 | = Frameworks & Front-end Technologies = | ||
| 20 | |||
| 21 | The goal is to list the best front-end frameworks, whether it is the core framework or frameworks on top of it. | ||
| 22 | |||
| 23 | We are looking for a front-end Framework that is serverless (Cristal should work as a standalone tool with "traditional" rest backends). | ||
| 24 | |||
| 25 | We have some initial preference with VueJS which we have used for [[LiveData>>https://extensions.xwiki.org/xwiki/bin/view/Extension/Live%20Data%20Macro/]]. | ||
| 26 | |||
| 27 | * [[VueJS>>https://vuejs.org/]] | ||
| 28 | |||
| 29 | TODO: listing frameworks built on top of VueJS | ||
| 30 | |||
| 31 | * See: [[https:~~/~~/madewithvuejs.com/blog/the-best-vue-js-frameworks>>https://madewithvuejs.com/blog/the-best-vue-js-frameworks]] | ||
| 32 | * [[https:~~/~~/nuxt.com/>>https://nuxt.com/]] full integrated framework | ||
| 33 | * [[https:~~/~~/gridsome.org/>>https://gridsome.org/]] GraphQL is at the core | ||
| 34 | * [[https:~~/~~/vuetifyjs.com/en/>>https://vuetifyjs.com/en/]] Material design component library. Some accessibility | ||
| 35 | * [[https:~~/~~/quasar.dev/>>https://quasar.dev/]] not much about accessibility | ||
| 36 | * [[https:~~/~~/primevue.org>>https://primevue.org/]]/ | ||
| 37 | * [[https:~~/~~/element-plus.org/en-US/>>https://element-plus.org/en-US/]] seems more desktop oriented | ||
| 38 | * [[https:~~/~~/bootstrap-vue.org/>>https://bootstrap-vue.org/]] bootstrap 4 + vue2. Emphasis on accessibility | ||
| 39 | * [[https:~~/~~/bootstrap-vue-next.github.io/bootstrap-vue-next/>>https://bootstrap-vue-next.github.io/bootstrap-vue-next/]] early version of bootstrap4 + vue3 + typescript | ||
| 40 | * [[https:~~/~~/www.radix-vue.com/>>https://www.radix-vue.com/]] emphasis on accessibility. Looks nice.. but seems tied to tailwind css | ||
| 41 | |||
| 42 | Web Components frameworks / libraries | ||
| 43 | |||
| 44 | Also looking at: [[https:~~/~~/www.webcomponents.org/>>https://www.webcomponents.org/]] See [[https:~~/~~/vuejs.org/guide/extras/web-components.html>>https://vuejs.org/guide/extras/web-components.html]] | ||
| 45 | |||
| 46 | * [[https:~~/~~/startinblox.com/en/>>https://startinblox.com/en/]] (Web Components connected to SOLID) | ||
| 47 | |||
| 48 | Other frameworks | ||
| 49 | |||
| 50 | * React | ||
| 51 | ** Nextjs.org | ||
| 52 | * AngularJS | ||
| 53 | |||
| 54 | {{info}} | ||
| 55 | **In the prototype being worked on, Vue3 is being used and allowed to build a "skin" system. It also allowed to "abstract" the design system (see below). Integration with Typescript is working well. Vue has support to consume web components.** | ||
| 56 | |||
| 57 | **One aspect to check are the complexities around upgrades. LiveData is still in Vue2. As time passes, new breaking version of frameworks will happen and it will be difficult to support extensions build on an older version of a framework with a new version of it being used in the core application. It risks breaking compatibility and require to "upgrade" all extensions at the same time.** | ||
| 58 | {{/info}} | ||
| 59 | |||
| 60 | == About Web Components == | ||
| 61 | |||
| 62 | Ideally we prefer standards. And therefore the Web components standards is very interesting. | ||
| 63 | |||
| 64 | Now as stated on the [[Vue page on web components>>https://vuejs.org/guide/extras/web-components.html#web-components-vs-vue-components]], web components do not provide all the features that a framework like Vue provides | ||
| 65 | |||
| 66 | {{info}} | ||
| 67 | 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: | ||
| 68 | |||
| 69 | * A declarative and efficient templating system; | ||
| 70 | * A reactive state management system that facilitates cross-component logic extraction and reuse; | ||
| 71 | * 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>>url:https://web.dev/vitals/]]. 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. | ||
| 72 | |||
| 73 | Vue's component model is designed with these needs in mind as a coherent system. | ||
| 74 | |||
| 75 | |||
| 76 | {{/info}} | ||
| 77 | |||
| 78 | (% class="wikigeneratedid" %) | ||
| 79 | One approach could be to choose a framework build on top of web components ([[) >>https://www.sencha.com/blog/web-components-best-web-components-framework/]]. We would need to research more these frameworks, which would still be "non standard" as the features describe before are not existing in standards. | ||
| 80 | |||
| 81 | * [[https:~~/~~/lit.dev/>>https://lit.dev/]] | ||
| 82 | * [[https:~~/~~/minze.dev/>>https://minze.dev/]] | ||
| 83 | * [[https:~~/~~/www.sencha.com/blog/web-components-best-web-components-framework/>>https://www.sencha.com/blog/web-components-best-web-components-framework/]] | ||
| 84 | * [[https:~~/~~/github.com/microsoft/fast (Microsoft)>>https://github.com/microsoft/fast]] | ||
| 85 | * [[https:~~/~~/hybrids.js.org/#/>>https://hybrids.js.org/#/]] | ||
| 86 | |||
| 87 | |||
| 88 | (% class="wikigeneratedid" %) | ||
| 89 | 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. | ||
| 90 | |||
| 91 | (% class="wikigeneratedid" %) | ||
| 92 | For that we need to research web components UI libraries: | ||
| 93 | |||
| 94 | * [[https:~~/~~/opensource.adobe.com/spectrum-web-components/ (Adobe)>>https://opensource.adobe.com/spectrum-web-components/]] with community project for vue: [[https:~~/~~/github.com/toshusai/spectrum-vue>>https://github.com/toshusai/spectrum-vue]] | ||
| 95 | * [[https:~~/~~/github.com/microsoft/fast (>>https://github.com/microsoft/fast]]fast-element, Microsoft) with documentation on how to use in Vue: [[https:~~/~~/www.fast.design/docs/integrations/vue/>>https://www.fast.design/docs/integrations/vue/]] | ||
| 96 | * [[https:~~/~~/github.com/vanillawc>>https://github.com/vanillawc]] | ||
| 97 | * [[https:~~/~~/lit.dev/ (Lit Element)>>https://lit.dev/]] | ||
| 98 | * [[https:~~/~~/polymer-library.polymer-project.org/3.0/docs/devguide/feature-overview (Google)>>https://polymer-library.polymer-project.org/3.0/docs/devguide/feature-overview]] | ||
| 99 | |||
| 100 | (% class="wikigeneratedid" %) | ||
| 101 | 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. | ||
| 102 | |||
| 103 | = Design Systems & Component Libraries = | ||
| 104 | |||
| 105 | [[Design Systems & Components Libraries>>.DesignSystems]] | ||
| 106 | |||
| 107 | = Vue 3 = | ||
| 108 | |||
| 109 | == Documentation Generation == | ||
| 110 | |||
| 111 | * [[Documentation Generation>>.Vue3.DocumentationGeneration]] | ||
| 112 | |||
| 113 | == Options API vs Composition API == | ||
| 114 | |||
| 115 | * [[Options API vs Composition API>>.Vue3.OptionsAPIvsCompositionAPI]] | ||
| 116 | |||
| 117 | = Testing = | ||
| 118 | |||
| 119 | * [[Unit Test Libraries>>.Testing.UnitTestLibraries]] | ||
| 120 | * [[Functional Test Libraries>>.Testing.FunctionalTestLibraries]] | ||
| 121 | * [[Accessibility Test Libraries>>.Testing.AccessbilityTestingLibraries]] | ||
| 122 | |||
| 123 | = Code Style and Linting = | ||
| 124 | |||
| 125 | [[Code Style and Linting>>.CodeStyleAndLinting]] | ||
| 126 | |||
| 127 | = Accessibility = | ||
| 128 | |||
| 129 | * [[Vuetify accessibility info https:~~/~~/vuetifyjs.com/en/features/accessibility/>>https://vuetifyjs.com/en/features/accessibility/]] | ||
| 130 | * Radix has strong emphasis on accessibility | ||
| 131 | * BoostrapVue has strong focus on accessibility | ||
| 132 | * PrimeVue [[https:~~/~~/primevue.org/accessibility/>>https://primevue.org/accessibility/]] | ||
| 133 | * DSFR | ||
| 134 | |||
| 135 | {{info}} | ||
| 136 | **In the prototype being worked on, nothing special has been made yet. It will be very important to set accessibility coding rules early in the project and include testing tools right away.** | ||
| 137 | {{/info}} | ||
| 138 | |||
| 139 | = Packaging and Module Bundling Tools = | ||
| 140 | |||
| 141 | Article about standard Modules | ||
| 142 | |||
| 143 | [[https:~~/~~/philipwalton.com/articles/using-native-javascript-modules-in-production-today/>>https://philipwalton.com/articles/using-native-javascript-modules-in-production-today/]] | ||
| 144 | |||
| 145 | Module Bundler | ||
| 146 | |||
| 147 | * [[https:~~/~~/webpack.js.org/>>https://webpack.js.org/]] [[https:~~/~~/snipcart.com/blog/javascript-module-bundler>>https://snipcart.com/blog/javascript-module-bundler]] | ||
| 148 | ** 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>>url:https://github.com/webpack/webpack/issues/2933]], [[#8895>>url:https://github.com/webpack/webpack/issues/8895]], [[#8896>>url:https://github.com/webpack/webpack/issues/8896]])." in [[https:~~/~~/philipwalton.com/articles/using-native-javascript-modules-in-production-today/>>https://philipwalton.com/articles/using-native-javascript-modules-in-production-today/]] | ||
| 149 | * [[https:~~/~~/rollupjs.org/>>https://rollupjs.org/]] supports generating standard modules which is interesting | ||
| 150 | * [[https:~~/~~/vitejs.dev/>>https://vitejs.dev/]] (used by Vue3) (seems to be a frontend to rollup or esbuild on the build side) | ||
| 151 | * Alternatives: browserify, esbuild, parcel, rollup, vitejs (second most popular according to previous page) | ||
| 152 | * Comparisons | ||
| 153 | ** [[https:~~/~~/moiva.io/?npm=rollup+webpack (popularity)>>https://moiva.io/?npm=rollup+webpack]] | ||
| 154 | ** [[https:~~/~~/blog.openreplay.com/rollup-vs-webpack~~-~~-a-comparison/>>https://blog.openreplay.com/rollup-vs-webpack--a-comparison/]] | ||
| 155 | ** [[https:~~/~~/medium.com/js-imaginea/comparing-bundlers-webpack-rollup-parcel-f8f5dc609cfd>>https://medium.com/js-imaginea/comparing-bundlers-webpack-rollup-parcel-f8f5dc609cfd]] | ||
| 156 | |||
| 157 | {{info}} | ||
| 158 | **In the prototype being worked on, initially webpack was used, then rollup to use vitejs (which uses esbuild for compiling). In case of using native Javascript Modules for the development and the delivery, webpack is not the tool to use, as webpack is made to actually do the opposite. ViteJS is much more used by the Vue community (built by them) and in the end was much simpler to put in place. Integration with typescript worked well.** | ||
| 159 | {{/info}} | ||
| 160 | |||
| 161 | == Package Manager == | ||
| 162 | |||
| 163 | [[Package Manager>>.PackageManager]] | ||
| 164 | |||
| 165 | |||
| 166 | = Dependency Injection & Extension Manager = | ||
| 167 | |||
| 168 | [[Dependency Injection & Extension Manager>>Proposal.Cristal.Technologies.DependencyInjectionAndExtensionManager.WebHome]] | ||
| 169 | |||
| 170 | = Editor Technologies = | ||
| 171 | |||
| 172 | * [[Editors]] | ||
| 173 | |||
| 174 | {{info}} | ||
| 175 | **No experiment yet in the prototype on a "new editor". However it was possible in the prototype to load the XWiki editor in an IFRAME with all features of the editor available. This could help give us time to build a new editor.** | ||
| 176 | {{/info}} | ||
| 177 | |||
| 178 | = APIs = | ||
| 179 | |||
| 180 | TODO: list APIs of products we could integrate with | ||
| 181 | |||
| 182 | * Solid W3C API: [[https:~~/~~/github.com/solid/solid-spec/blob/master/api-rest.md>>https://github.com/solid/solid-spec/blob/master/api-rest.md]] | ||
| 183 | * NextCloud API: [[https:~~/~~/docs.nextcloud.com/server/latest/developer_manual/digging_deeper/rest_apis.html>>https://docs.nextcloud.com/server/latest/developer_manual/digging_deeper/rest_apis.html]] | ||
| 184 | * NextCloud WebDAV API: [[https:~~/~~/docs.nextcloud.com/server/latest/developer_manual/client_apis/WebDAV/index.html>>https://docs.nextcloud.com/server/latest/developer_manual/client_apis/WebDAV/index.html]] | ||
| 185 | * XWiki rest APIs: [[https:~~/~~/www.xwiki.org/xwiki/bin/view/Documentation/UserGuide/Features/XWikiRESTfulAPI>>xwiki:Documentation.UserGuide.Features.XWikiRESTfulAPI]] | ||
| 186 | |||
| 187 | = Testing = | ||
| 188 | |||
| 189 | TODO: testing tools | ||
| 190 | |||
| 191 | * [[https:~~/~~/vitest.dev/>>https://vitest.dev/]] mentioned on [[https:~~/~~/vuejs.org/guide/scaling-up/testing.html>>https://vuejs.org/guide/scaling-up/testing.html]] | ||
| 192 | * Need to ask cryptpad team about framework they decided to use | ||
| 193 | * WCAG testing: need to ask cryptpad and xwiki team about testing WCAG |
