Vielleicht hatte jeder, der sich mit der Entwicklung einer Websitesammlung befasst hat, das Problem, ein einheitliches Erscheinungsbild der Komponenten beizubehalten. Wenn die Anzahl der Dienste auf zehn und Hunderte steigt und immer mehr unabhängige Teams daran arbeiten, erscheint zwangsläufig eine Desynchronisation in Design und Code. Wir haben versucht, dies mit einer Einzelkomponentenbasis zu bewältigen. In einer Reihe von Beiträgen werde ich über unsere Erfahrungen bei der Entwicklung eines UI-Kits sprechen, das sowohl für Entwickler als auch für Designer geeignet ist, für verschiedene Frameworks geeignet ist und die Dienste nicht überlastet. Im ersten Teil, unter dem Schnitt, erzähle ich Ihnen, wie wir die Frameworks ausgewählt haben.
, , . . , .
, , . , . . , , , . — - .
. , , , , , , -. 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- ? .