Perhaps everyone who has dealt with the development of a site collection faced the problem of maintaining a single look of components. When the number of services goes to tens and hundreds, when more and more independent teams are working on them, desynchronization in design and code appears necessarily. We tried to cope with this using a single component base. In a series of posts, I will talk about our experience in developing a UI kit that is convenient for both developers and designers, suitable for different frameworks and not overloading services. In the first part, under the cut, I tell you how we chose the 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- ? .