Peut-être que tous ceux qui ont traité du développement d'une collection de sites ont été confrontés au problème du maintien d'un aspect unique des composants. Quand le nombre de services passe à des dizaines et à des centaines, alors que de plus en plus d'équipes indépendantes y travaillent, une désynchronisation dans la conception et le code apparaît forcément. Nous avons essayé de faire face à cela en utilisant une base à un seul composant. Dans une série d'articles, je parlerai de notre expérience dans le développement d'un kit d'interface utilisateur pratique pour les développeurs et les concepteurs, adapté à différents frameworks et ne surchargeant pas les services. Dans la première partie, sous la coupe, je vous raconte comment nous avons choisi les cadres.
, , . . , .
, , . , . . , , , . — - .
. , , , , , , -. 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- ? .