Stencil.js bilan veb-komponentlar - bu 2018 yilda qayta ishlatiladigan UI elementlarini yaratishning eng yaxshi usulimi?

Turli xil loyihalar va jamoalar o'rtasida baham ko'rilishi mumkin bo'lgan universal, ramka va kutubxona agnostik interfeysi elementlarini yaratish qobiliyati, biz zamonaviy jabhadagi ramka chayqovi deb atagan narsalarning hech bo'lmaganda eng yaxshisi bo'lib tuyuladi. Men veb-dastur ishlab chiqaruvchisi sifatida ish boshlaganimdan beri, qayta ishlatiladigan kod bilan mavhumlashtirilishi mumkin bo'lgan bir qator elementlar va o'zaro ta'sirlarning guvohi bo'ldim, ammo ramkalar va ularni amalga oshirish tafsilotlari o'rtasidagi farq juda qiyin bo'lib qoldi ... Veb-tarkibiy qismlar javobga o'xshaydi.

Kutib turing, veb-tarkibiy qismlar nima?

Veb-komponentlar - bu sizning qayta ishlatiladigan foydalanuvchi interfeysi tarkibiy qismlarini yaratishingizga imkon beruvchi turli xil funktsiyalar to'plamidir - ularning funktsiyalari sizning kodingizning boshqa qismlaridan ajratib olingan - va ularni veb-ilovalaringizda ishlatish.
https://developer.mozilla.org/en-US/docs/Web/Web_Componentlar

Dunyo bo'ylab millionlab odamlar har kuni ushbu texnologiyadan foydalanadilar. O'tgan yil ikkinchi eng mashhur veb-sayt, youtube.com veb-tarkibiy qismlarga asoslangan. Hatto Chrome brauzerida Tarix yorlig'i veb-komponentlar kutubxonasi Polymer yordamida yozilgan! Vikipediyada aytilishicha, veb-komponentlar birinchi marta Alex Rassell tomonidan Fronteers Conference 2011 da taqdim etilgan.

Tegishli texnologiyalar haqida bir necha so'z

Soya DOM

Encapsülasyon, ehtimol qayta foydalanish mumkin bo'lgan elementlarni yaratish haqida o'ylashda muvaffaqiyat kalitidir - veb-komponentlarning g'oyasini shu qadar jozibador qiladigan narsa - belgilash, uslublash va amalga oshirish tafsilotlarini hujjatning qolgan qismidan ajratib olish. Shadow DOM API hiyla ishlatadi. Bu brauzerning API-si bo'lib, DOM elementi ichida kengaytirilgan pastki qismni yaratishga imkon beradi.

Siz soyali DOM tugunlariga xuddi soyasiz tugunlar singari ta'sir ko'rsatishingiz mumkin - masalan, bolalarni qo'shish yoki atributlarni o'rnatish, element.style.foo-dan foydalanib individual tugunlarni uslublash yoki element. Farq shundaki, DOM soyasidagi kodlarning birortasi ham qulay kapsülasyona imkon beradigan tashqi narsalarga ta'sir qilmaydi.
https://developer.mozilla.org/en-US/docs/Web/Web_Component/Using_shadow_DOM

Soya DOM ikkita rejimga ega: ochiq va yopiq. Shadow DOM-ning yopiq rejimi komponent mualliflariga js orqali ularning tarkibiy qismlarining soyasini qanday boshqarishni boshqarish imkonini beradi. Soya DOM haqida ko'proq ma'lumotni bu erda o'qishingiz mumkin.

Styling

Shadow DOM-dagi uslublar ko'lami kengayib, tarqalib ketmaydi. Global CSS boshqa html elementlari kabi Soya DOM elementlariga ham ta'sir qiladi - xususiyatlar merosiga ko'ra, shuning uchun tanlangan shrift-oilani tanlangan tarkibiy qism meros qilib oladi. Uslublarni * -ga o'rnatish Shadow DOM-ning ildiz elementiga ham ta'sir qiladi, chunki u barcha elementlarga ta'sir qiladi. Agar tarkibiy qismingiz foydalanuvchilariga komponentning uslubini tanlashiga ruxsat berishni xohlasangiz, siz CSS xususiyatlaridan foydalanishingiz kerak.

Maxsus elementlar

Shaxsiy elementlar yordamida biz html teglarini yaratamiz yoki mavjud teglar va tarkibiy qismlarni yaxshilaymiz. Ushbu texnologiya tufayli veb-komponentlar oddiy html teglariga o'xshaydi, masalan .

Veb-komponentlar bilan ishlash uchun kutubxonalar

Albatta, vanilla js yordamida veb-komponentlarni yaratish mumkin (biz kerakli texnologiyalarni qo'llab-quvvatlamagan brauzerlar uchun polifilizatsiya haqida eslashimiz kerak), lekin oddiy js bilan tarkibiy qismlarni yozish qiyin bo'lishi mumkin va ko'plab qozon kodini talab qiladi. Bu erda veb-tarkibiy kutubxonalar yordam beradi. Siz ularga kerak emassiz, lekin tayyor veb-tarkibiy qismlarni yaratishga harakat qilish, ulardan birini ishlatishda kamroq bo'ladi.

Polimer

Bu Google tomonidan yaratilgan va keng foydalaniladigan eng mashhur Web Component kutubxonasidir. Komponentlarni yaratish uchun oddiy API beradi. Bu yil yuboriladigan 3.0 versiyasida lit-html-dan foydalaniladi, bu js-da html-ni yaratishning yaxshi usuli bo'lib tuyuladi.

Skate.js

Skate.js veb-komponentlar standartlari bo'yicha funktsional abstraktsiya deb da'vo qilmoqda. Qiziqarli tomoni shundaki, u sizga bir nechta ko'rish kutubxonalaridan, shu jumladan lit-html-dan foydalanish, preaktatsiya qilish va hatto reaktsiya qilish imkonini beradi.

Stencil.js

Stencil.js - bu Ionic jamoasi tomonidan yaratilgan nisbatan yangi Web Component kompilyatoridir. U veb-ishlab chiqarishning zamonaviy zamonaviy kontseptsiyalarini (Virtual DOM, asinx-renderlash, reaktiv voqealar oqimi va TSX) oladi va standart, standart veb-komponentlar kodini yaratadi.

Stencil.js yordamida veb-komponentlarni yaratish

Men sizga Stencil.js yordamida veb-komponentlarni yaratish haqida biroz ko'proq aytib bermoqchiman. Nima uchun men ushbu kutubxonani tanladim? Asosan Typcript-ning qo'llab-quvvatlanishi va mening burchak va reaktiv tajribamdan tanish bo'lgan reaktiv naqshlardan foydalanish va, albatta, stencil-not-a-frame yondoshuvi. Stencil.js shunchaki veb-komponentlarning kompilyatori bo'lishini da'vo qilmoqda va yaratilgan komponentlar vanilya js - kichkina va tezkor, qo'shimcha ravishda ularni