Smashing Podcast Episode 40 Dengan Mike Cavaliere: Apa Itu Chakra UI Untuk Bereaksi?

Episode ini telah didukung dengan baik oleh teman-teman terkasih kami di Wix yang dikenal memberi Anda kebebasan untuk membuat, mendesain, mengelola, dan mengembangkan keberadaan web Anda persis seperti yang Anda inginkan. Terima kasih!

Dalam episode ini, kita berbicara tentang Chakra UI. Apa itu dan bagaimana itu bisa membantu proyek React Anda? Drew McLellan berbicara dengan ahli Mike Cavaliere untuk mencari tahu.

Tampilkan Catatan

• Cakra UI
• Mike di Twitter
• Situs web pribadi Mike
• Buku Cut Into The Jamstack

Update mingguan

• Mendesain Dengan Kode: Pendekatan Modern Untuk Desain
  ditulis oleh Mikolaj Dobrucki
• Mengotomatiskan Pengujian Pembaca Layar Pada macOS Menggunakan VO Otomatis
  ditulis oleh Cameron Cundiff
• Bangkitnya Design Thinking Sebagai Strategi Pemecahan Masalah
  ditulis oleh Josh Singer
• Cara Menjalankan Audit UX Untuk Platform EdTech Utama
  ditulis oleh Mark Lankmilier
• Membuat Blog Multi-Penulis Dengan Next.js
  ditulis oleh Dom Habersack

Salinan

Drew McLellan: Dia adalah Insinyur Perangkat Lunak Senior untuk agensi bernama Echobind. Dia telah menulis kode selama dua dekade, dan menggunakan JavaScript sepanjang waktu. Dia menyukai Jamstack, dan buku barunya, Cut Into The Jamstack, mengajarkan pembaca cara membangun perangkat lunak sebagai aplikasi layanan dari awal. Kami tahu dia tahu jalannya di sekitar Jamstack, tapi tahukah Anda dia pernah tersesat di lorong selai kacang? Teman-temanku yang hebat, tolong sambut Mike Cavaliere. Hai, Mike. Apa kabar?

Mike Cavaliere: Saya benar-benar hebat hari ini.

Drew: Itu bagus untuk didengar. Saya ingin berbicara dengan Anda hari ini tentang sebuah proyek yang belum pernah saya dengar, entah bagaimana, sampai saya menemukannya di buku Jamstack Anda. Saya tidak yakin bagaimana saya melewatkannya karena tampaknya sudah matang dan didokumentasikan dengan baik dan nyata… Hanya proyek yang hebat. Saya berharap bahwa hari ini kita dapat membicarakannya, dan saya dapat mengejar ketinggalan untuk mengetahui apa yang seharusnya saya ketahui selama ini. Saya berbicara tentang Chakra UI, tentu saja. Katakan padaku, apa itu Chakra UI? Di ruang apa itu, dan masalah apa yang dipecahkannya untuk kita?

Mike: Chakra UI adalah kerangka kerja UI untuk React atau toolkit UI, saya kira mereka menyebutnya sebagai. Di tumpukan aplikasi apa pun, saat ini Anda tidak ingin membuat UI dari awal. Anda ingin mengambil beberapa toolkit. Itu telah terjadi untuk sementara waktu.

Mike: Chakra UI adalah pendekatan yang bagus pada toolkit React UI. Ada beberapa keuntungan untuk itu, tapi salah satunya adalah... Pertama, kuat. Itu berarti ia memiliki setiap elemen UI yang dapat Anda bayangkan. Itu punya sakelar. Ada pembungkus di sekitar kisi-kisi. Itu punya semua jenis hal membentuk elemen.

Mike: Itu dibuat sangat mudah dikomposisi, jadi semuanya menggunakan alat peraga gaya. Komponen Anda, sangat bagus saat dikeluarkan dari kotak. Anda dapat menjatuhkannya dan menggunakannya apa adanya. Tetapi jika Anda ingin membuat tweak, sangat mudah untuk melewatkan beberapa properti gaya. Mereka sepenuhnya dapat diakses. Aksesibilitas, yang dibicarakan semua orang tetapi selalu lupa untuk diterapkan atau perlu sedikit usaha untuk diterapkan, sudah terpasang untuk Anda.

Mike: Bukan hal yang aneh bagi saya untuk mengumpulkan sesuatu dengan Chakra UI dan mendapatkan skor Lighthouse yang sangat bagus. Sebenarnya, saya baru saja memeriksa situs web Cut Into The Jamstack hari ini, dan skor aksesibilitasnya sangat tinggi. Ini juga sangat penuh tema. Anda dapat mengatur konfigurasi tema dari awal. Hanya ada daftar panjang keuntungan untuk itu.

Mike: Itu membuatnya sangat cepat untuk berkembang, yang pada awalnya menarik saya untuk itu. Echobind, kami menggunakannya secara internal. Tapi bagi saya, saya tidak punya selera desain. Sedikit, tapi saya sama sekali bukan seorang desainer. Saya dapat mengambil komponen dari Chakra dan mengubah sedikit hal untuk membuatnya konsisten dan semuanya terlihat bagus di luar kotak. Anda dapat berkembang dengan cepat. Pengalaman pengembang sangat bagus. Ini luar biasa di banyak level.

Mike: Hal terakhir yang akan saya katakan sebelum saya terus mengoceh tentang hal itu. Tetapi ia juga memiliki banyak React Hooks yang merupakan pembantu untuk fungsionalitas yang sangat umum yang menyertai elemen-elemen ini yang Anda gunakan. Misalnya, pada mode gelap. Ada kait bawaan untuk menggunakan mode gelap yang lebih terang yang memungkinkan Anda beralih warna dalam tema dengan sangat mencolok.

Mike: Ada satu lagi untuk pengungkapan yang digunakan untuk mengubah hal-hal seperti modul. Yang selalu Anda butuhkan dalam keadaan hidup, mati. Tetapi Hook hanya menyederhanakannya bahkan lebih sehingga Anda dapat fokus pada hal-hal yang tidak dapat disimpulkan secara otomatis oleh kerangka kerja. Saya akan memotongnya di sana, karena itu banyak.

Drew: Itu sangat bagus. Supaya pemahaman saya benar, pertama-tama itu Shakra bukan Chakra? Sakra?

Mike: Saya tidak akan menjadi ahli dalam hal itu. Saya telah mengatakan Shakra hanya karena yoga. Tapi kita harus meminta para pendiri untuk memeriksa ulang.

Drew: Ini adalah sistem desain off-the-shelf yang dapat Anda gunakan untuk membangun UI untuk proyek Anda.

Mike: Ya.

Drew: Ini khusus untuk proyek React.

Mike: Ya. Ada proyek Chakra Vue di luar sana. Saya bukan orang Vue tapi saya tahu bahwa itu memang ada. Mungkin ada untuk frame lain juga, tapi saya sangat, sangat fokus pada React jadi saya menggunakan Chakra default React.

Drew: Ya. Saya sudah akrab dengan React di masa lalu. Saya telah menggunakan React ketika saya bekerja di Netlify. Sekarang saya melakukan semuanya di Vue. Itu adalah salah satu hal pertama yang saya lihat. Oh, apakah ada Vue? Ini terlihat bagus. Apakah ada versi Vue-nya? Saya menemukan versi Vue-nya dan sepertinya jauh di belakang. Saya pikir itu pada 0.9 atau sesuatu, daripada 1.6 atau apa pun versi React saat ini. Saya tidak yakin seberapa saat ini.

Drew: Kami memiliki kerangka kerja yang cukup ketinggalan zaman. Hal-hal seperti Foundation UI, Bootstrap, Bulma. Mereka sudah ada sejak lama dan mereka adalah generasi kerangka kerja sebelumnya, tampaknya. Kemudian kita punya beberapa pendekatan yang lebih modern. Saya rasa banyak pendengar akan akrab dengan Tailwind dan proyek Tailwind UI. Di mana Chakra UI berada di antara lanskap itu? Ini lebih dekat dengan sesuatu yang Tailwind mungkin… Pendekatan yang mungkin dilakukan tailwind. Apakah itu benar?

Mike: Saya pikir begitu. Memang, saya bermaksud untuk benar-benar menggali lebih dalam Tailwind hanya karena itu sangat populer sekarang. Tapi saya tidak bisa berbicara dengan cerdas tentang seluk beluk Tailwind itu sendiri dan bagaimana… Menurut saya, Chakra dan Tailwind adalah pendekatan alternatif. Anda ambil untuk satu, tidak keduanya pada saat yang sama, jelas.

Mike: Saya belum tahu apa kelebihan dan kekurangan keduanya. Saya baru saja terpikat dengan Chakra sehingga saya terus menggunakannya secara default. Saya seperti, “Oke, saya tahu ini dengan sangat baik sekarang. Aku menyukainya. Saya akan mempelajari yang lain nanti. ” Tapi Tailwind jelas, sangat populer. Saya pikir Tailwind memiliki kerangka dasar mereka dalam toolkit UI. Apakah itu adil?

Drew: Benar. Ya.

Mike: Oke. Ini mungkin akan lebih setara dengan toolkit UI Tailwind. Di beranda Chakra, mereka memiliki perbandingan mengapa Anda mungkin ingin menjangkau satu atau yang lain, tetapi saya tidak menginternalisasikannya.

Drew: Ya. Bagus. Seperti yang kami sebutkan, untuk proyek React dan cara yang memanifestasikan dirinya daripada beberapa sistem desain yang lebih tradisional ini yang memberi Anda banyak nama kelas untuk diletakkan di HTML Anda dan Anda harus menggunakan beberapa struktur HTML, letakkan kelas yang tepat di dia. Itulah cara Anda mendapatkan tampilan UI dalam proyek Anda. Dengan Chakra, karena didasarkan pada React, ini memberi Anda banyak komponen untuk setiap elemen tersebut. Anda cukup mengimpor ke proyek Anda. Komponen-komponen itu merangkum markup dan gaya mereka sendiri, bukan?

Mike: Ya. Anda sebenarnya tidak perlu menulis kelas menggunakan Chakra. saya belum. Saya bahkan tidak tahu apakah itu mungkin. Seluruh paradigma React adalah komposisi komponen dan properti. Enkapsulasi komponen berarti Anda melewatkan properti tertentu ke dalam komponen. Di Chakra, Anda memiliki gagasan tentang tema yang merupakan paradigma global. Ada tema default dan memiliki nilai untuk warna dan spasi dan unit tertentu untuk semua hal umum.

Mike: Anda dapat menyesuaikan tema itu. Ini menyesuaikannya secara global. Anda dapat menambahnya sesuai kebutuhan. Saat Anda memanggil komponen itu sendiri, misalnya, input teks. Sebuah komponen masukan. Itu akan memiliki warna default dan radius batas dan padding dan margin seperti yang ditentukan oleh tema. Ketika Anda ingin menatanya lebih jauh, jika Anda tidak ingin melakukannya secara global, misalnya, ketika saya menentukan margin bawah, saya melakukannya berdasarkan kasus per kasus. Saya tidak melakukannya di tingkat global karena itu dapat menyebabkan bencana. Anda hanya meneruskannya sebagai prompt.

Mike: Ada petunjuk pintasan. Jika saya memiliki komponen input, saya hanya mengatakan, MB sama, dan kemudian nilai dan itu akan menerapkan margin bawah. Atau mereka memiliki MX dan MY untuk vertikal dan horizontal. Atau Anda bisa menentukan M dan meneruskan string seperti yang Anda lakukan pada properti CSS margin. Tidak ada nama kelas. Itu semua nama kelas secara dinamis dan mengaburkannya dari pengguna.

Drew: Ya. Saya pikir di situlah perbandingan dengan Tailwind harus masuk. Karena cara Tailwind bekerja, itu memberi Anda banyak kelas. Jika Anda ingin meningkatkan margin, ada kelas yang dapat Anda gunakan untuk meningkatkan margin. Kedengarannya sebenarnya Anda mengambil yang sama ... Ini adalah implementasi yang berbeda, tetapi pendekatan yang sama tentang bagaimana arsitekturnya. Kami sebenarnya menggunakan alat peraga dan Anda memasukkan alat peraga untuk menyesuaikan hal-hal itu.

Drew: Seberapa mudah menyesuaikan desain? Apakah ini kasus hanya mampu mengubah warna dan margin dan padding dan membuatnya terlihat sedikit berbeda? Atau bisakah Anda benar-benar membuat tema dengan Chakra?

Mike: Oh, Anda dapat melakukan apa pun yang Anda inginkan. Itu bagus. Anda bisa bergaya di tingkat komponen atau tingkat tema. Itu hanya tergantung pada seberapa kreatif Anda ingin melakukannya. Saya telah berhasil mengambil beberapa komponen dan melakukan beberapa hal liar dengan mereka. Bagian dari apa yang membuatnya benar-benar bergaya adalah komponen ini cukup atomik.

Mike: Menggunakan contoh kotak teks lagi, jika Anda menginginkan kotak teks, komponen Anda hanya itu. Anda dapat menata segala sesuatu di sekitarnya atau Anda dapat menata kotak teks itu sendiri. Atau Anda dapat mengubah tema. Mengatur warna untuk mengubah citra semuanya secara global.

Mike: Saya sebenarnya men-tweet pencipta Chakra UI, Seg, mengatakan mereka harus menempatkan galeri di situs karena itu sangat bagus. Anda dapat membuat beberapa desain yang indah dengan itu. Mereka sangat bervariasi dan Anda mungkin tidak tahu di permukaan sana. Saya tidak tahu apakah UI Chakra memiliki informasi yang membuatnya jelas bahwa Anda menggunakan UI Chakra untuk situs Anda.

Mike: Saya telah melihat beberapa hal yang cukup bagus dengan itu. Tapi Anda bisa melakukan apa saja dengannya. Saya telah membuat situs web statis. Beranda Cut Into The Jamstack selesai dengan itu. Seperti salah satu contoh saja. Kami telah banyak menggunakannya di Echobind. Saya tidak ingat apakah kami pernah menggunakannya untuk echobind.com. Tapi yang pasti banyak situs klien kami. Kemudian aplikasi yang saya buat, JamShots, ini adalah aplikasi. Itu belum memiliki halaman pemasaran. Tapi itu semua hanya UI dan semua UI itu dibangun menggunakan Chakra.

Mike: Satu hal lagi saat saya memuji Chakra adalah, ada situs web lain yang sering saya gunakan akhir-akhir ini, dan saya gunakan di… Saya akan memperkenalkan ke dalam buku juga. Chakratemplates.net. Chakra-template.net. Ini adalah pola desain umum bahwa siapa pun yang berkontribusi adalah menemukan unit pahlawan atau unit harga. Mereka hanya perlu menyalin dan menempelkan kode Chakra.

Mike: Saya menggunakannya sepenuhnya untuk beranda buku karena itu menghemat banyak waktu saya dalam mengembangkannya. Ini seperti, oh, Anda memiliki model penetapan harga. Biarkan saya menyalin dan menempelkannya. Biarkan saya menyesuaikan sedikit alat peraga gaya sehingga semuanya konsisten di situs saya. Itu dia. Ini hanyalah hal lain yang terpisah dari Chakra itu sendiri, tetapi hanya saja, ini sangat menghemat waktu karena Anda memerlukan hal-hal ini di banyak situs web dan yang ingin menemukan kembali roda setiap saat.

Drew: Kedengarannya itu bisa menjadi penghemat waktu nyata, tidak hanya untuk proyek pribadi di mana Anda ingin meluncurkan sesuatu dengan cepat, tetapi dalam konteks agensi.

Mike: Oh, ya. Sangat.

Drew: Apakah itu berlaku sama untuk antarmuka aplikasi serta situs pemasaran? Apakah itu condong ke satu arah atau yang lain atau hanya berguna secara umum apa pun yang Anda bangun?

Mike: Saya akan mengatakan itu keduanya. Itu pasti. Saya sudah menggunakannya untuk keduanya. Perusahaan kami telah menggunakannya untuk keduanya. Kami membangun, menurut saya, kami sangat condong ke arah pembuatan aplikasi tumpukan penuh dan aplikasi seluler. Kami pasti memiliki lebih banyak kebutuhan untuk UI daripada hal-hal pemasaran. Meskipun terkadang kami juga membangunnya. Ini berguna untuk keduanya.

Mike: Ada sesuatu di situs yang mereka sebutkan, seperti kapan Anda tidak ingin menggunakan Chakra? Mereka mengatakan itu karena cara menyederhanakan antarmuka CSS ini. Mungkin ada tantangan ketika Anda memiliki banyak data di layar. Jika Anda membuat berton-ton elemen DOM dan melakukan banyak pembaruan waktu nyata, Anda mungkin atau mungkin tidak mengalami tantangan kinerja.

Mike: Saya belum pernah melihat masalah kinerja. Tapi saya juga belum membangun sesuatu yang begitu intensif data secara real-time. Ini keprihatinan. Jika saya akan membangun aplikasi seperti itu, saya mungkin ingin meningkatkan dua pendekatan yang berbeda, hanya untuk melihat bagaimana kinerjanya dengan banyak hal. Tapi ya. Ini berguna secara universal untuk kedua kasus tersebut.

Drew: Saya kira selalu ada trade-off, bukan dengan pilihan teknologi? Sesuatu yang membuatnya sangat, sangat sederhana. Benar-benar cepat untuk diterapkan. Pertukarannya mungkin sekali Anda membuat 1.000 titik data atau apa pun di halaman, metode kerja itu tidak akan bekerja dengan baik dan memperlambat Anda.

Drew: Ya. Saya pikir itu adil. Saya cenderung menemukan dalam pilihan teknologi, yang terpenting tahu saja. Hanya untuk mengetahui apa trade-off itu dan apa batasannya. Tak satu pun dari mereka yang baik atau buruk. Anda hanya perlu menemukan keseimbangan yang tepat untuk situasi Anda sendiri.

Drew: Seperti yang Anda harapkan dengan sistem desain semacam ini, ia datang dengan komponen untuk tipografi. Untuk tata letak. Kemudian ke seluk-beluk tombol dan elemen formulir dan ada perpustakaan ikon. Ada hampir semua yang Anda harapkan untuk dilihat di halaman wastafel dapur sistem desain. Anda punya segalanya di sana. Semuanya tampak cukup modern bagi saya. Saya mencatat bahwa komponen grid layout sebenarnya menggunakan grid CSS, yang selalu menyenangkan untuk dilihat. Ini tidak hanya memberikan beberapa kotak fleksibel.

Mike: Oh, ya. Sama sekali.

Drew: Apakah umumnya sangat fleksibel untuk diajak bekerja sama? Apakah Anda menemukan bahwa elemen tata letak Anda dapat membangun semua jenis UI yang Anda butuhkan?

Mike: Ya. Ya. Sangat. Apa yang hebat tentang itu adalah mereka, dalam beberapa kasus menyediakan lebih dari satu tingkat abstraksi. Dalam kasus kisi CSS, mereka memiliki kisi sederhana yang seperti, oke. Anda ingin memasukkannya dan inilah grid Anda. Anda hanya memasukkan barang-barang di dalamnya dan Anda menentukan, saya pikir jumlah kolom atau sesuatu seperti itu. Kemudian Anda punya grid.

Mike: Tetapi jika Anda perlu memiliki sedikit lebih banyak fleksibilitas dalam perilaku grid, maka Anda memiliki komponen grid generik, yang mungkin… Komponen grid sederhana mungkin membungkus komponen grid lainnya. Ini hanyalah fasad lain di atas dirinya sendiri.

Mike: Pendekatan terhadap komposisi komponen, itu adalah paradigma yang berharga di dunia React karena hal yang sama. Jika Anda memiliki komponen yang sangat serbaguna dan memiliki banyak alat peraga, maka, mungkin ada satu set kasus penggunaan yang Anda ingin gunakan komponen satu arah untuk cukup umum. Anda cukup membungkusnya dengan komponen lain dengan alat peraga statis atau yang telah ditentukan sebelumnya untuk komponen yang lebih kuat.

Mike: Mereka menggunakan pendekatan itu dengan sangat baik di Chakra. Saya belum mengalami apa pun yang belum bisa saya lakukan dengannya. Aku yakin itu ada di suatu tempat. Atau sesuatu yang hanya sedikit lebih merepotkan untuk dilakukan. Tapi umumnya belum terjadi. Bukan berarti saya bisa memikirkan setidaknya.

Drew: Nah, salah satu hal yang saya sangat senang untuk melihat dan sesuatu yang Anda sebutkan sebelumnya juga, tampaknya ada fokus yang cukup kuat pada aksesibilitas.

Mike: Ya.

Drew: Tentu dalam informasi promosi. Apakah itu lahir dalam kode itu sendiri? Apakah mereka mempraktekkan apa yang mereka khotbahkan? Apakah itu benar-benar memiliki aksesibilitas yang baik?

Mike: Saya pikir begitu. Yang paling dekat yang saya lakukan untuk mengujinya adalah menjalankan Lighthouse melawannya. Ini secara konsisten memberikan skor tinggi untuk aksesibilitas. Saya biasanya akan menggunakan Chakra Next.js. Next.js adalah kinerja yang tepat. Cukup sering Anda akan melihat skor tinggi dan segalanya. Saya baru saja men-tweet hari ini tentang bagaimana beranda buku itu memiliki tiga dari empat skor Lighthouse. Ada aksesibilitas, praktik terbaik, kinerja, dan yang keempat. Saya tidak berpikir sekarang.

Mike: Semuanya, kecuali performa, mendekati 100%. Bagian kinerja ada pada saya hanya karena saya menaruh banyak hal di halaman dan saya belum mengoptimalkannya. Ia cenderung melakukan itu. Skor aksesibilitas di Lighthouse sangat bagus setiap kali saya menggunakan Chakra UI.

Drew: Itu bagus. Anda menyebutkan mereka menggunakan rendering sisi server dan apa yang Anda miliki. Hal-hal seperti Next dan Gatsby dan apa yang saya miliki tentang Anda, sama sekali tidak masalah, bukan? Tidak ada rintangan yang harus diperhatikan dalam menggunakan Chakra dengan itu?

Mike: Oh, tidak. Tidak semuanya. Saya belum menggunakannya. Saya cenderung fokus pada Next.js. Saya belum terhubung ke Gatsby atau alat SSR lainnya. Tetapi selama kerangka kerja itu, tidak memiliki apa pun yang akan menghalanginya untuk menggunakannya, maka itu akan baik-baik saja.

Mike: Untuk Bereaksi, Chakra menyediakan penyedia API konteks. Penyedia tema sehingga ketika Anda… Di aplikasi Next.js saya misalnya, Anda memiliki… Next.js memiliki file JS atau TS aplikasi garis bawah yang hanya membungkus setiap halaman dalam aplikasi. Anda cukup mencolokkan penyedia tema di sana dan Chakra melakukan sisanya dan itu hanya tersedia di mana-mana. Tidak ada rintangan untuk menambahkan ke Next.js tentu saja. Tapi saya membayangkan tidak untuk Chakra juga.

Drew: Apakah Chakra menggunakan TypeScript? Saya percaya itu benar, bukan?

Mike: Ini mendukungnya. Ya.

Drew: Ini mendukungnya. Itu nilai tambah yang besar bagi orang-orang yang sudah menggunakan TypeScript dalam proyek mereka. Apakah ada kerugian jika orang belum menggunakan TypeScript?

Mike: Saya tidak berpikir begitu. Saya menggunakan TypeScript secara default di semua proyek saya, dan begitu juga Echobind. Tetapi ketika saya melakukan sesuatu pada tingkat pribadi, saya menggunakan… Saya suka mengatakan taburan TypeScript. TypeScript sangat berharga dalam mengurangi kesalahan dengan membuat tipe statis. Ada pembawa untuk itu, di mana tergantung pada pengetahuan Anda tentang itu, TypeScript bisa menjadi rintangan nyata.

Mike: Ambang batas minimum saya untuk… Keketatan TypeScript yang saya gunakan cukup rendah hanya karena Anda bisa mendapatkan banyak nilai dari TypeScript dengan pengetikan dasar. Ini akan mencegah banyak kecelakaan umum. Saat Anda masuk ke pengetikan yang lebih maju, jika Anda tidak terlalu nyaman dengan hal itu, itu benar-benar dapat memperlambat Anda dan membuat Anda frustrasi.

Mike: Itu hanya untuk mengatakan hal yang sama dengan Chakra dan TypeScript. Saya cenderung menggunakan sedikit TypeScript, setidaknya di awal sampai saya benar-benar menyempurnakan dan menstabilkan proyek. Tetapi tidak ada tantangan dalam menggunakan Chakra, baik dengan atau tanpa TypeScript. Ini bagus dengan. Saya menyukainya dengan, tetapi Anda pasti dapat menggunakannya tanpa juga.

Drew: Ya. Saya menemukan dengan TypeScript bahwa Anda mendapatkan 80% dari manfaat, seperti yang Anda katakan, hanya dengan beberapa jenis. Jika Anda terlalu jauh ke lubang kelinci, Anda berakhir dengan skrip yang sebagian besar TypeScript. Kemudian sedikit JavaScript ke bawah.

Mike: Atau Anda menghabiskan begitu banyak waktu mencoba mencari cara yang tepat untuk mengetik sesuatu dan otak Anda meledak. Begitulah cara Anda hanya menempatkan atau tidak diketahui. Anda pintas itu. Yang saya anjurkan untuk kasus-kasus seperti itu. Jika Anda membutuhkan terlalu banyak waktu untuk menyelesaikan sesuatu, maka ada tuas yang bisa Anda tarik.

Drew: Dokumentasi Chakra tampaknya sangat baik, saya pikir, dengan… Ini memiliki gambaran umum dari setiap komponen. Maka itu benar-benar berguna termasuk catatan teknis tentang pertimbangan desain yang dibuat saat mengimplementasikan komponen itu. Yang, sebagai seorang insinyur ujung depan, saya pikir itu hebat. Mereka berbicara bahasa saya. Saya mengerti. Saya tahu apa yang dilakukan komponen sedikit di bawah tenda.

Drew: Itu hanya dari sudut pandang saya, menelusuri dokumentasi tanpa proyek nyata yang sedang saya kerjakan. Ketika Anda benar-benar mengerjakan sebuah proyek dan jauh di dalamnya, hanya dokumentasi yang bertahan? Apakah itu berguna seperti yang terlihat?

Mike: Oh ya. Sangat. Perspektif saya sedikit berbeda. Saya tidak selalu perlu tahu apa yang terjadi di balik layar, tetapi saya biasanya bisa menyimpulkan. Jika saya melihat komponen kotak, saya hanya melihat dokumen sekarang sementara kita berbicara untuk penyegaran. Jika saya melihat komponen kotak, saya seperti, “Oke. Itu mungkin div secara default. Saya melihatnya lewat di properti gradien, apa pun. ”

Mike: Saya bisa memahami apa yang terjadi di tenda tanpa sepenuhnya memahami keajaiban mereka untuk menerjemahkan CSS. Terjemahkan alat peraga ke CSS. Tetapi dokumentasinya bagus karena sangat linier. Ini sangat konsisten. Ini mencantumkan semuanya dengan contoh. Sedikit salin dan tempel.

Mike: Itu hanya menggunakan ruang putih yang sangat bagus sehingga melihat halaman tidak tampak berlebihan. Anda dapat menemukan apa yang Anda butuhkan dengan mudah. Pencarian mereka juga bagus. Pencarian mereka sangat membantu. 90% dari waktu, saya pikir untuk itulah saya pergi ke sana. Mungkin masuk ke sana dan melihat apakah ada komponen untuk melakukan sesuatu. Biasanya begitu. Dan menemukan hal lain yang berguna yang tidak saya ketahui. Atau hanya menyegarkan diri pada beberapa prinsip. Saya selalu dapat menemukan apa yang saya butuhkan di sini.

Drew: Satu-satunya hal yang saya tidak suka tentang dokumen dari melihat-lihat adalah jumlah iklan di dalamnya. Di setiap halaman untuk penawaran komersial Chakra UI Pro.

Mike: Saya tidak melihat mereka. Menarik. Aku telah melihatnya. Saya pasti pernah melihatnya. Tapi aku tidak melihatnya sekarang. Oh ya. Baik. Ada Chakra UI Pro. Saya kira saya menyaringnya secara mental. Aku mendengarmu. Setidaknya itu tidak terlalu besar dan di wajah Anda.

Drew: Ini tidak terlalu besar. Itu hanya di tempat yang salah. Itu hanya tempat Anda mencari informasi. Yang saya kira adalah mengapa mereka melakukannya. Itu layak disebutkan dalam mempertimbangkan ekosistem dan segala sesuatu di sekitar proyek ada satu set pro komponen yang… Saya kira itu setara dengan beberapa hal yang ada di Tailwind UI yang ada di sana. Halaman pemasaran dan di sini adalah komponen dan lebih banyak lagi dari bagian halaman yang tersusun ini dan seluruh halaman serta tata letak dan hal-hal lainnya. Bahwa Anda, tersedia dari pembuat Chakra, tetapi sebagai penawaran komersial.

Mike: Ya. Hanya melihat sekilas sekarang. Beberapa di antaranya sebenarnya tersedia. Atau versi mereka tersedia secara gratis seperti template Chakra. Ini template Chakra, saya kira, adalah solusi open source untuk Chakra Pro atau pesaing open-source. Saya yakin Anda akan mendapatkan satu ton dengan membayar untuk ini. Tampaknya Chakra Pro sangat kuat dan harga terjangkau jika Anda memiliki kebutuhan profesional yang membayar untuk ini. Ada beberapa opsi untuk proyek Anda, sepertinya.

Drew: Ya. Kedengarannya ada ekosistem yang dibangun di sekitarnya. Apakah Anda tahu berapa lama proyek ini berjalan dan apa yang mengikutinya? Apakah itu digunakan secara luas di komunitas React?

Mike: Saya ingin mengatakan ya. Saya tidak tahu sampai derajat apa. Saya ingin tahu untuk melihat apa, saya kira, pangsa pasar Tailwind versus Chakra saat ini. Saya tahu Chakra mendapat penghargaan relatif baru-baru ini. GitNation React Award untuk proyek paling berdampak bagi komunitas. Saya akan mengatakan itu cukup besar dan cukup baik dipeluk. Dengan alasan yang bagus, itu bagus. Orang-orang pasti menikmatinya. Saya bukan satu satunya.

Drew: Satu hal yang selalu perlu dipikirkan saat membawa ketergantungan ke dalam proyek Anda adalah apa yang terjadi ketika Anda perlu memperbarui ketergantungan itu.

Mike: Ya.

Drew: Chakra sedang ditingkatkan sepanjang waktu, saya bayangkan. Apakah ini kasus setelah Anda mengimpornya dan membuatnya, Anda membiarkannya terkunci pada versi tertentu? Atau apakah umumnya aman untuk terus diperbarui? Apakah relatif stabil dalam hal desain dan hal-hal dari situs Anda tidak berubah sebagai pembaruan Chakra?

Mike: Sudah sejauh ini. Ya. Terutama, saya akan mengatakan itu karena kemajuan pembangunan. Mereka berada di versi 1.6.3 sekarang. Beberapa bulan yang lalu, mereka beralih dari nol menjadi satu. Itulah satu-satunya saat mereka melakukan perubahan. Sejak itu, mereka terus-menerus melakukan rilis fitur dan perbaikan bug.

Mike: Selama setidaknya beberapa bulan terakhir, semuanya hanya tambahan. Penambahan dan perbaikan. Tidak ada perubahan yang mengganggu. Saya tidak tahu seperti apa peta jalan itu, tetapi saya membayangkan akan terus seperti itu. Setiap kali saya memutakhirkannya, salah satu versi minor ini, itu baik-baik saja. Saya belum pernah melihat sesuatu yang terlepas darinya. Tetapi ketika mereka keluar dengan 1.0, ada beberapa perubahan besar. Saya tidak ingat itu menjadi bencana sekalipun.

Drew: Tahukah Anda bagaimana situasinya dengan ukuran bundel dan kemampuan untuk menggoyang pohon Chakra? Apakah itu menambah banyak bobot pada proyek Anda atau hal-hal hanya diimpor saat Anda menggunakannya?

Mike: Saya tidak ingat begitu saja, jujur. Saya mungkin harus tahu itu. Saya belum menyadarinya menambah banyak bobot. Terutama karena Anda mengimpor komponen satu per satu. Tidak mengimpor semua Chakra atau semacamnya. Saya akan mengatakan itu sejalan dengan dukungan untuk guncangan pohon, tetapi saya belum mengujinya. Sejauh ini, saya belum memiliki hal-hal yang memiliki bobot besar yang datang secara khusus darinya.

Drew: Ya. Itu selalu menjadi pertimbangan penting, bukan?

Mike: Ya.

Drew: Apakah ada hal lain yang harus kita ketahui tentang Chakra UI sebelum kita terjun langsung dan menggunakannya pada sebuah proyek?

Mike: Tidak. Ini bagus. Ada komunitas yang cukup aktif juga. Saya sering melihat pembaruan. Saya sedang melihat dokumentasi sekarang dan melihat komponen yang belum pernah saya lihat sebelumnya. Saya melihat ada banyak penambahan fitur yang terjadi. Itu keren.

Drew: Ya. Itu hebat. Anda memiliki buku berjudul Cut Into The Jamstack, yang merupakan rilis pratinjau. Rilis beta saat ini. Anda menerbitkan sendiri itu. Apakah itu benar?

Mike: Ya. Ya. Saya. Itu adalah usaha pertama saya di sebuah buku teknis. Saya hanya ingin mengeluarkannya tanpa melakukan sesuatu seperti, itu formal, saya kira. Saya juga seseorang yang menyukai informalitas, terutama ketika membuat sesuatu. Ini memberi saya kemampuan untuk melakukannya dengan cara saya dengan melakukannya seperti itu.

Drew: Buku ini benar-benar memandu pembaca dalam membangun perangkat lunak sebagai aplikasi layanan.

Mike: Ya.

Drew: Semua ada di Jamstack. Mengapa Anda memutuskan untuk menulis ini sekarang dan mengambil pendekatan ini dengan buku ini?

Mike: Pertanyaan bagus. Saya telah coding selama sekitar 20 tahun sekarang dan saya pikir saya mencoba untuk menulis buku beberapa waktu lalu dan itu tidak cukup terbentuk. Saya berada pada titik dalam karir saya di mana saya benar-benar ingin berbagi lebih banyak pengetahuan. Saya telah menggunakannya selama bertahun-tahun dan saya merasa gatal untuk benar-benar mengeluarkan lebih banyak dan membantu orang lain.

Mike: Sekitar bulan Oktober tahun lalu, saya punya ini... Saya ingin meletakkan sesuatu di luar sana yaitu produk. Sebuah ebook terasa seperti cara yang sangat baik untuk memulai. Saya sangat tertarik dengan Next.js dan hal-hal yang dapat Anda lakukan dengannya. Saya menggunakan istilah Jamstack dan saya menganggap Next.js sebagai bagian dari Jamstack karena memiliki pembuatan situs statis sebagai default.

Mike: Tapi saya pikir itu satu hal yang tidak cukup dibicarakan, menurut pendapat saya, atau bisa menggunakan penjelasan lebih lanjut adalah membangun perangkat lunak sebagai aplikasi layanan dengannya. Karena Jamstack bukan hanya untuk situs web. Ini bekerja sangat baik untuk situs web yang didorong oleh konten karena statis dan cepat serta ramah SEO.

Mike: Tapi ada begitu banyak fungsionalitas yang kaya di sana, terutama di Next.js di mana Vercel mengadakan Konferensi Next.js kemarin dan mereka merilis lebih banyak fitur luar biasa di sana. Saya bersemangat membangun perangkat lunak sebagai layanan. Situs web perangkat lunak memang bagus, tetapi perangkat lunak dimaksudkan untuk melakukan sesuatu.

Mike: Bagi saya tumpukan ini adalah masa depan perangkat lunak sebagai pengembangan layanan. Itu mengingatkan saya pada apa itu Ruby on Rails ketika keluar. Itu adalah evolusi, dalam hal berbicara. Ini mengotomatiskan dan menyederhanakan banyak hal yang dulu harus Anda lakukan secara manual. Ini mempercepat laju pembangunan, dan meningkatkan kualitasnya.

Mike: Next.js dan Jamstack serta Vercel dan Chakra UI, semuanya menghasilkan hal-hal yang menyederhanakan banyak hal untuk Anda. Next.js, ini menyederhanakan banyak masalah terkait kecepatan dan masalah terkait aksesibilitas. Instalisasi. Itu saja, perutean dilakukan untuk Anda. Anda tidak perlu khawatir tentang perutean sisi klien atau sisi layanan. Ini otomatis. Chakra UI melakukannya dengan aksesibilitas dan tema. Alat-alat ini disatukan, mereka hanya ... Pengalaman pengembang menjadi sangat hebat dan semuanya adil ... Ini memberi Anda kebebasan untuk benar-benar membuat perangkat lunak.

Mike: Untuk menjawab pertanyaan Anda. Alasan saya menerbitkan buku sekarang adalah karena waktu yang tepat saya benar-benar ingin meletakkan sesuatu di luar sana dan dengan ekosistem Jamstack mulai membuahkan hasil dan berkembang. Itu juga memberi saya kesempatan untuk menulis lebih banyak kode ke Jamstack, yang, saya sangat menyukainya.

Drew: Saya pikir, seperti yang Anda katakan, mudah untuk mengikuti gagasan Jamstack ketika Anda memikirkan tentang situs web dan biasanya situs web yang ringan. Tetapi mengambil langkah berikutnya untuk memikirkan bagaimana Anda dapat menggunakan pendekatan untuk membangun aplikasi web lengkap, itu jauh lebih sulit. Ini adalah rintangan yang lebih besar, saya pikir, untuk dilewati jika Anda terbiasa berpikir dalam pola pikir sisi server.

Mike: Ya.

Drew: Ini lompatan yang jauh lebih besar untuk dilihat, oke. Saya dapat menempatkan otentikasi saya ke layanan-

Mike: Ya.

Drew: … dan saya bisa… Saya rasa untuk para pembaca, dari sudut pandang pembaca buku Anda, hanya dengan membaca dan membangun contoh ini, mengikuti Anda, mungkin ini cara yang bagus untuk mengatasi rintangan itu dengan hanya membantu dengan lembut ubah pola pikir Anda menjadi, oke. Beginilah cara saya bisa melakukan semua hal ini, tetapi di Jamstack. Apakah Anda setuju dengan itu?

Mike: Ya. Itulah yang saya harapkan. Saya pikir itu benar. Itu benar-benar apa yang dimaksudkan. Saya menandatangani sebuah ceramah baru-baru ini, sebuah ceramah konferensi yang… Sebagian dari motivasi saya untuk topik tersebut dan cara saya memutuskan untuk mengajar dalam buku ini adalah, saya dapat mengajari Anda satu bahasa pemrograman. Sebuah kerangka kerja, tetapi rasanya lebih baik untuk memperkenalkan Anda ke tumpukan secara langsung karena, setiap pengembang yang memiliki banyak pengalaman pandai melakukan dokumentasi dan Googling dan menggunakan stack overflow. Mengapa saya membuang waktu Anda untuk mengajarkan itu kepada Anda?

Mike: Saya ingin memberi Anda penjelasan yang cepat dan mendalam tentang tumpukan dan apa yang dapat saya lakukan dengannya. Anda akan mengambil apa yang hebat tentang masing-masing bagian. NextOFF dan Prisma. Next.js dan Chakra. Saya akan menautkan Anda ke dokumentasi hanya untuk menghemat beberapa klik. Tapi Anda akan melihat melalui contoh interaktif, bagaimana potongan-potongan ini terhubung bersama. Anda juga akan mendapatkan pemahaman tentang bagian-bagian yang sulit.

Mike: Satu hal yang akan saya bahas lebih dalam, misalnya, adalah fitur yang saya buat untuk unggahan multi-file asinkron. Next.js memiliki front end dan backend. Meskipun di bagian depan ujung depan dan bagian belakang ujung depan, jika Anda menggunakan analogi itu, Anda memiliki lapisan React. Kemudian Anda mendapatkan lapisan simpul. Ada rute API ini.

Mike: Jika Anda ingin melakukan unggahan multi-file dengan itu dan menggunakan layanan, saya menggunakan Cloudinary dalam buku ini. Tetapi jika Anda menggunakan layanan API untuk unggahan gambar dan media yang seharusnya, ada banyak bagian yang bergerak di sana. Ada sisi klien, tempat pengguna berinteraksi. Ada permintaan API ke Cloudinary atau penyedia lainnya. Tapi kemudian Anda harus membuat beberapa permintaan API untuk membuatnya efisien. Anda harus melakukan penandatanganan terhadap Cloudinary, yang memerlukan panggilan API.

Mike: Anda perlu mengambil tanda itu dan Anda perlu melakukan unggahan, yang dimulai dari browser dan menghindari API Anda dan langsung menuju Cloudinary. Maka Anda perlu menyimpannya di database Anda, yang menggunakan front end backend front end Anda. Ada banyak bagian dan Next.js… Di komunitas Next.js, belum ada plugin open source untuk itu. Yang dapat saya ekstrak dari aplikasi sekarang yang telah membuatnya dan memasukkannya ke dalam satu karena orang lain akan memilikinya.

Mike: Anyway, all that's just to say that, I think that's something really valuable to teach to people. Even if you're a senior engineer, for a few dollars, you get all this wrapped up for you with a bow on it to be like, okay. This is a series of tools that worked really well together for building SaaS apps with a stack. This hurdle, I don't have to figure out a solution for writing custom. Here's an approach that works.

Mike: I just, I take a lot of joy in trying to prevent people from having to reinvent the wheel. Even though it's fun to reinvent the wheel, if you wanted to just ship something, the more you can reduce that, the better,

Drew: That sounds very, very helpful. The book is in beta now. If people buy it now, do they get updates as it improves?

Mike: Yep. Ya. It's immensely discounted. It's $10 now. When I finish, it will be 30. Whoever gets it now, will just get updates for the life of the book.

Drew: Fantastis.

Mike: I've got another one coming up in probably a couple of weeks. Ya. Ya. It's already 107 pages and it's got a source-code repo that will be shipped with it. That comes along with it now. It's already like you can do… In the first 107 pages, it goes through setup to build a new first full stack page to building a CRUD for photo galleries. Create, Read, Update, Delete. So the front end and backend components. Then shipping a deployment to railway and Vercel. It's pretty practical right away. Then the further, other couple of 100 pages are going to be more in depth with the coding topics.

Drew: Great. That's available now at cutintothejamstack.com.

Mike: Yep. Itu dia.

Drew: I've been learning all about Chakra UI. What have you been learning about lately, Mike?

Mike: I've been digging deeper on the stack. It constantly teaches me new things. One example is just with the Vercel Conference yesterday. The Next.js Conf. Next.js 11 is now out and it's just got a ton of great things with it. There's a real-time collaboration tool built in so when you ship a preview deploy, you can have people commenting on it and moving their mouse around the screen, even it looks like.

Mike: In addition, their performance is getting better and better. Next.js' image component, which I use heavily now is going to have automatic placeholders. It's going to be even more streamlined. I'm constantly learning the better and better ways to do things in this stack. There are always more. It seems like.

Drew: Always. Always more to learn. If you dear listener would like to hear more from Mike, you can follow him on Twitter where he's @mcavaliere, and his personal website is mikecavaliere.com. The book Cuts Into The Jamstack, which amongst other things shows a practical implementation of Chakra UI, is again at cutintothejamstack.com. Thanks for joining us today. Mike. Apakah Anda memiliki kata-kata perpisahan?

Mike: Nope. Thanks so much for having me, Drew, and keep smashing out there. Maybe I should rephrase that.