Struktur Komponen Front End

Pada tulisan kali ini kita akan membahas tentang bagaimana baiknya seorang Front End Developer untuk membuat struktur dari sebuah project yang mudah di pahami dan dapat menghemat waktu dalam pengerjaanya. Mungkin dari sebagian temen-temen disini bingung bagaimana cara membangun struktur dari sebuah project terutama untuk bagian styling.

Pada tulisan ini saya ingin berbagi pengalaman tentang bagaimana membuat struktur di dalam styling dengan menggunakan Atomic Design.

Atomic Design adalah pendekatan desain yang dipopulerkan oleh Brad Frost, yang memecah elemen aplikasi web menjadi bagian-bagian modular hingga yang paling kecil. Elemen-elemen tadi dibagi menjadi beberapa bagian antara lain:

Atom

Atom yaitu elemen terkecil dasar pembentuk seluruh sistem. Atom terdiri dari tag HTML yang biasa digunakan, seperti label, button, dan form. Bisa juga berupa elemen abstrak seperti color palette dan font yang digunakan.

Molecule

Elemen-elemen pada level atom dikelompokkan dan diatur dalam modul yang lebih besar. Misalnya modul pencarian yang tersusun dari komponen-komponen: tombol Search, input pencarian (text field), dan label.

Organism

Organism adalah gabungan dari molekul yang disatukan dan membentuk bagian yang cukup kompleks dari suatu tampilan. Bagian organism ini disebut juga segmen. Contohnya adalah “Header”, header organism ini terdari dari molecule menu, search, button dan lainnya. Organism mendemonstrasikan sebuah komponen yang kecil, mudah dan dapat diaplikasikan keberbagai halaman secara berulang. Dalam sudut pandang Front End, pembuatan organism ini memudahkan mereka dalam membagi bagian pada HTML.

Template

Template terdiri dari beberapa organism yang disatukan bersama dan membuat sebuah Halaman. Pada tahap ini kita dapat melihat desain mulai terbentuk dan bagaimana layout bergerak. Misalnya saat di klik template ini alurnya kemana, saat kembali lagi bagaimana.

Pages

Tahapan terakhir dari atomic desain adalah Pages. Seluruh template yang disatukan dengan konten aslinya disebut Pages dari Website. Laman ini adalah berada pada level High Fidelity. Pages adalah template yang berisikan final aset seperti video, image, konten dan dengan terisinya konten, kita dapat mereview dan melakukan Quality Checking apabila dibutuhkan. Selain itu dengan mengetes dan mereview Halaman yang telah dibuat akan membuat kita mengetahui apakah desain sistem yang kita buat sudah efektif atau belum.

Penerapan Atomic Design

Bagian terpenting dari desain dan pengembangan berbasis komponen adalah patern library, yang digunakan sebagai hub pusat dari semua komponen Component yang digunakan di antarmuka. Ada banyak manfaat dari patern library:

• Mempromosikan konsistensi dan kohesi
• Mempercepat alur kerja tim
• Mempromosikan kolaborasi lintas divisi
• Membangun kosakata desain bersama
• Memberikan dokumentasi yang penting
• Membuat pengujian lebih mudah
• Memberikan pondasi yang kuat di masa depan

Struktur Folder

Dari penjelasan singkat bagaiamana penarapan struktur folder menggunakan atomic design berikut gambaran dari hasil diatas

Struktur SCSS

Apa yang saya hasilkan adalah sistem hibrida antara BEM, Desain Atom & Utility Classes di mana bagian terbaik dari metodologi ini digunakan. Pertama-tama kita perlu membangun struktur:

• Settings — Semua pengaturan khusus proyek berada. Di sini kita bisa menentukan colors, font sizes, font families, dll.
• Tools — Di sini kita menentukan functions & mixins yang digunakan secara global seperti font-size mixins, rem helper functions, dll.
• Generic — Normalize, resets, vertical rhythm & box-sizing akan ada di sini.
• Object — Gaya objek agnostik seperti media-object, grid systems, dll.
• Atoms — Elemen HTML dasar yang tidak diklasifikasi dan segala sesuatu yang tidak dapat dibuat lebih kecil.
• Molecule — Kombinasi atom, komponen dengan fungsi yang berbeda.
• Organism — Kombinasi atom & molecule, bagian dari interface.
• Utilities — Kelas pembantu yang mengesampingkan semua yang dinyatakan sebelumnya.

Terimakasih!