Optimasi NextJS dengan Aidomx React

#react #nextjs #ui #programming

Menata Ulang UI React dengan Pendekatan Deklaratif dan Terkontrol

Latar Belakang

Dalam proyek React berskala menengah hingga besar, pengelolaan komponen dan logika UI sering kali menjadi tantangan. Komponen UI tersebar di banyak file, logika bisnis tercampur dengan tampilan, dan perubahan kecil di satu bagian dapat berdampak besar pada keseluruhan aplikasi.

Masalah ini memunculkan kebutuhan akan sistem yang:

Memisahkan logika dan tampilan,
Dapat dikontrol secara terpusat,
Mendukung struktur UI yang dinamis,
Mudah untuk diuji dan dikembangkan lebih lanjut.

Apa itu Aidomx?

Aidomx adalah sistem berbasis rules yang memungkinkan kamu merender UI React secara deklaratif dan terpusat. Sistem ini dibagi menjadi dua bagian utama:

@aidomx/core: Mengelola virtual elements, komposisi logic, dan struktur berbasis identitas.
@aidomx/react: Bertugas sebagai integrasi React dan perender komponen berdasarkan rules dari core.

Dengan pendekatan ini, UI tidak lagi ditulis sebagai JSX biasa, melainkan dibentuk dari konfigurasi objek (rules) yang bisa didefinisikan, diubah, dan bahkan dienkripsi jika diperlukan.

Fitur Utama

UI berbasis aturan (rules-driven)
Pemisahan logika dan presentasi
Dukungan penuh untuk tema, skeleton, dan komposisi dinamis
Deklaratif dan mudah dikontrol
Performant, bahkan mengungguli rendering statis Next.js dalam beberapa kasus

Contoh Implementasi Sederhana

// rules/index.ts
import { defineRules } from '@aidomx/core'

export const rules = defineRules({
  root: 'container',
  components: [],
})

// rules/welcome.ts
import type { RuleComponent } from '@aidomx/core'

const welcome: RuleComponent[] = [
  {
    name: 'title',
    design: {
    type: 'h1',
      className: 'text-xl font-bold',
      content: 'Welcome to Aidomx!',
    },
  },
]

export default welcome

Untuk menerapkan rules, buat file :

// app/providers.tsx
"use client"

import { AidomxProvider } from '@aidomx/react'
import { rules } from '../rules'
import { ReactNode } from 'react'

export function Providers({ children }: { children: ReactNode }) {
  return (
    <AidomxProvider value={rules}>
      {children}
    </AidomxProvider>
  )
}

Dan atur layout.tsxseperti berikut :

import type { Metadata } from 'next'
import { Geist, Geist_Mono } from 'next/font/google'
import './globals.css'
import { Providers } from './providers'

const geistSans = Geist({
  variable: '--font-geist-sans',
  subsets: ['latin'],
})

const geistMono = Geist_Mono({
  variable: '--font-geist-mono',
  subsets: ['latin'],
})

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

Untuk melihat hasilnya, kita perlu membuat file Home.tsx seperti berikut :

// app/Home.tsx
'use client'

import { Aidomx } from '@aidomx/react'
import { useEffect, useRef, useState } from 'react'
import welcome from '../rules/welcome'

export default function Home() {
  const start = useRef(performance.now())
  const [renderTime, setRenderTime] = useState('')
  const [interactTime, setInteractTime] = useState('')
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    const end = performance.now()
    setRenderTime((end - start.current).toFixed(2) + 'ms')

    const interactStart = performance.now()
    const interactEnd = performance.now()
    setInteractTime((interactEnd - interactStart).toFixed(2) + 'ms')

    setMounted(true)
  }, [])

  if (!mounted) return <>Loading...</>

  return (
    <div className="p-6">
      <div className="mb-4 text-gray-500">
        <div>Waktu render: {renderTime}</div>
        <div>Waktu interaksi: {interactTime}</div>
      </div>
      <Aidomx name="container" scope={{ welcome }} />
    </div>
  )
}

Dan atur page.tsx seperti berikut :

// app/page.tsx
import Home from './Home'

export default async function Page() {
  return <Home />
}

Manfaat Aidomx

Konsistensi: Semua elemen UI dikontrol dari satu sumber aturan.
Adaptif: Perubahan UI dapat dikontrol berdasarkan identitas pengguna, lingkungan, atau kondisi lain.
Testability: Karena UI didefinisikan sebagai data, mudah diuji tanpa perlu merender DOM.
Enkripsi: Data sensitif di dalam komponen bisa dienkripsi dan didekripsi secara aman.

Kesimpulan

Aidomx lahir dari kebutuhan nyata untuk mengelola kompleksitas UI modern dengan cara yang terstruktur, modular, dan efisien. Dengan memisahkan logika dan tampilan, serta mendukung pendekatan deklaratif, Aidomx memberikan fondasi yang kuat untuk membangun antarmuka dinamis yang terkontrol penuh—tanpa mengorbankan performa atau fleksibilitas.

Repository github : @aidomx/react