Kit UI terpadu dan sinkronisasi desain di Uchi.ru. Bagian 1

Mungkin setiap orang yang berurusan dengan pengembangan kumpulan situs menghadapi masalah mempertahankan tampilan tunggal komponen. Ketika jumlah layanan mencapai puluhan dan ratusan, ketika semakin banyak tim independen yang mengerjakannya, desinkronisasi dalam desain dan kode harus muncul. Kami mencoba mengatasinya dengan menggunakan basis komponen tunggal. Dalam serangkaian posting, saya akan berbicara tentang pengalaman kami dalam mengembangkan kit UI yang nyaman untuk pengembang dan desainer, cocok untuk berbagai kerangka kerja dan tidak membebani layanan. Di bagian pertama, di bawah potongan, saya memberi tahu Anda bagaimana kami memilih kerangka kerja.





, , . . , .





, , . , . . , , , . โ€” - .





. , , , , , , -. 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- ? .








All Articles