Pohon Palsu: Menggunakan Indentasi untuk UI yang Lebih Sederhana

Pohon Palsu: UI Sederhana dengan Memanfaatkan Indentasi

• Saat menginginkan daftar berbentuk pohon di UI, menerapkan hubungan induk-anak memerlukan banyak pekerjaan dan struktur data yang kompleks.
• Dalam basis data relasional, data struktur pohon dapat diperoleh dengan menggunakan recursive CTE (Common Table Expressions).

Apakah Datanya Benar-Benar Harus Berbentuk Pohon?

• Perlu dipertimbangkan apakah item benar-benar harus memiliki hubungan induk-anak, atau hanya perlu tampak seperti itu.
• Jika hubungan nyata tidak diperlukan, pohon dapat disimpan secara sederhana menggunakan field id, sort, indent, dan name.
• Karena pendekatan ini merepresentasikan apa yang terlihat di layar secara langsung, membuat antarmuka untuk merender dan mengedit daftar menjadi jauh lebih sederhana.

Contoh Lain dengan Menggunakan "Namespacing"

• Dalam HissScript, jika nama item memiliki titik ("."), bagian pertama dipotong dan item diindentasi untuk mengimplementasikan fitur namespacing.
• Bagi editor game dan pemain, namespacing itu penting, tetapi pada kenyataannya itu hanyalah nama sederhana.
• Orang sering kali tidak memerlukan struktur pohon yang sesungguhnya, melainkan hanya tampilannya.

Bonus Tree-List

• Dengan meniru pohon sungguhan, jalur dan informasi disimpan dalam daftar datar, lalu jalur diurutkan untuk penelusuran depth-first atau breadth-first.
• Daftar datar umumnya lebih mudah diolah dan lebih cocok bagi komputer.

Analogi Fisik

• Saat menata scrapbook pribadi, cara kerja pengelompokan jelas bagi manusia, tetapi di lantai sebenarnya tidak ada mekanisme fisik yang memaksakan hubungan semacam itu.

Perhatian: Tidak Ada Solusi yang Cocok untuk Semua Situasi

• Teknik harus diterapkan sesuai skenario tertentu, dan jika struktur pohon yang sesungguhnya diperlukan, maka gunakan pohon.
• Jika Anda perlu mengetahui hubungan nyata antaritem, jangan menggunakan hack seperti indentasi atau menghitung simbol dalam string.

Pendapat GN⁺:

• Artikel ini menunjukkan cara menyederhanakan antarmuka pengguna dalam pengembangan perangkat lunak dengan memakai indentasi visual yang sederhana alih-alih struktur pohon yang kompleks.
• Bagi para pengembang, ini menawarkan strategi yang efektif untuk menyederhanakan struktur data sehingga menghemat waktu pengembangan dan mempermudah pemeliharaan.
• Artikel ini menekankan bahwa struktur pohon tidak selalu diperlukan, dan kadang struktur visual yang akrab bagi pengguna saja sudah cukup, sehingga memberi pengembang sudut pandang baru untuk meningkatkan pengalaman pengguna.

[GN⁺]

Opini Hacker News

• Pendekatan pertama, yaitu 'adjacency list', dianggap sebagai "cara yang jelas satu-satunya".

• Pendekatan kedua adalah "cara yang jauh lebih sederhana", metode yang belum pernah dilihat sebelumnya, dan meskipun memiliki kelemahan yang jelas, dalam beberapa kasus tetap cukup jelas.

• Pendekatan ketiga, 'namespacing', disebut 'materialized path'.

• Cara lain untuk merepresentasikan tree adalah 'nested sets', yang merupakan metode yang terkenal pada masa ketika database relasional ditangani secara serius.

• Postgres menyediakan tipe data dan operator pencarian bernama 'ltree', sehingga struktur tree dapat ditangani secara alami. Misalnya, dengan menggunakan 'ltree' untuk membuat tabel dan memasukkan data, lalu melakukan pencarian sederhana untuk menelusuri struktur tree.

• Nilai di dalam suatu struktur sering kali adalah hierarki data, bukan tree yang ditampilkan. Kita mungkin ingin menelusuri data, menunjukkan relasi, atau mengurutkannya ulang. Menyimpan informasi visual di dalam struktur data pada database bisa terasa seperti pandangan jangka pendek.

• Ada pengalaman mendirikan perusahaan yang menangani data berbentuk tree. Struktur tree bisa diubah menjadi daftar berindentasi dalam waktu O(n). Ini adalah salah satu pertanyaan wawancara, dan ada berbagai cara di database SQL untuk mengambil sebagian tree dengan cepat dan merendernya tanpa query rekursif.

• Salah satu cara mengambil data struktur tree dari database relasional dengan query SQL adalah menulis CTE (Common Table Expressions) rekursif. CTE sebenarnya menyenangkan, dan setelah terbiasa, tidak ada yang perlu ditakuti.

• Dari pengalaman, orang sering kali sebenarnya tidak menginginkan tree, hanya tampilan luarnya saja. HN dan Reddit berbeda dalam hal ini. Di HN, komentar anak menjadi saudara berikutnya dari komentar induk, dengan indentasi ditambah satu dari indentasi induknya untuk meniru tampilan tree. Sebaliknya, di Reddit, komentar anak benar-benar disarangkan di dalam komentar induknya.

• Ide inti artikelnya adalah menggunakan struktur yang sesuai dengan masalahnya. Namun, alur penjelasannya memiliki kekurangan. CTE tidak diperlukan untuk mengambil tree dari database, dan kita bisa mengambil daftar datar lalu membangun tree secara lokal. Selain itu, untuk tree yang cukup besar, bisa muncul biaya linear ketika ingin memindahkan cabang atau mengubah kedalaman.

• Saat menjelaskan taksonomi atau hierarki lain, ada cara sederhana dan cepat dengan menggunakan sistem file lokal. Gunakan perintah 'mkdir' dan 'tree', lalu tempelkan hasilnya ke email, Slack, pastebin, dan sebagainya.

• Jika hanya ingin menyimpan/memuat, solusi yang lebih sederhana mungkin adalah menserialisasi data sesuai keinginan (misalnya JSON) lalu menyimpannya sebagai string. Menggunakan notasi titik mirip dengan cara ekstensi VsCode, Dendron, menangani hierarki nama.

• Beberapa tahun lalu ada pencerahan serupa tentang OpenGL: tidak perlu menggambar dunia objek 3D yang hierarkis, cukup gambar daftar segitiga yang sudah diurutkan. Ini membuat banyak optimasi menjadi sangat mudah.