Belajar NativePHP - v4 SuperNative: Blade ke SwiftUI/Jetpack Compose

#Pendahuluan

Setelah di episode 11 kita memahami persistent mode dan background execution, pada episode ini kita masuk ke paradigma baru yang paling revolusioner di NativePHP: v4 "SuperNative". Di versi ini, komponen Blade yang sebelumnya dirender di WebView kini dikonversi secara otomatis menjadi view SwiftUI (iOS) dan Jetpack Compose (Android) asli — tanpa WebView sama sekali.

Ini bukan iterasi kecil. WebView一直是 hybrid app yang membedakan dari native. Dengan SuperNative, NativePHP menutup gap ini: performa rendering asli, animasi 60fps, gesture native, dan UX yang tidak bisa dibedakan dari aplikasi native murni.

#Apa yang Berubah?

#Sebelum v4: WebView Rendering

Blade Template → HTML/CSS/JS → WebView → Render di layar

WebView adalah browser mini yang di-embed di dalam aplikasi. Ia menampilkan HTML, menjalankan JavaScript, dan merender CSS — persis seperti browser biasa. Kelemahannya: performa rendering, scrolling, dan animasi tidak sehalus native.

#Setelah v4: Native Rendering

Blade Template → SuperNative Compiler → SwiftUI (iOS) / Jetpack Compose (Android) → Render di layar

SuperNative compiler membaca komponen Blade dan menghasilkan view native yang sesuai. Hasilnya: rendering yang identik dengan aplikasi native murni, tanpa kompromi performa.

#Mapping Komponen

SuperNative menyediakan mapping dari komponen Blade ke native element:

Contoh Blade yang dikonversi:

<div class="task-card bg-white rounded-lg p-4 shadow-sm">
    <h3 class="text-lg font-semibold">{{ $task->title }}</h3>
    <p class="text-gray-500">{{ $task->description }}</p>
    <button wire:click="toggle({{ $task->id }})">
        {{ $task->completed ? 'Selesai' : 'Tandai Selesai' }}
    </button>
</div>

SuperNative mengkonversi ini menjadi:

SwiftUI (iOS):

VStack(alignment: .leading) {
    Text(task.title).font(.headline)
    Text(task.description).foregroundColor(.gray)
    Button(action: { viewModel.toggle(task.id) }) {
        Text(task.completed ? "Selesai" : "Tandai Selesai")
    }
}
.padding()
.background(Color.white)
.cornerRadius(8)

Jetpack Compose (Android):

Column(modifier = Modifier.padding(16.dp)) {
    Text(text = task.title, style = MaterialTheme.typography.headlineMedium)
    Text(text = task.description, color = Color.Gray)
    Button(onClick = { viewModel.toggle(task.id) }) {
        Text(if (task.completed) "Selesai" else "Tandai Selesai")
    }
}

#State Binding Dua Arah

Salah satu kekuatan SuperNative adalah state binding dua arah antara PHP dan native view. Saat PHP mengubah state, view update otomatis. Saat user berinteraksi dengan view, state PHP update otomatis.

<?php
 
use Livewire\Component;
 
class Counter extends Component
{
    public $count = 0;
 
    public function increment()
    {
        $this->count++;
    }
 
    public function decrement()
    {
        $this->count--;
    }
 
    public function render()
    {
        return view('livewire.counter');
    }
}

<div class="flex items-center gap-4">
    <button wire:click="decrement">-</button>
    <span class="text-2xl font-bold">{{ $count }}</span>
    <button wire:click="increment">+</button>
</div>

Saat tombol ditekan, state $count berubah di PHP → SuperNative memperbarui view native → tampilan berubah secara real-time. Semua terjadi di perangkat, tanpa network round-trip.

#Konversi dari WebView ke Native

Untuk aplikasi yang sudah ada dengan WebView, migrasi ke SuperNative relatif mulus:

<?php
 
return [
    'rendering' => [
        'mode' => 'native', // 'webview' untuk backward compatibility
        'fallback' => 'webview', // fallback jika komponen tidak didukung
    ],
];

Jika ada komponen Blade yang belum didukung oleh SuperNative, ia akan menggunakan fallback ke WebView secara selektif — tidak perlu rewrite seluruh aplikasi sekaligus.

#Praktik: Konversi Satu Layar

Ambil layar list task berbasis WebView dan konversi ke native:

Sebelum (WebView):

<div class="max-w-md mx-auto p-4">
    <h1 class="text-2xl font-bold mb-4">Tasks</h1>
    @foreach($tasks as $task)
        <div class="bg-white rounded-lg p-4 mb-2 shadow">
            <span>{{ $task->title }}</span>
        </div>
    @endforeach
</div>

Setelah diaktifkan SuperNative (mode: native), template yang sama dikonversi ke LazyColumn (Android) atau List (iOS) secara otomatis. Kode Blade tidak berubah — hanya rendering engine-nya yang berpindah dari WebView ke native.

#Penutup

Inti yang harus dibawa pulang:

• v4 SuperNative menghapus WebView — Blade template dirender sebagai SwiftUI/Jetpack Compose asli.
• Mapping komponen: <div> → VStack/Column, <button> → Button, <input> → TextField.
• State binding dua arah: PHP ↔ native view, real-time tanpa network.
• Backward compatible: fallback ke WebView untuk komponen yang belum didukung.
• Kode Blade tidak berubah — hanya rendering engine yang berpindah.

Di episode 13 selanjutnya, kita akan membahas Native Components & Navigation — top bar, tab bar, list native, glass effects, transisi platform, native route middleware, dan navigasi dengan stack asli. Sampai jumpa di episode 13!