Skip to content
Stéphane Brunner edited this page Mar 27, 2023 · 15 revisions

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 (=> using another lib for tooltip, no more popover).
  • Customize components with part and exportparts instead of putting CSS in the vars.yaml (should be tested).

For simplification, we should have the same layer tree (fewer changes) between mobile and desktop.

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

Ecosystem structural choice

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

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 (use nvm use to use the node version specified in the file .nvmrc)
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]);