Talvez todos que lidaram com o desenvolvimento de um conjunto de sites tenham enfrentado o problema de manter uma única aparência dos componentes. Quando o número de serviços chega a dezenas e centenas, quando mais e mais equipes independentes estão trabalhando neles, a dessincronização no design e no código aparece necessariamente. Tentamos lidar com isso usando uma única base de componente. Em uma série de posts, falarei sobre nossa experiência no desenvolvimento de um kit de interface do usuário que é conveniente para desenvolvedores e designers, adequado para diferentes estruturas e não sobrecarrega serviços. Na primeira parte, abaixo do corte, conto como escolhemos os frameworks.
, , . . , .
, , . , . . , , , . — - .
. , , , , , , -. UI-.
,
UI-, , , . , , , Figma — , -. , (color-primary
) , .
UI- . — .
UI- - Stencil, Figma. , , .
, . , . , .
, . , (React). - . , UI-.
- . , WebComponents.dev, , . -3: lit-element + lit-html Stencil, Hybrids — . — 2020 — :
|
/ |
||
lit-element + lit-html |
Stencil |
Hybrids |
|
JavaScript ES3+ |
+ |
+ ( ) |
+ |
JavaScript ES6+ |
+ |
+ |
- |
TypeScript |
+ |
+ |
+ |
JSX |
+ |
+ |
+ |
React |
- |
+ ( ) |
- |
Vue |
- |
+ ( ) |
- |
|
+ |
+ |
+ |
IE11 |
+ |
+ ( ) |
- |
|
+ |
+ |
+ |
/ |
- |
+ |
- |
CSR |
+ |
+ |
+ |
SSR |
+ ( . ) |
+ |
- |
CSS |
- |
+ |
- |
|
+ |
+ |
+ |
|
+ |
+ |
+ |
React/Vue?
« React» « Vue» . , - React Vue .
, lit-element + lit-html Stencil . , , CSS , . Stencil.
— . , , — .
, , React, Vue. , React 2,5 , — 5 . , Stencil . , , . URL — , Stencil 3 . , , .
Figma
- Figma — — . , , . — , . , , - .
, . , , , .
, . , . , , , ? , , .
, . - (RC), ( - ), , , .
UI- Storybook. . , «» - , , . , , , . UI-.
, UI-. , ? ? - UI- ? .