おそらく、サイトコレクションの開発に携わったすべての人が、コンポーネントの単一の外観を維持するという問題に直面していました。サービスの数が数十から数百に達すると、ますます多くの独立したチームがそれらに取り組んでいるときに、設計とコードの非同期化が必然的に現れます。単一のコンポーネントベースを使用してこれに対処しようとしました。一連の投稿では、開発者とデザイナーの両方にとって便利で、さまざまなフレームワークに適しており、サービスが過負荷にならないUIキットを開発した経験について説明します。最初の部分では、カットの下で、フレームワークをどのように選択したかを説明します。
, , . . , .
, , . , . . , , , . — - .
. , , , , , , -. 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- ? .