New architecture - camptocamp/ngeo GitHub Wiki
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]);