Apakah perpustakaan komponen dan patutkah anda membina perpustakaan anda sendiri?-tutorial js-php.cn

Sebelum terjun ke dalam membina pustaka komponen anda sendiri dari awal, mari kita lihat pelbagai jenis perpustakaan komponen di luar sana, dan faedah serta kelemahan penggunaannya.

? Saya ingin memberi jeritan khas kepada stephband (Mastodon, Bluesky) untuk membaca pruf dan memberikan maklum balas.

Sila ambil perhatian bahawa ini adalah X-Post dari tapak saya. Kandungannya sebahagian besarnya sama, tetapi siaran asal mempunyai coretan interaktif dan video yang ditinggalkan dalam artikel ini.

Bagaimana jika tiada album muzik?

Saya peminat tegar muzik. Salah satu hobi kegemaran saya ialah merakam dan mendengarnya dari hadapan ke belakang. Album muzik berkonsepkan ringkas, ia merupakan set lagu yang dirakam oleh artis dan dianggap sebagai set lagu yang lengkap dan koheren.

Tetapi bagaimana jika muzik yang dirakam tidak wujud? Daripada meletakkan lagu pada pita, CD atau mp3 (atau FLAC jika anda cenderung seperti itu), anda hanya boleh mendengar album jika artis memainkannya secara langsung untuk anda. Anda perlu pergi ke kumpulan itu, minta mereka menyediakan peralatan mereka dan minta mereka memainkan album dari hadapan ke belakang. Mereka perlu memainkannya dengan cara yang sama setiap kali untuk memastikan semua orang mempunyai pengalaman yang sama.

Retakan akan mula kelihatan. Ini bukan cara yang cekap untuk memastikan sesiapa yang berminat dengan muzik kumpulan itu boleh mendengarnya. Jika Taylor Swift memainkan lagunya Fortnight secara peribadi untuk setiap orang yang mendengarnya di Spotify, ia akan mengambil masa selama 3,179 tahun. Dan itu tidak mengambil kira sebarang perjalanan kapal terbang. Artis akan bosan, mungkin juga cuai, membawa kepada pengalaman yang kurang untuk pendengar mereka.

Jadi, bagaimanakah ini berkaitan dengan pembangunan web? Setiap kali anda membina kawalan UI, anda perlu memastikan ia berfungsi, teguh dan boleh diakses. Anda akan bosan jika anda terus menulis semula UI yang sama setiap kali. Kesilapan akan berlalu, membawa kepada pengalaman yang lebih buruk bagi pengguna akhir anda.

Sedikit tentang saya

Saya telah menjadi pembangun web selama hampir 10 tahun, dan saya telah menulis ratusan komponen sendiri, selalunya corak UI yang sama berkali-kali. Saya telah menggunakan berpuluh-puluh perpustakaan komponen dan telah membina papan pemuka pentadbir, perpustakaan komponen, aplikasi mudah alih, blog, pemalam figma, sambungan VSCode dan banyak lagi. Artikel ini akan menjadi penyulingan tentang tempat saya melihat peranan komponen, perpustakaan dan sama ada pembangun harus menulis sendiri.

Apakah komponen?

Apabila membina antara muka pengguna, kami tidak menulis semua penanda HTML dari awal setiap masa. Kami menulis UI kami menggunakan komponen— blok binaan boleh guna semula yang merangkumi corak UI biasa. Menulis komponen membolehkan anda menggunakannya beberapa kali dalam satu projek atau malah dalam projek bebas.

Di sini saya telah menulis komponen pembilang, saya telah menulisnya sekali dan menggunakannya di beberapa tempat pada halaman.

<body>
  <div class="wrapper">
    <counter-button></counter-button>
    <counter-button></counter-button>
    <counter-button></counter-button>
  </div>

  <script type="module">
    import { LitElement, html } from 'lit';

    class CounterButton extends LitElement {
      constructor() {
        super();
        this.count = 0;
      }

      static properties = {
        count: { type: Number }
      };

      _increment() {
        this.count++;
      }

      render() {
        return html`
          <button @click=${this._increment}>Count: ${this.count}</button>
        `;
      }
    }

    customElements.define('counter-button', CounterButton);
  </script>
</body>

Salin selepas log masuk

Kami pencipta tutorial suka menunjukkan kaunter seperti mereka sudah ketinggalan zaman, tetapi aplikasi dunia sebenar akan mengandungi berpuluh-puluh corak UI berbeza yang ditulis sebagai komponen.

Dalam artikel ini, saya akan mengumpulkan peraturan CSS yang menyediakan penggayaan untuk corak UI tertentu di bawah payung komponen. Definisi boleh menjadi keruh bergantung pada siapa yang anda tanya.

Apakah perpustakaan komponen?

Bukan semua komponen adalah kendiri. Masuk akal untuk banyak komponen dikumpulkan dalam satu pakej, dipanggil perpustakaan komponen.

Jika anda mahu tapak anda mempunyai rupa atau rasa yang khusus, anda boleh menggunakan pustaka komponen. Terdapat perpustakaan komponen yang:

menawarkan komponen yang mematuhi spesifikasi reka bentuk.
menawarkan berbilang penyelesaian untuk corak UI tertentu.
bekerja dengan rantai alat khusus

Tetapi ia datang dalam bentuk dan saiz yang berbeza. Takrifan yang saya gunakan semasa mentakrifkan pustaka komponen ialah seperti berikut:

Pustaka komponen ialah satu set komponen boleh guna semula yang sepadu dalam utiliti atau penampilannya (atau kedua-duanya). Pustaka komponen yang hebat akan membantu pembangun mencapai keperluan UI mereka dengan cekap, sambil menawarkan pengalaman teladan untuk pengguna akhir.

Apakah perbezaan antara perpustakaan komponen dan sistem reka bentuk

Saya bercakap tentang garis panduan dan sistem reka bentuk kemudian dalam artikel ini, jadi saya akan mengambil sedikit masa untuk menyahkekaburannya. Sukar untuk melihat di mana satu berakhir, satu bermula atau satu menggantikan yang lain.

Sistem Reka Bentuk

Saya melihat sistem reka bentuk sebagai spesifikasi untuk rupa, rasa dan tingkah laku sesuatu. Sistem reka bentuk boleh merangkumi produk, jenama atau syarikat untuk memastikan konsistensi merentas set pengalaman. Sistem reka bentuk yang komprehensif akan menentukan segala-galanya daripada keluarga fon, saiz fon, saiz jarak, corak UI dan garis panduan salin.

Beberapa sistem reka bentuk yang paling terkenal termasuk:

Reka Bentuk Bahan (Google)
Reka Bentuk Pangkalan (Uber)
Sistem Reka Bentuk Kilat (Salesforce)

Walaupun banyak sistem reka bentuk khusus untuk syarikat, terdapat sistem reka bentuk, seperti Reka Bentuk Bahan, yang digunakan oleh pasukan di seluruh dunia untuk memendekkan cara mereka untuk membina produk perasaan biasa. Anda mungkin telah menggunakan segelintir produk yang menggunakan prinsip Reka Bentuk Bahan tetapi ia pastinya tidak bebas daripada isu kebolehgunaan asas.

Perpustakaan Komponen

Bagi perpustakaan komponen, ia mungkin atau mungkin bukan pelaksanaan kod sistem reka bentuk. Jika anda bekerja untuk sebuah syarikat dengan sistem reka bentuk, kemungkinan perpustakaan komponen yang sepadan (jika ada), disepadukan rapat dengannya.

Sebagai contoh, Web Bahan Google ialah pelaksanaan komponen web Reka Bentuk Bahan. Web Asas dan Komponen Web Lightning juga merupakan sumber terbuka.

Sejarah ringkas perpustakaan komponen

Konsep komponen UI (atau widget) telah wujud sejak sekian lama. Jika anda ingin melihat nilai antara muka pengguna retro muzium, ambil beberapa popcorn dan tonton video "semua widget" ini selama 2+ jam dari 1974-1990.

Dari awal 2000-an, kami akan mula melihat perpustakaan komponen dibuat untuk membantu pembangun membina untuk web. Landskap pelayar web pada masa itu tidak dapat dikenali daripada apa yang kita lihat sekarang. Versi Internet Explorer menyimpang sepenuhnya daripada spesifikasi, yang amat bermasalah memandangkan bahagian pasaran yang besar yang dimiliki IE pada masa itu. Internet Explorer 6 terkenal kerana sukar untuk dibangunkan. Terutamanya disebabkan oleh pelaksanaan model kotak yang salah dan kekurangan sokongan CSS2.

? TIL, Internet Explorer menyokong "mod kebiasaan" yang membenarkan pembangun menulis HTML dan CSS bukan standard untuk menenangkan penyemak imbas lama yang tidak menyokong piawaian.

Nasib baik, apabila saya memulakan pembangunan web dengan bersungguh-sungguh, banyak isu ini telah diselesaikan. Pada ketika ini, masih terdapat segelintir perpustakaan yang menjadikan penulisan antara muka yang kompleks dengan sokongan merentas penyemak imbas sedikit lebih mudah. UI jQuery, perpustakaan komponen pertama yang saya gunakan, menyokong akordion dan widget lain. Tetapi penyemak imbas sentiasa berkembang, dan kami kini mempunyai cara asli untuk melaksanakan corak akordion ini menggunakan butiran dan elemen ringkasan, tersedia dalam semua penyemak imbas pada tahun 2020. Dengan elemen ini, anda boleh membuat akordion interaktif tanpa JavaScript.

Bedakan ini dengan 2009, dan elemen ini belum dilaksanakan dalam mana-mana penyemak imbas. Ia memerlukan sedikit JS untuk bekerja. Lihat kod sumber jQuery UI v1.7 dan CTRL+F "akordion" jika anda ingin melihat cara pembangun web melaksanakan akordion 15 tahun yang lalu.

Dalam beberapa dekad akan datang, keupayaan web berkembang. Peranti yang lebih berkuasa bermakna pelayar yang lebih berkuasa. Pelayar yang lebih berkuasa bermakna aplikasi web menjadi lebih bercita-cita tinggi. Pembangun bertindak balas dengan mencipta alatan untuk membantu kami membina aplikasi ini dengan membenarkan kami mencipta UI menggunakan blok binaan, iaitu model komponen. Kami melihat percambahan rangka kerja berasaskan komponen ini. Saya bercakap Angular, React dan Vue. Setiap satu dengan ekosistem perpustakaan komponennya sendiri yang kaya.

Ada hujah yang munasabah untuk dibuat bahawa terdapat pembetulan yang berlebihan dan bahawa landskap bahagian hadapan kini terlalu tepu dengan alatan yang terlalu berkuasa untuk keperluan kebanyakan orang, tetapi jangan pergi ke sana.

Versi ini dilanjutkan dengan coretan interaktif pada siaran asal

Apakah yang menjadikan perpustakaan komponen yang baik?

Cabaran dengan membina pustaka komponen ialah ia bukan satu perjanjian selesai. Banyak perpustakaan paling popular telah wujud selama bertahun-tahun dan mempunyai banyak penyelidikan, maklum balas penggunaan dan sumbangan untuk membawa mereka ke tempat mereka berada sekarang.

Saya mendapati bahawa perpustakaan komponen yang baik selalunya mempunyai ciri-ciri berikut:

Ia memahami masalah pembangun sasarannya dan menyelesaikan masalah tersebut dengan baik
Ia mempunyai dokumentasi yang hebat
Ia memastikan pengalaman yang baik untuk pengguna akhir
Ia teguh dan memenuhi keperluan mod dan peranti input yang sesuai.

Sebaliknya, satu cara untuk membezakan sama ada pustaka komponen tidak bagus ialah jika ia tidak mempertimbangkan kebolehaksesan, mempunyai API yang tidak konsisten, mempunyai sedikit atau tiada pengawasan projek atau tidak mempunyai dokumentasi yang jelas dan konsisten.

Apakah faedah menggunakan perpustakaan komponen?

Kami tahu rupa pustaka komponen yang bagus, jadi mari lihat cara seseorang itu boleh menjadikan hidup anda lebih baik dan kehidupan pengguna anda.

Perpustakaan komponen menjimatkan masa anda

Jika anda menjalankan projek dengan tarikh akhir yang ketat, adalah penting untuk menjadi cekap. Tetapi kecekapan tidak sepatutnya melibatkan kos mencipta pengalaman web yang mantap. Menggunakan perpustakaan komponen membolehkan anda menghabiskan lebih sedikit masa mencipta semula roda dan lebih banyak masa memfokus pada butiran yang lebih halus.

Perpustakaan komponen menjadikan anda dan pengguna anda lebih gembira

Kami tidak bermotivasi oleh kerja yang berulang-ulang. Kami menikmati cabaran teknikal, dan menulis komponen yang sama sekali lagi bukanlah cabaran yang menyeronokkan. Kami telah pun bercakap tentang perkara yang berlaku apabila kami bosan dan membiarkan kesilapan berlalu.

Jika anda mahu melaksanakan komponen dialog dari awal, anda perlu:

Kendalikan penangkapan fokus dengan betul
Jadikan seluruh halaman lengai
Letakkan dialog dengan betul
Pastikan ia berfungsi dengan teknologi bantuan

Memerlukan usaha untuk mengingati dan melaksanakan perkara di atas, tetapi akibat daripada melakukan kesilapan boleh menyebabkan antara muka anda benar-benar tidak boleh digunakan, begitulah keadaannya jika anda tersalah mengendalikan fokus.

Dengan menggunakan perpustakaan komponen yang telah dibina dengan mengambil kira pengguna akhir, anda boleh mengelakkan risiko memperkenalkan pengalaman yang rosak, sambil menghabiskan lebih sedikit masa untuk membina semula komponen yang sama.

Perpustakaan komponen membawa kepada pengalaman yang konsisten

Jika anda bekerja untuk syarikat dengan beberapa aplikasi web yang berbeza, mereka biasanya akan mengikut satu set garis panduan. Garis panduan ini mungkin menentukan palet warna untuk digunakan, saiz tipografi anda atau cara elemen UI sepatutnya kelihatan dan berkelakuan.

Tetapi anda meningkatkan kemungkinan aplikasi anda menyimpang daripada panduan gaya jika anda menulis semula komponen. Dengan mempunyai perpustakaan komponen, anda boleh mengaudit UI komponen anda dengan lebih mudah mengikut garis panduan jenama supaya ia kelihatan hebat, di mana-mana sahaja ia digunakan.

Uber mempunyai beberapa apl berbeza yang berkongsi elemen antara muka pengguna yang sama. Saya hampir pasti bahawa mereka menggunakan pustaka komponen yang sama merentas apl ini. Dengan cara itu setiap apl baharu hampir dijamin untuk mematuhi garis panduan jenama.

What is a component library and should you build your own?

Apakah kelemahan menggunakan perpustakaan komponen pihak ketiga?

Faedah yang saya nyatakan di atas adalah tidak kira sama ada anda menggunakan pustaka komponen anda sendiri atau pihak ketiga. Jika anda atau pasukan anda telah memutuskan bahawa mereka tidak mahu membina perpustakaan dan sebaliknya bersandar pada pihak ketiga, maka perkara berikut patut dipertimbangkan.

Kunci masuk vendor

Dengan memilih pustaka komponen, anda memilih rakan kongsi yang akan memberi kesan besar kepada cara anda menulis kod bahagian hadapan anda dan cara antara muka anda akan kelihatan dan berkelakuan.

Impak yang pertama akan memberi impak yang besar kepada anda, dan yang kedua akan memberi impak yang besar kepada pengguna akhir anda. Menggunakan pustaka komponen mengunci anda ke dalam piawaian pustaka komponen itu.

Perpustakaan boleh memperkenalkan perubahan pecah besar-besaran dalam versi utama yang mungkin memerlukan masa pembangunan khusus, dan banyak ujian untuk memastikan tiada regresi serius diperkenalkan.

Beberapa tahun lalu saya menggunakan React Admin untuk membina papan pemuka pentadbir yang kompleks kepada bahagian dalaman. Perpustakaan ini menawarkan satu set komponen yang didedikasikan khusus untuk mengambil dan memaparkan data yang kompleks. Oleh kerana aplikasi kami pada masa itu sangat bergantung pada React Admin, peningkatan antara versi utama adalah mencabar, terutamanya kerana banyak alatan dalaman yang digunakan oleh React Admin telah ditukar kepada yang lain. Permukaan perubahan adalah besar, dan kami menghabiskan banyak masa untuk menaik taraf serta membenderakan isu yang kami nampak.

Saya tidak percaya bahawa membina penyelesaian kami sendiri akan menyelamatkan kami pada bila-bila masa dalam jangka panjang, tetapi kunci masuk penjual seperti ini patut dipertimbangkan, terutamanya sebelum menggunakan semua alat.

Kembung kod

Memang mengejutkan, perpustakaan dengan banyak komponen cenderung ditulis menggunakan banyak kod. Kod yang anda muat turun semasa memasang kebergantungan dan kod yang anda hantar kepada pengguna akhir anda.

Peralatan moden memudahkan untuk melakukan pengoptimuman himpunan seperti menggegarkan pokok untuk mengalih keluar kod yang tidak digunakan, tetapi tiada jaminan bahawa anda akan mengalih keluar semua kod yang pengguna anda tidak perlukan.

Melainkan anda mendalami perpustakaan yang anda gunakan, anda mungkin tidak mengetahui semua pakej berasingan yang mereka import. Anda boleh berakhir dengan beratus-ratus kebergantungan yang tidak perlu. Orang dalam komuniti e18e telah bekerja keras untuk mendedahkan masalah ini, sambil membetulkannya juga.

Banyak masalah ini juga boleh dikatakan tentang melancarkan pustaka komponen anda sendiri. Perbezaan terbesar ialah anda mempunyai pengawasan terhadap perpustakaan komponen anda. Anda boleh menentukan cara ia menyelesaikan masalah khusus anda dan anda mempunyai kawalan ke atas memperbaiki kelemahannya.

Pelbagai bentuk yang boleh diambil oleh perpustakaan komponen

Cadangan awal untuk World Wide Web adalah alat untuk meningkatkan komunikasi antara penyelidik di CERN. Cadangan itu menggariskan cara dokumen boleh dikongsi, dan dipautkan antara satu sama lain melalui penggunaan hiperteks. Ini adalah asas asas web, dan kami masih menggunakan tag untuk memautkan antara dokumen HTML lain di seluruh web.

Tetapi skop web telah berkembang sejak beberapa dekad yang lalu, dan penyemak imbas yang kami gunakan untuk menavigasi web telah menjadi haiwan mereka sendiri. Pelayar hari ini boleh mendayakan bentuk ekspresi kreatif yang berkuasa dan menjalankan perisian seperti asli.

Terdapat beratus-ratus penyelesaian yang berbeza di luar sana, beberapa tujuan umum, yang lain hiper-niche, tetapi mencari alat yang sesuai untuk projek anda yang seterusnya memerlukan proses keputusan yang rumit yang mungkin kelihatan seperti ini.

Ini bukan senarai komprehensif SEMUA kes penggunaan atau jenis perpustakaan komponen, tetapi ia menggambarkan bagaimana perpustakaan komponen berbeza dari segi:

teknologi yang terlibat.
tahap abstraksi yang mereka tawarkan.
masalah yang mereka selesaikan.

Mari kita lihat beberapa jenis perpustakaan komponen yang paling biasa

? Nota sampingan ringkas: Jika anda berminat untuk membina pustaka komponen web anda sendiri, maka pertimbangkan untuk menyemak kursus saya Component Odyssey. Anda akan belajar cara membina dan menerbitkan pustaka komponen yang berfungsi dalam mana-mana rangka kerja bahagian hadapan.

Perpustakaan kelas utiliti / Panduan Gaya CSS

Bagi saya, Bootstrap adalah perkara pertama yang terlintas di fikiran. Pada masa itu, jika anda ingin memberikan tapak anda cat yang cepat, anda akan melepaskan pautan CDN ke fail CSS bootstrap dan segera mendapatkan rupa Bootstrap itu. Ia ada di mana-mana pada pertengahan tahun 2010.

Skop teknikal alat jenis ini terdiri daripada

Satu fail CSS (Pico)

kepada

Rantai alat untuk menjana kelas CSS berdasarkan konfigurasi anda (Tailwind)

Berpuluh-puluh alatan lain, seperti Open Props, muat di antaranya.

Perpustakaan komponen luar biasa

Jika anda sedang membina aplikasi web interaktif, anda mungkin hanya mahu mengambil set komponen yang kelihatan hebat dan berfungsi dengan baik. Terdapat banyak perpustakaan komponen luar biasa ini yang memberikan anda semua yang anda perlukan dan banyak lagi.

Tidak kira rangka kerja yang anda gunakan untuk menulis apl anda, kemungkinan besar terdapat satu set komponen yang kelihatan hebat untuk anda gunakan.

Satu lagi perpustakaan komponen yang hebat ialah Shoelace, yang menyediakan berdozen komponen interaktif sepenuhnya dan bergaya sepenuhnya.

Apa yang menjadikan perpustakaan seperti Shoelace sangat menarik ialah ia dibina menggunakan komponen web, cara penulisan komponen terbina dalam penyemak imbas. Membina UI anda dengan alatan seperti Shoelace, memberi anda manfaat tambahan untuk dapat menggunakannya merentas rangka kerja bahagian hadapan yang berbeza. Perkara yang pernah saya bincangkan pada masa lalu.

Berikut ialah komponen Tali Kasut yang sama digunakan dalam Vue dan React.

Komponen yang tidak digayakan

Bergantung pada spesifikasi projek anda, anda mungkin tidak mempunyai kemewahan menggunakan alat luar biasa. Spesifikasi reka bentuk anda mungkin sangat khusus.

Saya telah melihat pasukan melancarkan komponen pada tanda pertama geseran. Dan dalam satu kes pemilih data gulung tangan, membawa kepada pengalaman pengguna yang lebih teruk. Jika dilihat semula, menggunakan perpustakaan komponen yang tidak digayakan akan memberikan fleksibiliti pasukan dengan penampilan, sambil memastikan masa

Itulah sebabnya anda boleh mendapatkan perpustakaan di luar sana yang menawarkan komponen tidak digayakan sepenuhnya dengan cangkuk penggayaan yang fleksibel. Jika ia adalah perpustakaan yang baik, ia juga akan menjaga semua interaksi yang kompleks itu. Ia adalah situasi terbaik dari kedua-dua dunia.

Mudah untuk mengacaukan kotak pilihan jika anda ingin menolak cangkuk penggayaan yang disediakan oleh penyemak imbas, melainkan anda menguji dengan pelbagai peranti dan mod input.

Artikel asal mempunyai video yang menunjukkan saya berinteraksi dengan pelaksanaan kotak pilihan yang berbeza menggunakan pembaca skrin

Radix ialah contoh pustaka yang popular, tetapi ia dibina menggunakan React.

Contoh lain perpustakaan komponen seperti ini ialah Lion dan HeadlessUI.

Salin Perpustakaan Komponen Tampal

Sesetengah pembangun mungkin mahukan yang terbaik dari kedua-dua dunia. Mereka mungkin mahu komponen yang dibina oleh pustaka pihak ketiga yang dipercayai, di samping mempunyai kawalan penuh ke atas penanda, gaya dan kefungsian. Perpustakaan seperti ShadCN membenarkan aliran kerja seperti ini, dengan membenarkan pembangun menyalin dan menampal definisi komponen ke dalam projek mereka sendiri, dengan berkesan membenarkan mereka memiliki komponen tersebut.

Mengapa tidak ada satu perpustakaan komponen untuk memerintah kesemuanya?

Pada ketika ini, mungkin jelas mengapa tiada perpustakaan komponen tunggal sedemikian wujud. Kami telah melihat pandangan yang tidak menyeluruh pada kumpulan pustaka komponen yang berbeza.

Walau bagaimanapun, terdapat pergerakan untuk memperkenalkan "Sistem Reka Bentuk Global", konsep yang diterajui oleh Brad Frost.

Dalam pengumuman itu, Brad menggariskan bahawa dalam beratus-ratus projek yang pernah dia sertai, banyak kawalan UI berkelakuan (atau harus berkelakuan) sama merentas pelbagai projek ini, namun pembangun melaksanakan semula perkara yang sama dalam setiap projek. Ini telah membawa kepada banyak masa dan usaha yang terbuang, dan ketidakkonsistenan antara projek. Ini juga berkembang ke perpustakaan komponen sedia ada di luar sana. Anda akan melihat bahawa gelagat papan kekunci untuk kotak kombo dalam React Aria, berbeza dengan gelagat kotak kombo dalam ShadCN.

Artikel asal mempunyai video yang menunjukkan saya berinteraksi dengan pelaksanaan kotak kombo yang berbeza menggunakan papan kekunci

Brad Frost mencadangkan Sistem Reka Bentuk Global sebagai satu set komponen web yang harus diterima pakai oleh hampir mana-mana projek bahagian hadapan untuk memastikan garis asas kefungsian untuk kawalan yang belum tersedia dalam HTML.

Terdapat perbincangan sedang berlangsung dalam UI Terbuka untuk melihat bagaimana ini boleh mula terbentuk dalam beberapa tahun akan datang.

Sekiranya anda membina perpustakaan komponen anda sendiri?

Artikel ini telah menyelam secara meluas ke dalam perpustakaan komponen, dan dengan semua konteks itu, anda pasti akan bertanya kepada diri sendiri, apabila menatap halaman HTML kosong untuk projek besar anda yang seterusnya, sama ada untuk membina perpustakaan komponen anda sendiri atau menggunakan yang sedia ada.

Fikiran pertama saya ialah: Saya rasa anda tidak patut membina perpustakaan anda.

Secara amnya, saya lebih suka memilih pustaka yang diuji pertempuran. Terutamanya yang mempunyai:

Telah digunakan merentas beribu-ribu projek
Komuniti yang kuat, dalam Discord atau GitHub
Dokumentasi yang bagus
Tumpuan yang kuat pada kebolehaksesan
Bekerja dengan kekuatan rangka kerja yang dipilih

Paling penting daripada semua ini ialah menggunakan perpustakaan komponen meletakkan penjagaan ke dalam membina komponen yang boleh diakses.

Ambil kotak kombo sebagai contoh. Ia adalah input carian dan menu pilihan yang dicampur menjadi satu. Jika anda telah membina sendiri, anda mungkin melihatnya kelihatan baik, dan berfungsi dengan tetikus anda. Tetapi anda juga perlu mempertimbangkan:

Sokongan silang penyemak imbas
Gelagat tab dan fokus
Sokongan pembaca skrin
Kendalikan keadaan untuk memuatkan hasil carian tidak segerak

Konnor Rogers, yang melakukan kerja yang sangat baik dalam ruang komponen web + web, telah berkongsi kekecewaan yang tidak terkira banyaknya dengan pengalamannya membina kotak kombo yang boleh diakses. Berikut adalah satu tweet yang dikongsinya.

Sokongan pembaca skrin adalah sangat kompleks, dan bernilai senarai titik tumpunya sendiri. Untuk menyokong pembaca skrin, anda juga perlu mengendalikan:

wilayah langsung
kawalan interaktif
item terpilih
sokongan antara pembaca skrin yang berbeza

Sebagai nota sampingan, saya hanya mempunyai akses kepada Voiceover, bermakna sukar untuk saya menguji corak UI kompleks ini menggunakan pembaca skrin yang berbeza. Seperti pelayar, terdapat perbezaan antara pembaca skrin. Dalam artikel ini, Are We Live?, Scott O'Hara menerangkan cara terdapat perbezaan antara perbezaan dengan cara mereka melayan kawasan langsung.

Ini bermakna terpulang kepada anda, pembangun untuk memilih perpustakaan komponen yang boleh anda percayai telah dibangunkan dengan mengambil kira kebolehaksesan. Itulah sebabnya penting juga untuk memilih perpustakaan komponen yang mempunyai komuniti yang kuat. Adalah penting untuk dapat:

Lihat pepijat dan isu yang dibenderakan oleh orang lain untuk pustaka tertentu
Cadangkan (atau sumbangkan) penambahbaikan dan perubahan pada perpustakaan tersebut
Bincang idea dengan ahli komuniti dan bina hubungan kerja dengan ahli komuniti yang aktif atau penyelenggara sendiri

Akhir sekali, dan paling tidak, perpustakaan komponen yang hebat akan mempertimbangkan lebih daripada estetika komponennya. Untuk pustaka komponen yang direka untuk web, ia harus mencuba sebaik mungkin untuk:

patuhi Garis Panduan Kebolehcapaian Kandungan Web (WCAG)
pastikan komponen berfungsi merentas modaliti input yang berbeza (sentuh, papan kekunci, pembaca skrin)
pastikan bahawa komponen boleh digunakan untuk mereka yang mempunyai keperluan tambahan, seperti mereka yang mengalami gangguan vestibular, gangguan penglihatan atau patah tangan.

Membina perpustakaan komponen anda sendiri boleh menjadi perkara yang baik, sebenarnya

Jika saya tidak menakut-nakutkan anda daripada membina perpustakaan komponen, maka izinkan saya menyanggah diri saya sendiri dan terangkan mengapa ia boleh menjadi perkara yang sangat baik untuk membina perpustakaan anda sendiri.

Jika anda meluangkan masa untuk memberi perhatian dan perhatian dalam membina perpustakaan komponen, maka anda akan mendapati diri anda seorang pembangun yang lebih memahami platform penyemak imbas, amalan terbaik kebolehaksesan, amalan ujian dan banyak lagi.

Tetapi ia tidak berhenti di situ sahaja, terdapat beberapa sebab yang sangat baik untuk membina perpustakaan anda sendiri.

Sebagai permulaan, anda boleh membina sesuatu yang disesuaikan dengan keperluan anda dan mengelakkan beberapa kelebihan yang mungkin anda perolehi daripada pustaka komponen luar biasa. Terpulang kepada anda dan pasukan anda untuk memahami pengguna akhir anda, dan anda boleh membina sesuatu yang khusus untuk mereka.

Anda juga berpeluang untuk bereksperimen dengan pendekatan baru. Jika anda mempunyai masalah hiper-niche, mungkin tidak ada perpustakaan komponen di luar sana untuk menyelesaikan keperluan itu. Ia boleh menjadi perpustakaan komponen yang:

Memvisualisasikan data dengan cara tertentu
Mempunyai identiti visual yang tersendiri dan unik
Dibina di atas rangka kerja baharu

Itu memberi anda peluang untuk membina sesuatu yang disesuaikan dengan keperluan anda. Anda kemudiannya berpeluang untuk mengubah dan membetulkan perkara apabila keperluan anda berubah atau semasa anda memahami ruang masalah dengan lebih baik.

Yang penting, anda akan mengetahui lebih lanjut tentang web dengan berbuat demikian. Jika ini kali pertama anda membina pustaka komponen, ini boleh menjadi peluang untuk menyelam lebih mendalam mengenai spesifikasi penyemak imbas HTML, atau menyempurnakan pengetahuan kebolehcapaian web anda. Ini akan meningkatkan kebolehan anda sebagai pembangun web, yang akan memberi perkhidmatan terbaik kepada anda dalam mana-mana projek bahagian hadapan pada masa hadapan. Ia juga boleh membantu anda mendapatkan pekerjaan seterusnya.

Jadi sama ada anda perlu membina perpustakaan komponen bergantung pada matlamat akhir anda. Pertimbangkan soalan seperti:

Adakah saya mahu lebih memahami pelayar?
Adakah saya mahu membina sesuatu dengan cepat?
Adakah saya mahu menjadikannya boleh digunakan untuk seramai mungkin pengguna?
Adakah perpustakaan wujud yang menyelesaikan masalah semasa saya?

Bergantung pada jawapan anda, anda boleh membuat panggilan yang betul untuk projek anda.

Terima kasih kerana membaca! Jika anda berminat untuk membina perpustakaan komponen web anda sendiri, maka pertimbangkan untuk menyemak kursus saya Component Odyssey. Anda akan belajar cara membina dan menerbitkan pustaka komponen yang berfungsi dalam mana-mana rangka kerja bahagian hadapan.

Atas ialah kandungan terperinci Apakah perpustakaan komponen dan patutkah anda membina perpustakaan anda sendiri?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!