Orthogonality pada Programming

Ketika mengerjakan existing project atau proyek yang sudah ada, waktu akan lebih banyak digunakan untuk memahami setiap bagian source code yang sudah ada sebelumnya. Perlu melakukan tracing code ketika mecoba build & run program, seperti kapan baris sekian dieksekusi, dimana melakukan perubahan tambahan, dan lain-lain. Kompleksitas dari proyeknya juga menambah tantangan lain ketika hendak menambah fitur yang diminta. Kalau nihil dokumentasi, maka perlu proses hand over dengan pemrogram sebelumnya. Panjang umur bagi kolega yang apabila membuat code mudah dipahami.

Sepertinya hidup sedikit lebih tenang jika tidak membuat bugs tujuh turunan (terhindar dari pertanyaan dan complain). Selain itu menyenangkan pula jika code kita mudah dipahami kolega.

Ketika fitur-fitur baru ditambahkan saat mengembangkan existing project, maka kemungkinan kompleksitas bertambah. Tapi, pengembangannya akan lebih mudah apabila tidak melibatkan atau mengubah barisan code yang sudah ada sebelumnya. Sistem atau proyek yang tidak perlu mengubah barisan code sebelumnya seperti ini dapat disebut orthogonal.

Apa itu Orthogonal

Sistem yang orthogonal adalah saat mengubah fitur B maka tidak akan mengganggu keadaan fitur A.

Istilah orthogonal digunakan dalam bidang geometri untuk mendeskripsikan garis yang tidak bersinggungan atau independent dalam suatu grafik.

Bayangkan ada orang bawa motor bebek supra. Setiap menaikkan atau menurunkan kecepatan, maka perlu mengubah gigi (motor). Ketika mengubah gigi motor, gas motor harus turun. Kalau menaikkan gas saat menurunkan gigi, otomatis kecepatan motor turun drastis, efeknya kerusakan gear set. Beruntung kalau nggak jatuh atau mental.

Contoh dari masalah di atas adalah sistem yang tidak orthogonal. Karena untuk menggunakan satu fungsi, perlu untuk mengubah fungsi yang lain.

Atau contoh lain yang sering digunakan untuk mengenalkan orthogonality ialah fungsi radio. Ketika melakukan pergantian channel maka hanya perlu menekan tombol next atau prev, tidak perlu menekan tombol pengubah suara dan lain-lain.

Orthogonality pada Frontend

Penerapan orthogonality pada frontend lebih sering diimplementasi saat memisahkan setiap komponen yang memiliki fungsi khusus, seperti event listening, styling, logic, dan request data melalui API. Penggunaan state management seperti redux atau penerapan css in js membantu kita untuk membuat proyek lebih orthogonal.

import { Suspense, useEffect, useState } from "react";
import axios from "axios";
import "./styles.css";

export default function ArticlePage() {
  const [article, setArticle] = useState([]);

  useEffect(() => {
    // Melakukan fetch data dengan axios
    (async function () {
      const response = await axios.get(
        "https://jsonplaceholder.typicode.com/posts/1"
      );
      setArticle(response.data);
    })();
  }, []);

  // Menampilkan data saat aplikasi selesai memuat data
  return (
    <Suspense fallback={<div>page is loading...</div>}>
      <h2>{article.title}</h2>
      <p>{article.body}</p>
    </Suspense>
  );
}

ArticlePage komponen yang me-render tampilan judul artikel dan kontennya setelah aplikasi berhasil memuat data dari API. Integrasi API memanfaatkan axios untuk memudahkan proses fetch data.

Contoh komponen React di atas ini belum orthogonal. Kenapa? Karena integrasi API masih dilakukan dalam satu komponen dengan UI logic. Saat mengganti library dari axios dengan yang lain otomatis akan mengganti logic UI-nya. Mungkin dengan cara memisahkan fungsi integrasi dengan UI akan mengurangi efek samping perubahan.

import { Suspense } from "react";
import "./styles.css";

export default function ArticlePage({ response }) {
  // Menampilkan data saat aplikasi selesai memuat data
  return (
    <Suspense fallback={<div>page is loading...</div>}>
      <ArticleContent article={response} />
    </Suspense>
  );
}

function ArticleContent({ article }) {
  return (
    <div>
      <h2>{article.title}</h2>
      <p>{article.body}</p>
    </div>
  );
}

Dengan memisahkan fungsi logic dengan integrasi API, maka perubahan di masa depan akan lebih fleksibel dan adaptif. Untuk penerapan integrasi API dengan memanfaatkan state management, alur data pada aplikasi akan teratur.

Dalam kasus nyata mungkin komponen yang tetap bergantung dengan komponen lainnya akan masih terjadi. Karena komponen React masih memerlukan main component yang menghubungkan antar komponen dengan state management.

Keuntungan

Secara keuntungan, dengan membuat proyek yang orthogonal fungsi-fungsi dan komponen menjadi independen dan mengurangi resiko perubahan. Selain itu, keuntungan lainnya yaitu:

• Code lebih mudah dipahami
• Meningkatkan produktifitas
• Menghindari duplikasi code

Sekian, pembahasan tentang orthogonality dalam pemrograman. CMIIW!