Halo semuanya. Untuk mengantisipasi dimulainya kursus "Pengembang JavaScript Fullstack", kami telah menyiapkan terjemahan materi yang menarik untuk Anda.
TL; DR: Pengembangan web sulit terlepas dari apakah Anda membuat komponen Anda sendiri, menggunakan sistem desain, mengimplementasikan dukungan untuk berbagai browser, menyediakan aksesibilitas atau menambahkan dependensi pihak ketiga. Lion berusaha untuk membuat hidup Anda lebih mudah dengan mengambil penerapan komponen berfitur lengkap, terjangkau, produktif, dan non-spesifik. Lihat repositori ing-bank / singa .Beberapa dari Anda mungkin sudah tahu bahwa ING memiliki sejarah panjang dan kaya dalam membuat komponen web, dari perpustakaan Polymer ke LitElement baru-baru ini.Ingin menyegarkan ingatan Anda ? Komponen web adalah seperangkat standar peramban yang memungkinkan kita untuk menulis komponen asli, dapat digunakan kembali, dienkapsulasi, dan modular.Standar komponen web akhirnya menjadi lebih kuat, dan saat ini ada banyak cara untuk menerapkan dan menggunakan komponen web, seperti: Elemen Sudut , Stensil , Vue , Svelte dan banyak lagi lainnya. Dan dengan rilis Chromium Edge, menjadi jelas bahwa sekarang semua browser utama akan mendukung komponen web di luar kotak.Oleh karena itu, hari ini saya senang berbagi dengan Anda semua yang dibuka ING secara gratis di perpustakaan komponen web Lion!Kenapa singa
Bayangkan skenario fiksi berikut:Leah adalah pengembang dari Betatech, ia sedang mengerjakan aplikasi internal baru untuk perusahaan.Kerangka agnostik
Menemukan komponen tidak mudah dan hasilnya mungkin mengecewakan Anda.Leah menemukan komponen yang sempurna untuk tugasnya, tetapi, sayangnya, itu ditulis dalam kerangka JavaScript tertentu, jadi Anda tidak bisa mendapatkannya dan menggunakannya.Selain itu, perusahaan memiliki identitas visual mereka sendiri dan komponen penulisan ulang yang sudah sepenuhnya bergaya agar sesuai dengan identitas perusahaan mereka, kadang-kadang itu bisa berarti lebih banyak pekerjaan daripada gaya dari awal.Lea menemukan komponen yang menawarkan semua fungsi yang diperlukan, tetapi tidak sesuai dengan identitas Betatechs.Adaptasi fungsional
Setelah Anda menemukan komponen yang ideal, di beberapa titik Anda mungkin menemukan bahwa komponen tidak membawa beban fungsional spesifik yang Anda butuhkan.Lea memutuskan untuk menyalin kode komponen yang ditemukan dan mengimplementasikan fungsinya sendiri, dan sebagai hasilnya, sekarang Anda harus mendukung seluruh komponen, yang menempatkan beban tambahan pada proyek.Ketersediaan
Komponen Anda harus dapat diakses oleh pengguna mana pun. Aksesibilitas tidak mudah, tetapi itu perlu, terlebih lagi, masalah aksesibilitas bisa sulit untuk diperbaiki pada tahap selanjutnya tanpa menggunakan perubahan kritis, oleh karena itu sangat penting untuk memastikan aksesibilitas dari awal.Selama operasi, Lea menemukan masalah dengan ketersediaan komponen yang ia temukan di Internet. Dia tidak dapat memperbaikinya dalam kode, oleh karena itu dia meminta penulis komponen untuk membantunya. Tetapi mereka menjawab bahwa mereka tidak dapat membantu dengan apa pun, karena mereka tidak ingin mengubah apa pun.
Atau
Leah menulis komponennya sendiri, tetapi masalah aksesibilitas sulit untuk diperbaiki karena cara dia awalnya menulis struktur HTML, dan koreksi akan memerlukan perubahan kritis.Meringkaskan
Tidakkah menurut Anda cerita Leah relevan secara langsung?Ini membahas beberapa masalah umum dalam pengembangan web modern:- Menemukan dan menambahkan dependensi bukanlah tugas yang mudah;
- Memilih komponen karena penampilannya bukan ide yang baik;
- Penyesuaian perilaku atau gaya terkadang sulit dipertahankan;
- Jika paket tersebut populer, ini tidak berarti bahwa paket tersebut memiliki ketersediaan atau kinerja yang baik.
Apa yang bisa dilakukan untuk menyelesaikan masalah ini?- Bayangkan Anda memiliki komponen yang tugas utamanya adalah menyediakan fungsionalitas, dan desain sesuai dengan kebijaksanaan Anda.
- Bayangkan komponen ini memiliki ketersediaan dan kinerja yang sangat baik.
- Bayangkan komponen-komponen ini dapat diperluas dan fleksibel.
Sekarang berhentilah bermimpi dan perhatikan Singa.Apa itu Singa?
Kami ingin mempromosikan web - satu komponen sekaligus.Lion adalah perpustakaan label putih open-source yang tidak bergantung pada kerangka kerja dan dapat menjadi dasar sistem desain perusahaan Anda. Konsistensi dalam penampilan dan fungsionalitas adalah tugas yang sulit dan kami berharap bahwa dengan Lion kami dapat membuat pekerjaan Anda lebih mudah.label putih
Lion adalah paket white-label dasar komponen web. Ini berarti bahwa komponen memiliki gaya minimal, tetapi semua fungsi dasar ada. Produk white label sering dirancang untuk memberi pengguna lain kemampuan untuk menyesuaikan identitas visual komponen dengan diri mereka sendiri. Ini hebat, karena itu berarti bahwa setiap orang dapat menggunakan fungsi dasar dari komponen kami menggunakan branding atau sistem desain mereka sendiri, karena, yang mengejutkan, tidak semua orang menyukai warna oranye.Itulah yang kami lakukan di ING. Komponen web kami sendiri memperluas komponen Lion dan menerapkan identitas ING visual kami, yang merupakan lapisan tipis di atas Lion.Lihatlah demo Lion. Terlihat sangat sederhana, bukan? Sekarang bandingkan dengan Lion bersamaan dengan ing-web:
Fokus utama
Lion dikembangkan dengan fokus pada penggunaan global dan usabilitas ulang. Sebagai akibatnya, fitur-fitur berikut telah ditambahkan dari awal:- Reuse - komponen kami dirancang untuk didistribusikan dan digunakan secara global;
- Aksesibilitas - komponen kami dirancang agar dapat diakses oleh semua;
- Produktivitas - Komponen kami harus kecil, produktif, dan cepat.
Semua fitur ini memungkinkan kami untuk memperluas komponen kami secara global dan menemukan saling pengertian saat mengerjakannya. Ini memastikan bahwa setiap orang di ING memiliki set blok bangunan yang solid untuk membangun aplikasi mereka dan memulai dengan cepat.Pelajaran yang dipetik
ING mulai menggunakan komponen web sangat awal, dan Lion bukan perpustakaan komponen pertama yang kami buat. Karena itu, Anda mungkin bertanya-tanya bagaimana komponen ini berbeda dari generasi sebelumnya.Singa dibangun dari bawah ke atas untuk menyediakan aksesibilitas dan ekstensibilitas, karena kami tahu bahwa hampir mustahil untuk menambahkan hal-hal ini pada tahap pengembangan selanjutnya. Saya ingin menyoroti beberapa pelajaran yang kami pelajari saat membuat Lion:- Tidak semuanya harus menjadi komponen web, lebih baik menggunakan JavaScript biasa untuk menambahkan fungsionalitas tertentu;
- Tetap sedekat mungkin dengan elemen HTML asli;
- Mengusahakan aksesibilitas sejak awal;
- Tidak semuanya harus berada dalam bayangan DOM, ini sangat penting untuk hubungan aria dan aksesibilitas;
- Komponen UI rumit.
« -, .»
Erik Kroes
Lion!
Lion dapat membantu Anda menerapkan sistem desain Anda dengan memberikan kerangka kerja label-putih, fungsional, terjangkau, dan produktif untuk pustaka komponen Anda. Yang Anda butuhkan hanyalah menambahkan desain Anda sendiri! Karena itu, jika perusahaan Anda ingin mensistematisasikan sistem desain Anda, Lion akan menjadi awal yang baik!Selain itu, Anda dapat menggunakan Lion untuk membuat versi komponen web dari sistem desain favorit Anda, seperti: Bulma , Bootstrap , Material , Bolt , Argon , Tailwind .Selain itu, semakin banyak pengguna dan kontributor Lion, semakin stabil basisnya, yang akan memengaruhi setiap orang yang menggunakan Lion.Berkontribusi pada pengembangan Lion!
Pada saat penulisan, Lion masih dalam versi beta. Kami ingin mendapatkan tanggapan Anda sebelum kami sampai ke rilis stabil, jadi jika Anda menyukai open source dan ingin membantu Lion, Anda dapat melakukan ini:- Menciptakan dan menutup masalah;
- Mengerjakan komponen yang sama sekali baru (mulai dengan membahas masalah);
- Memperbaiki dokumentasi;
- ... kontribusi apa pun penting! Bahkan koreksi kesalahan ketik dalam dokumentasi
Jangan ragu untuk membuka masalah di github untuk mengirim umpan balik atau pertanyaan yang mungkin Anda miliki. Anda juga dapat menemukan kami di saluran Slack Polymer#lion .Anda dapat bergabung dengan Slack Polymer melalui tautan .Ekspansi Komponen
Anda dapat menggunakan Lion sebagai basis untuk menerapkan sistem desain Anda sendiri.Mari kita lihat bagaimana kisah Lea terjadi jika dia memilih Lion.Untuk memulai, instal semua yang Anda butuhkan:npm i lit-element @lion/tabs
Buat komponen lea-tabsdengan menggunakan kembali fungsionalitas Lion. Ini memungkinkan Leah untuk mendapatkan semua muatan fungsional dan aksesibilitas yang akan diperlukan untuk mengimplementasikan komponen tabnya sendiri.import { css } from 'lit-element';
import { LionTabs } from '@lion/tabs';
export class LeaTabs extends LionTabs {
static get styles() {
return [
super.styles,
css`
`
];
}
connectedCallback() {
super.connectedCallback();
this._setupFeature();
}
_setupFeature() {
}
}
customElements.define('lea-tabs', LeaTabs);
Lea juga ingin dapat mendesain tab dan panel-panel sesuai dengan identitas visual Betatechs. Untuk melakukan ini, dia menciptakan komponen lea-tab-panel dan lea-tab , yang dapat dia gaya sesuai keinginannya dan akhirnya memasukkan komponen lea-tabs di dalamnya . Anda dapat melihat bagaimana Lea melakukan ini dalam contoh di bawah ini.import { LitElement, html, css } from 'lit-element';
export class LeaTab extends LitElement {
static get styles() {
return css``;
}
render() {
return html`
<slot></slot>
`;
}
}
customElements.define('lea-tab', LeaTab);
Sempurna! Sekarang Lea dapat menggunakan komponen tabssebagai berikut:<lea-tabs>
<lea-tab slot="tab">Info</lea-tab>
<lea-tab-panel slot="panel">
Info page with lots of information about us.
</lea-tab-panel>
<lea-tab slot="tab">Work</lea-tab>
<lea-tab-panel slot="panel">
Work page that showcases our work.
</lea-tab-panel>
</lea-tabs>
Nah, sekarang komponen Lea sudah siap, saatnya menulis beberapa dokumentasi. Anda dapat melihat halaman langsung dokumentasi Lea . lea-tabsAnda dapat melihat kode lengkapnya di GitHub .PS: Harap perhatikan bahwa Lea sekarang bertanggung jawab untuk memperbarui dokumentasi lea-tabs, dan perubahan pada dokumentasi Lion akan secara otomatis tercermin dalam dokumentasi Lea.Mengapa open source?Pustaka komponen sangat diminati. Dengan memberikan akses ke kode sumber komponen kami yang dapat diperluas, kami membantu Anda melakukan apa yang Anda butuhkan, sambil mendapatkan semua manfaat dari komunitas open-source. Selain itu, setiap kontribusi yang diberikan kepada Lion secara langsung memengaruhi dan menguntungkan setiap sistem desain yang menggunakannya (termasuk di web) pada skala global. Ini berarti bahwa kami mendapatkan yang terbaik dari kedua dunia, membantu orang dengan komponen kami dan mendapatkan masukan berharga dari komunitas!Lihatlah repositori kami ! Dan jika Anda ingin tetap up to date, pastikan untuk mulai melacak dan / atau membuat tanda bintang - kami belum memiliki twitter (belum), namun Anda dapat berlangganan kepada saya: halo, saya Thomas Olmer .Tapi bukan itu saja!
Membuat aplikasi itu sulit, dan kadang-kadang Anda memerlukan sedikit lebih dari satu komponen tertentu, misalnya, hal-hal seperti: validasi, formulir, overlay, pelokalan, dll. Tapi jangan takut, Lion akan datang untuk menyelamatkan!Anda dapat menemukan informasi tentang mereka di dokumentasi kami , dan kami akan memberi tahu Anda lebih banyak tentang sistem Lion tambahan di posting blog berikut.Ucapan Terima Kasih
Akhirnya, kami ingin mengakhiri artikel ini dengan ucapan terima kasih:ING, karena memberi kami kesempatan untuk mengerjakan proyek ini dan membuatnya sangat keren bersama dengan komunitas open-source.Untuk semua orang yang bekerja di Lion (terutama tim Lion), termasuk semua kontributor (39, dan itu bukan batasnya!).Dan terima kasih yang terakhir, tetapi yang tidak kalah pentingnya: Pascal Shilp karena telah mengubah coretan saya menjadi cerita yang menarik.Kami mengundang Anda untuk bergabung dengan pelajaran gratis kami tentang topik: "SvelteJs. Mulai cepat . "