스크립트
00:00:00Ini adalah Asterix, versi ShadCN dari Meta, yang dibangun di atas solusi penataan gaya kami, StyleX.
00:00:05Ini sepenuhnya dapat diberi tema, berlisensi MIT, dan Meta mengatakan bahwa mereka telah menyempurnakannya secara internal
00:00:09selama 8 tahun di 13.000 aplikasi. Jika Anda adalah seseorang yang tidak menyukai Tailwind atau ShadCN,
00:00:15yang satu ini pasti akan menarik minat Anda, dan bahkan jika Anda menyukai ShadCN,
00:00:18mari kita lihat apakah ada alasan untuk beralih.
00:00:24Saya sejujurnya sangat terkesan dengan banyaknya komponen dan fitur yang diluncurkan bersamanya,
00:00:29ini menunjukkan bahwa mereka telah menggunakannya secara internal selama bertahun-tahun.
00:00:32Ada lebih dari 150 komponen yang mudah diakses yang dibangun di atas React, tetapi alih-alih melihat daftar ini,
00:00:37cara terbaik untuk menunjukkannya kepada Anda mungkin melalui templat kami, karena templat tersebut memperlihatkan semuanya digunakan bersamaan.
00:00:41Kami memiliki tabel grup di sini dengan bagian status dan menu tarik-turun.
00:00:44Kami memiliki formulir pembayaran di mana Anda dapat melihat semua elemen formulir individual yang Anda butuhkan,
00:00:48bersama dengan status formulir untuk hal-hal seperti pesan kesalahan.
00:00:50Anda dapat membangun papan Kanban seret-dan-lepas dengannya, atau membangun IDE dengan tab dan bilah sisi.
00:00:56Situs e-commerce, semuanya sudah diurus di sini.
00:00:58Dan bahkan situs obrolan AI, itu juga bisa dilakukan, lengkap dengan komponen markdown untuk merender respons yang Anda dapatkan kembali.
00:01:03Ini juga memiliki tombol berlangganan.
00:01:05Tunggu, itu YouTube, tapi silakan klik berlangganan jika Anda menyukai apa yang kami lakukan di sini, itu sangat membantu.
00:01:10Seperti yang Anda lihat, Asterix benar-benar dapat memenuhi hampir semua kebutuhan komponen Anda,
00:01:14dan semua komponen ini sebenarnya berasal dari pustaka inti tersebut.
00:01:16Jadi menggunakannya sama saja dengan menggunakan komponen apa pun, dan Anda dapat memeriksa dokumentasi untuk semua opsi yang dimiliki sebuah komponen.
00:01:23Contohnya, tombol bisa memiliki ikon, bisa memiliki konten akhir, ukuran, varian, sekali lagi, hampir semua yang Anda butuhkan.
00:01:30Tapi sekarang mari kita bahas mengapa Anda benar-benar harus menggunakan ini.
00:01:32Argumen Meta adalah bahwa sistem desain selalu memaksa Anda ke dalam dua pilihan yang buruk.
00:01:36Pilihan pertama adalah Anda mengadopsi sistem perusahaan besar seperti Material UI, dan sekarang semua aplikasi Anda terlihat seperti produk Google dengan kemampuan kustomisasi yang terbatas.
00:01:44Pilihan kedua adalah Anda mengambil sesuatu seperti ShadCN, Anda menyalin dan menempel komponen ke dalam proyek Anda, tetapi sekarang Anda memiliki kodenya,
00:01:50jadi setiap proyek memiliki fork komponennya sendiri, dan perbaikan upstream menjadi sulit diikuti karena sekarang tugas Anda untuk memperbarui semua ini.
00:01:57Beberapa orang tidak suka bertanggung jawab atas semua kode komponen itu, jadi Asterix mengklaim mengakhiri pertukaran itu.
00:02:03Dengan Asterix, sistem mengontrol perilaku, aksesibilitas, dan kualitas, dan tema mengontrol tampilannya,
00:02:08yang disesuaikan pada tingkat token untuk hal-hal seperti warna, tipe, radius, gerak, semua yang Anda butuhkan tanpa pernah menulis ulang komponen.
00:02:14Jadi di sini saya memiliki aplikasi yang saya buat menggunakan beberapa templat dari situs web Asterix,
00:02:18dan ini sebenarnya adalah tampilan default dari semua komponen jika Anda tidak memberi mereka tema, jadi ini memang dilengkapi dengan tema dasar.
00:02:24Namun, untuk membuat tema kita sendiri, kita bisa menggunakan fungsi define theme,
00:02:27dan ini sebenarnya dilengkapi dengan beberapa fitur keren.
00:02:29Yang pertama adalah opsi warna.
00:02:31Terkadang Anda tahu apa warna merek utama Anda seharusnya, dalam kasus saya adalah hijau cerah,
00:02:35tetapi Anda tidak ingin membuat warna latar belakang, warna aksen, Anda tidak benar-benar ingin memikirkan semua yang individual itu.
00:02:40Jadi dengan Asterix di sini, jika saya menekan simpan pada ini, Anda dapat melihatnya sebenarnya menghasilkan itu untuk saya,
00:02:44jadi saya mendapatkan titik awal yang sangat baik hanya berdasarkan satu warna heks.
00:02:48Setelah warna, kami kemudian juga memiliki opsi tipografi.
00:02:50Ini cukup jelas, kami menggunakan into di sini, tetapi kemudian kami juga memiliki skala.
00:02:54Jadi ukuran dasar untuk teks saya adalah 14,
00:02:57tetapi kemudian akan memiliki rasio 1,2.
00:02:59Apa artinya ini adalah setiap langkah naik yang kita ambil dalam ukuran teks, jadi jika saya pergi untuk ukuran teks besar,
00:03:03itu akan mengambil dasar dan mengalikannya dengan 1,2, dan itu akan menjadi ukuran teks individual kita,
00:03:08jadi itu menghasilkan semua token itu untuk kita.
00:03:10Setelah ini, kita kemudian dapat mengontrol radius.
00:03:12Yang satu ini cukup jelas.
00:03:14Jika saya ingin tombol kita bulat, saya bisa mengatur ini ke angka tinggi,
00:03:17dan jika saya ingin semuanya memiliki sudut tajam, saya bisa mengatur ini ke nol.
00:03:21Setelah ini, kita kemudian memiliki opsi pembantu terakhir, yaitu gerak,
00:03:23dan ini pada dasarnya hanya mengontrol kecepatan animasi untuk hal-hal seperti melayang dan menekan.
00:03:27Jadi Anda bisa mendapatkan hasil yang sangat jauh dengan tema kustom hanya dengan mendefinisikan beberapa variabel di sini,
00:03:31dan itu menghasilkan semua token untuk Anda.
00:03:34Tapi bagaimana jika Anda tidak menyukai beberapa token yang telah dipilihnya?
00:03:36Contohnya, jika saya ingin mengubah warna yang telah dipilih untuk tombol sekunder saya di sini,
00:03:40kita bisa masuk ke bagian token di sini,
00:03:42dan hal yang sangat keren tentang tema ini dan juga bagian token ini adalah bahwa semuanya aman tipe,
00:03:47jadi ia tahu token yang benar-benar bisa kita definisikan,
00:03:49dan inilah mengapa lebih baik melakukannya dalam file JavaScript atau file TypeScript alih-alih CSS,
00:03:53karena kita bisa mendapatkan keamanan tipe itu.
00:03:55Warna latar belakang tombol sekunder itu didefinisikan oleh token warna netral,
00:03:58jadi yang perlu saya lakukan hanyalah mengatur ini ke array di mana salah satunya adalah mode terang dan yang lainnya adalah mode gelap.
00:04:03Bagi saya, itu hanya akan menjadi warna yang sama.
00:04:05Jika saya tekan simpan sekarang, Anda dapat melihatnya telah mengubah warna tombol sekunder saya,
00:04:08tetapi kita memiliki masalah di mana teks ini sebenarnya tidak terlihat benar,
00:04:11karena saya sekarang telah mengubah warnanya.
00:04:12Jadi yang ingin saya lakukan adalah mengubah warna teks itu menjadi hitam,
00:04:15tetapi masalahnya adalah itu sebenarnya didefinisikan oleh variabel warna teks primer,
00:04:18jadi jika saya pergi dan menyimpan ini,
00:04:19Anda dapat melihatnya mengubah banyak teks di layar saya menjadi hitam,
00:04:22alih-alih hanya yang ada di tombol seperti yang saya inginkan.
00:04:24Jadi alih-alih mengubah token itu secara global,
00:04:26sebagai gantinya yang bisa saya lakukan adalah hanya mengubahnya untuk komponen tersebut.
00:04:28Ini adalah tempat kita bisa menggunakan bagian komponen.
00:04:30Saya katakan kita ingin mengubah tombol kita di sini.
00:04:32Saya menyediakan apa variannya, dalam kasus saya sekunder,
00:04:35kemudian saya bisa menaruh variabel CSS apa pun yang saya inginkan di sini.
00:04:37Jadi saya hanya ingin warnanya menjadi hitam.
00:04:39Jadi sekarang jika saya simpan ini,
00:04:40kita dapat melihat tombol sekunder kita memiliki warna teks hitam itu,
00:04:42tetapi tidak ada hal lain yang berubah sekarang.
00:04:44Itu terbatas hanya pada komponen ini.
00:04:46Hal keren lainnya tentang bagian komponen ini
00:04:47adalah Anda kemudian juga dapat mendefinisikan varian kustom Anda sendiri.
00:04:50Jadi katakan saya ingin varian tombol bernama tombol saya.
00:04:52Saya bisa mengatur ini di sini dengan warna hitam dan warna latar belakang merah,
00:04:56dan kemudian ketika saya pergi untuk menggunakan tombol saya,
00:04:57itu semua aman tipe,
00:04:58dan ia tahu bahwa tombol saya adalah varian yang valid.
00:05:00Anda dapat melihat di sini,
00:05:01kita sekarang memiliki tombol berlangganan.
00:05:02Jadi Anda benar-benar bisa melakukan banyak hal hanya dari konfigurasi tema itu,
00:05:05sepenuhnya menyesuaikan setiap bagian dari setiap komponen,
00:05:07atau hanya gaya keseluruhan aplikasi Anda.
00:05:09Dan bahkan ada beberapa tema yang sudah dibuat sebelumnya
00:05:10jika Anda ingin memulai dari basis yang baik.
00:05:12Anda dapat melihat ada banyak kustomisasi dalam file-file ini,
00:05:15dan Anda bahkan dapat memperluas tema
00:05:16sehingga Anda dapat membangun di atas yang sudah ada
00:05:18alih-alih membuat yang benar-benar baru setiap saat.
00:05:20Semua tema ini kemudian dapat dibuat untuk produksi juga.
00:05:23Jadi itu berfungsi di aplikasi yang dirender sisi server seperti Next.js.
00:05:26Itu akan secara statis menghasilkan semua CSS dan JavaScript yang diperlukan.
00:05:28Salah satu manfaat besar memiliki satu tempat seperti ini untuk tema Anda
00:05:31adalah bahwa itu membantu menegakkan konsistensi merek Anda.
00:05:34Ini sebenarnya argumen yang pernah saya lihat terhadap Tailwind,
00:05:36di mana karena pengembang dapat menulis kelas apa pun,
00:05:38atau AI dapat menulis apa pun,
00:05:40terkadang Anda berakhir dengan komponen yang memiliki sedikit pergeseran gaya
00:05:42karena seseorang memutuskan untuk menggunakan kelas Tailwind mereka sendiri.
00:05:45Ketika Anda memiliki tema yang ditetapkan seperti ini,
00:05:46lebih mudah untuk melacaknya karena semuanya terjadi di satu tempat.
00:05:49Anda dapat dengan mudah melihat perbedaan jika Anda ingin melihat apa yang berubah di tema Anda,
00:05:53dan AI tidak perlu memikirkan kelas Tailwind yang dapat digunakannya,
00:05:56ia hanya menggunakan token dan komponen yang disediakan.
00:05:58Meskipun saya akan mengatakan Anda dapat mencapai sesuatu yang cukup serupa
00:06:00dengan Tailwind dan ShadCN,
00:06:01di mana Anda mendefinisikan semuanya sebagai token,
00:06:03meskipun itu tidak aman tipe,
00:06:05jadi akan jauh lebih sulit untuk ditegakkan.
00:06:06Sekarang selain tema,
00:06:07Anda juga dapat hanya menata komponen secara langsung
00:06:09jika Anda ingin membuat perubahan,
00:06:10dan sebenarnya ada beberapa cara untuk melakukan ini.
00:06:12Cara yang direkomendasikan mungkin menggunakan X-Style,
00:06:14karena itu menggunakan StyleX,
00:06:16yang telah dibangun di atasnya,
00:06:17dan Meta jelas membuatnya.
00:06:19Anda juga dapat menggunakan pustaka lain seperti Tailwind,
00:06:21Panda, dan berbagai hal seperti itu,
00:06:22atau hanya CSS biasa dengan nama kelas.
00:06:24Jadi Anda dapat melihat di sini,
00:06:25saya memiliki penggantian yang didefinisikan dalam StyleX.
00:06:27Saya memiliki beberapa gaya yang disebut tombol Primer,
00:06:29di mana saya ingin warnanya menjadi putih,
00:06:30dan warna latar belakangnya menjadi merah.
00:06:32Jika saya sekarang hanya ingin mengubah satu tombol di halaman ini,
00:06:34yang perlu saya lakukan hanyalah memberinya prop X-Style,
00:06:36dan meneruskan gaya StyleX saya kepadanya,
00:06:38dan jika saya tekan simpan pada ini,
00:06:39Anda dapat melihat tombol Primer saya sekarang menyesuaikan dengan gaya tersebut.
00:06:42Jadi inilah cara Anda menata sesuatu,
00:06:43jika Anda hanya ingin itu menjadi satu kali saja,
00:06:45dan Anda tidak ingin membuat perubahan ini
00:06:46untuk semua tombol Primer.
00:06:47Anda dapat melihat di dokumentasi
00:06:48semua cara berbeda yang Anda miliki untuk menata komponen.
00:06:51Ini sangat fleksibel,
00:06:52tetapi yang sangat keren yang ingin saya tunjukkan
00:06:53adalah dukungan Tailwind ini.
00:06:55Mereka sebenarnya telah melakukan ini
00:06:56dengan apa yang mereka sebut jembatan Tailwind.
00:06:58Jadi ini memungkinkan Anda untuk terus menggunakan Tailwind,
00:07:00tetapi ia memetakan semua token desain
00:07:01dari tema Anda yang Anda atur di Asterix
00:07:03ke kelas utilitas Tailwind itu.
00:07:06Jadi hal-hal seperti warna Anda,
00:07:07radius,
00:07:07ukuran font,
00:07:08semuanya didefinisikan oleh tema dari Asterix,
00:07:10tetapi kemudian Tailwind dapat menggunakan itu
00:07:11dengan nama kelas Tailwind.
00:07:13Bagi saya sendiri,
00:07:13saya mungkin akan terus menggunakan StyleX
00:07:15karena itulah yang menjadi dasar pembangunan Asterix,
00:07:17dan saya hanya berpikir mencampur pustaka tersebut
00:07:18akan lebih membingungkan daripada manfaatnya.
00:07:20Namun beralih dari penataan gaya,
00:07:21fitur hebat lainnya dari Asterix
00:07:22adalah seberapa baik ia bekerja dengan AI.
00:07:24Sebenarnya ada CLI Asterix,
00:07:26tetapi itu sebagian besar tidak dimaksudkan untuk penggunaan manusia,
00:07:28dan itu sebenarnya dimaksudkan untuk AI.
00:07:29Itu berisi hal-hal seperti perintah
00:07:30untuk mengambil semua dokumentasi
00:07:31pada setiap komponen,
00:07:33memuatnya ke dalam konteks
00:07:34hanya untuk membantu agen Anda bekerja dengan komponen tersebut,
00:07:36dan itu bahkan dapat mengisi agents.md Anda
00:07:38hanya untuk memberikan panduan lebih lanjut.
00:07:40Saya sebenarnya menemukan ketika saya menggunakan ini
00:07:41di semua demo saya
00:07:42bahwa itu melakukan pekerjaan yang sangat baik dalam hal ini,
00:07:43dan saya menemukan model seperti Fable,
00:07:45GPT,
00:07:45semuanya dapat bekerja dengan Asterix,
00:07:47meskipun itu adalah pustaka yang relatif baru.
00:07:49Secara keseluruhan,
00:07:49Anda dapat melihat Asterix hanyalah
00:07:51sistem desain yang sangat kaya fitur,
00:07:52dan saya hanya membahas dasar-dasarnya.
00:07:54Saya sangat merekomendasikan untuk memeriksa dokumentasinya
00:07:55karena itu benar-benar tertulis dengan baik,
00:07:57dan sebagian besar komponen ini
00:07:58bahkan memiliki bagian praktik terbaik,
00:08:00yang akan sangat membantu bagi LLM,
00:08:02dan ada juga taman bermain
00:08:03jika Anda hanya ingin mencoba ini
00:08:04tanpa benar-benar memiliki proyek.
00:08:06Apakah Anda akan menggunakan sesuatu seperti ini?
00:08:07Beri tahu saya di kolom komentar di bawah,
00:08:08tunggu, berlangganan,
00:08:09dan seperti biasa,
00:08:10sampai jumpa di video berikutnya.