# Stanje in težave z komponentnimi paketi

**Mitja Belak, 12. 5. 2021**

Komponente knjižnjice imajo težave z našim stackom.

Razlogi: styled-components, Next.js, ReactJS v17

Idejno je ZOIS stack mišljen kot nekej kar je up-to-date z latest tehnologijami, zato uporablja hottest stuff in je to ena od stvari, ki je jaz ne bi spreminjal, kvečjem prilagajal.

#### Zakaj Next.js

Ker rabmo framework vsaj do te točke da se ne zafrkavamo z osnovnimi stvarmi kokr je routing + next nam automatsko daje caching in SSR, kar so dobre stvari za met v produkciji če maš odprt app na ven (SEO). Dodatno je dovolj extandable da se da velik stvari sconfat na roke če je treba oz. dodat.

Alternativa bi mogoče bla kvečjem Gatsby ampak to sem do zdaj vidu bolj v kontekstu nekih statičnih landing pageov bolj kokr za aplikacije. Alternative kokr napr https://neutrinojs.org/ so že tok meta da realno ne vem če bi se v to spuščal ker ni communityja.

#### Zakaj ReactJS v17

Ker gre React dalje in bo support za starejše Reacte počas droppan oz. obratno, večina knjižnjic prilagaja vse na novejši React, mislim da je dost samoumevno, da če začenjamo na frišno je bolje začet z novo verzijo.

#### Zakaj styled-components?

Ne poznam druge tok močne stvari trenutno na marketu. Styled jsx na primer je precej bolj primitiven od styled-componentsov.

#### Zakaj the hottest stuff?

Treba je ubrat nek kompomis med production-ready in cutting edge stvarmi da bo temelj stacka za prihodnost, če ne bomo stuck na obsolete stuffu in bo spet težava tko s kadrom kokr dolgčas pri delu z arhaičnimi stvari (zgubljen potencial za učenje).

SmartIS je odobril to obdobje za preučevanje novga stacka, kar je pametno čim bolj izkoristit in čim boljš začrtat pot za prihodnost.

## Težave s knjižnjicami:

#### FluentUI

- Težava z useLayoutEffect - komponente se morajo ovijat v useEffect + useState za uporabo
- Težava z styled-components - klase na serverju ne matchajo z klasami na clientu kar proizvaja errorje v konzoli

#### Semantic UI

- discontinued

#### BlueprintJs

- ni prilagojen na React17 in Strictmode, komponente javljajo errorje povezane s starimi metodami Reacta
- Less za styling

#### MaterialUI

- errorji @ekaterina (sorči pozabu kaj ga je matral)?

## Potencial za težave v prihodnosti s komponentnimi knjižnjicami

Vse imajo potencial za nadaljne težave v prihodnosti na teh točkah:

- če komponentno knjižnjico nehajo maintainat ali maintainence rata prepočasen
- če knjižnjica uporabi stare verzije Reacta
- če knjižnjica uporablja 3rd party stvari, na katere nimamo vpliva in breakajo app

## Razvoj lastnih primitivnih komponent

Za trenutno sliko bi potrebovali sledeč primitivne komponente:

- Button
- ButtonDropdown
- Modal
- Card
- NavMenu (Side menu)
- ProgressIndicator
- Autocomplete (Delno)
- Checkbox
- ColorPicker
- Input
- Radio
- Select
- Switch
- TagPicker

Večino ostalih bolj kompleksnih komponent smo že razvili sami.

Glede na razvoj dogodkov predlagam naslednje možnosti:

## Bootstrap

Uporabi se Bootstrap za primitivne komponente. Mislim, da vsebuje večino.
Obstajajo wrapper knjižnjice kot so:

- https://reactstrap.github.io/
- https://react-bootstrap.github.io/

Če gremo po tej poti je potrebno potestirat

Plusi:
- Vse že narejeno

Minusi:
- LESS za styling

## Posnemamo design iz XY design sistema

Vzamemo že narejen design iz design systemov. Večino komponent se da uspešno zgooglati kako editat default browser stile in jih zamenjati v relativno kratkem času.

Link: https://designsystemsrepo.com/design-systems/

Plusi:
- Največja možna stopnja prilagodljivosti za prihodnost
- ne rabimo LESS/SASS za stile

Minusi:
- Začetno delo

Primer sistema ki se ga da hitro posnemat: https://www.figma.com/file/7KD3TvGJJRRQXoHH29Xnll/Anvil---no-variants?node-id=271%3A1032