Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

Membangun Reusable Design System Dengan React

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Imam Firmansyah (you can also view the original English article)

React telah banyak melakukan penyederhanaan dalam proses pengembangan website. React's component-based arsitektur pada prinsipnya memudahkan untuk mendekomposisi dan menggunakan kembali kode. Namun, hal tersebut tidak selalu jelas bagi para pengembang tentang bagaimana membagikan komponen mereka pada seluruh proyek. Dalam postingan ini, saya akan menunjukkan beberapa cara untuk memperbaikinya.

React telah membuatnya lebih mudah untuk menulis kode yang indah dan ekspresif. Namun, tanpa pola yang jelas untuk penggunaan kembali komponen, kode menjadi berbeda dari waktu ke waktu dan menjadi sangat sulit untuk dipelihara. Saya telah melihat codebases dimana elemen UI yang sama memiliki sepuluh penerapan yang berbeda! Masalah lainnya adalah, lebih sering daripada tidak, para pengembang cenderung memasangkan UI dan fungsi bisnis terlalu ketat dan berusaha keras nantinya ketika UI berubah.

Hari ini, kita akan melihat bagaimana kita dapat membuat UI komponen yang dapat dibagikan dan bagaimana membangun bahasa desain yang konsisten diseluruh aplikasi Anda.

Permulaan

Anda perlu sebuah priyek react yang kosong untuk memulai. Cara tercepat untuk melakukan ini adalah dengan create-react-app, tetapi perlu upaya untuk menyiapkan Sass dengan ini. Saya telah membuat kerangka aplikasi, yang dapat Anda clone melalui GitHub. Anda juga dapat menemukan proyek akhir tutorial dalam repositori GitHub kami.

Untuk menjalankan, lakukan yarn-install untuk menarik semua dependensi, lalu jalankan yarn start untuk memunculkan aplikasi.

Semua komponen visual akan berada di bawah folder design_system system bersama dengan style yang sesuai. Setiap global style atau variabel akan berada di bawah src/styles.

Project folder structure

Menyiapkan Desain Baseline

Kapan terakhir kali Anda melihat seperti hal yang buruk itu dari rekan design Anda, untuk mendapatkan suatu padding yang salah dengan setengah pixel, atau tidak dapat membedakan berbagai warna abu-abu? (Ada perbedaan antara #eee dan #efefef, saya diberitahu, dan saya bermaksud untuk menemukannya suatu hari nanti.)

Salah satu tujuan membangun UI library adalah untuk meningkatkan hubungan antara tim desain dan pengembang. Front-end developer telah berkoordinasi dengan API designer untuk sementara waktu dan untuk membangun kontrak API yang baik. Tapi untuk beberapa alasan, ini menghindari kita saat berkoordinasi dengan tim desain. Jika anda memikirikan itu, hanya ada beberapa jenis UI element yang ada. Jika kita ingin mendesain komponen Header misalnya, dapat berupa apa saja antara h1 dan h6 dapat dicetak tebal, dicetak miring, atau digaris bawahi. Harus mudah untuk melakukan pengkodean.

Sistem Grid

Langkah pertama sebelum memulai desain proyek adalah memahami bagaimana struktur grid. Pada kebanyakkan aplikasi, banyak yang tidak terduga. Hal ini menyebabkan sistem spasi (jarak) menjadi tersebar dan membuatnya sangat sulit bagi pengembang untuk mengukur sistem spasi yang akan digunakan. Jadi pilih sistemnya! Saya jatuh cinta dengan sistem grid 4px - 8px ketika saya pertama kali membacanya. Berpegang teguhlah pada hal itu telah membantu menyederhanakan banyak masalah dalam proses styling.

Mari kita mulai dengan menyiapkan sistem grid dasar dalam melalui kode. Kita akan mulai dengan app component yang menetapkan layout.

Selanjutnya, kita mendefinisikan sejumlah style dan wrapper components.

Akhirnya, kita akan mendefinisikan CSS sytle di SCSS.

Ada banyak hal yang perlu dibuka di sini. Mari kita mulai dari bawah. variables.scss adalah tempat kita mendefinisikan variabel global kita seperti warna dan mempersiapkan grid. Karena kita menggunakan grid 4px-8px, dasar kita adalah 4px. Komponen induknya adalah Page, dan ini mengatur flow dari halaman. Kemudian level terendah elemen adalah Box, yang menentukan bagaimana konten ditampilkan dalam suatu halaman. Ini hanya div yang tahu bagaimana membuat dirinya secara kontekstual.

Sekarang, kita membutuhkan komponen Container yang merekatkan beberapa div. Kita telah memilih flex-box, maka secara kreatif bernama komponen Flex.

Mendefinisikan Tipe dari Sistem

Tipe dari sistem merupakan komponen penting dari aplikasi apa pun. Biasanya, kita mendefinisikan sesuatu berdasarkan dari global style dan merubahnya sesuai dengan saat kita membutuhkannya. Ini sering mengarah pada inkonsistensi dalam desain. Mari kita lihat bagaimana hal ini dapat dengan mudah dipecahkan dengan menambahkan ke desain library.

Pertama, kita akan mendefinisikan beberapa konstanta style dan class wrapper.

Selanjutnya, kita akan mendefinisikan CSS style yang akan digunakan untuk elemen teks.

Ini adalah komponen Text sederhana yang mewakili beberapa jenis teks UI yang ada. Kita dapat memperluas ini lebih lanjut untuk menangani interaksi kecil seperti render tooltip ketika teks terpotong, atau render nugget yang berbeda untuk kasus-kasus tertentu seperti email, waktu, dan lain-lain.

Atom Form Molekul

Sejauh ini, kita hanya membangun elemen paling dasar yang terdapat pada aplikasi web, dan mereka tidak ada gunanya sendiri. Mari kita memperluas contoh ini dengan membangun modal window sederhana.

Pertama, kita mendefinisikan komponent class untuk modal window.

Selanjutnya, kita dapat menentukan CSS style untuk modal.

Untuk yang tidak tahu, createPortal sangat mirip dengan method render, kecuali itu akan melakukan render pada suatu bagian ke dalam node yang ada diluar dari hirarki DOM dari komponen utama. Itu diperkenalkan di React 16.

Menggunakan Komponen Modal 

Sekarang komponen didefinisikan, mari kita lihat bagaimana kita dapat menggunakannya dalam konteks bisnis.

Kita dapat menggunakan modal itu di mana saja dan mempertahankan pada suatu pemanggil. Sederhana, kan? Tapi ada bug di sini. Tombol tutup tidak berfungsi. Itu karena kita telah membangun semua komponen sebagai sistem yang tertutup. Itu hanya menempati props yang dibutuhkan dan mengabaikan sisanya. Dalam konteks ini, komponen text mengabaikan onClick dari event handler. Untungnya, ini adalah perbaikan yang mudah.

ES6 memiliki cara praktis untuk mengekstrak parameter yang tersisa sebagai array. Hanya menerapkan itu dan menyebarkannya ke komponen.

Membuat komponen dapat ditemukan

Saat tim Anda mempertimbangkan, sulit untuk menyinkronkan semua orang tentang komponen yang tersedia. Storybooks adalah cara yang bagus untuk membuat komponen Anda dapat ditemukan. Mari menyiapkan komponen dasar Storybooks.

Untuk memulai, jalankan:

Ini mengatur konfigurasi yang diperlukan untuk storybook. Dari sini, sangat mudah untuk melakukan sisa pengaturan. Mari tambahkan simple story untuk memperlihatkan jenis yang berbeda dari Type.

Dasar dari API itu sederhana. storiesOf mendefinisikan story baru, khususnya komponen Anda. Anda kemudian dapat membuat bab baru dengan add, untuk menampilkan perbedaan status pada komponen ini.

A simple Type storybook

Tentu saja, ini cukup mendasar, tetapi storybooks memiliki beberapa add-on yang akan membantu Anda menambahkan fungsionalitas ke dokumen Anda. Dan apakah saya menyebutkan bahwa mereka memiliki dukungan emoji? 😲�

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.