New architecture

C2C point of view

Main changes from the progressive vision:

• Create a new repository => don't have the old and new in the same repository, this is relay useful for new contributors.
• Replace Webpack by Vite.
• Remove Bootstrap.
• Customize components with part and exportparts instead of putting CSS in the vars.yaml (should be tested).

Not a real choice

Lib	Remarque
node
npm

Code structural choice

Lib	Remarque
TypeScrypt	Typing Checking. Real useful for library upgrade (if the library (like OpenLayers) supports it), can ve consider as minimal documentation.
OpenLayers	geo
Lit	web components
RxJS	Store
i18next	Internationalization
Transifex	Localization

Ecosystem structural choice

Lib	Remarque
Vite	Build, …
Storybook	example, base of UI test
Cypress	unit + e2e tests
GitHub	Code, CI, ... hosting

Non-Structural choice

Lib	Remarque
Font awesome	icons (investigate integration) css ot js
sanitize-html	secure query result before displaying it
simptip	tooltip
ESLint	lint
Chromatic	UI test (screenshot of the examples)
nvm	select node version
make	if needed
Prettier	code format
pre-commit	Format, check (simple) code on commit

Remarque

Map

What about projection and Cesium (3d) (who work only on EPSG:3857).

We can render a vector tile base layer with maplibre, but only on EPSG:3857.

Bootstrap

No more bootstrap, we currently use: tooltip, dropdown, modal, alert, popover and collapse.

• tooltip => simptip ?
• drop down, alert, collapse: not complicated
• no more popover

Web components

Use shadowdom. Customization with:

• CSS variable
• part and exportparts

=> standard way to customize the web components with shadow dom.

See: https://www.youtube.com/watch?v=Xt7blcyuw5s

Build

Webpack replaced by Vite, will me relay simpler

TypeScript

Not so complicated r.g.

function greet(person, date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}

=>

function greet(person: string, date: Date) { 
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}

Fontawesome

Used it in js:

import {library, icon} from '@fortawesome/fontawesome-svg-core';
import {faSolid} from '@fortawesome/free-solid-svg-icons';
import {html} from 'lit';;


library.add(faSolid);


html(icon({prefix: 'fas', iconName: 'camera'}).html[0]);