Laravel adalah framework backend yang menyediakan semua fitur yang Anda perlukan untuk membangun aplikasi web modern, seperti route, validasi, cache, queues, penyimpanan file, dan masih banyak lagi. Namun, kami yakin penting untuk menawarkan pengalaman full-stack yang indah kepada developer, termasuk pendekatan yang andal untuk membangun aplikasi frontend anda.
Terdapat dua cara untuk mengembangkan frontend ketika membangun aplikasi dengan Laravel, dan pendekatan mana yang Anda pilih bergantung pada apakah Anda ingin membangun frontend Anda dengan memanfaatkan PHP atau dengan menggunakan framework JavaScript seperti Vue dan React. Kami akan membahas kedua opsi tersebut sehingga Anda dapat membuat keputusan yang tepat mengenai pendekatan terbaik untuk pengembangan frontend untuk aplikasi Anda.
Di masa lalu, sebagian besar aplikasi PHP menampilkan HTML ke browser menggunakan template HTML sederhana diselingi dengan pernyataan PHP echo yang menampilkan data yang diambil dari database selama permintaan:
<div>
<?php foreach ($users as $user): ?>
Hello, <?php echo $user->name; ?> <br />
<?php endforeach; ?>
</div>Pada Laravel, pendekatan menampilkan HTML ini masih dapat dicapai dengan menggunakan view dan Blade. Blade adalah bahasa templating yang sangat ringan yang menyediakan sintaks pendek yang nyaman untuk menampilkan data, mengulangi data, dan banyak lagi:
<div>
@foreach ($users as $user)
Hello, {{ $user->name }} <br />
@endforeach
</div>Saat membuat aplikasi dengan pendekatan ini, pengiriman formulir dan interaksi halaman lain biasanya menerima dokumen HTML yang (benar-benar) baru dari server kemudian seluruh halaman di-render ulang oleh browser. Bahkan sampai hari ini, pembangunan frontend dengan pendekatan ini dengan menggunakan template Blade yang sederhana akan menjadi perpaduan yang sempurna pada banyak aplikasi
Namun, karena ekspektasi pengguna terkait aplikasi web telah matang, banyak developer menemukan kebutuhan untuk membangun frontend yang lebih dinamis dengan interaksi yang terasa lebih halus. Mengingat hal ini, beberapa developer memilih untuk mulai membangun frontend aplikasi mereka menggunakan framework JavaScript seperti Vue dan React.
Lainnya lebih memilih untuk tetap menggunakan bahasa backend yang mereka sukai dan telah mengembangkan solusi yang memungkinkan konstruksi UI (user interface) aplikasi web modern sambil tetap menggunakan bahasa backend pilihan mereka. Misalnya, di ekosistem Rails, hal ini telah mendorong pembuatan library seperti Turbo Hotwire, dan Stimulus.
Dalam ekosistem Laravel, kebutuhan untuk membuat frontend yang modern dan dinamis terutama dengan menggunakan PHP telah menyebabkan terciptanya Laravel Livewire dan Alpine.js.
Laravel Livewire adalah sebuah framework untuk membangun frontend bertenaga Laravel yang terasa dinamis, modern, dan hidup seperti frontend yang dibuat dengan framework JavaScript modern seperti Vue dan React.
Saat menggunakan Livewire, Anda akan membuat "komponen" Livewire yang me-render bagian terpisah dari UI (user interface) Anda dan menampilkan metode dan data yang dapat dipanggil dan berinteraksi dari frontend aplikasi Anda. Misalnya, komponen "Penghitung" sederhana mungkin terlihat seperti berikut:
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Counter extends Component
{
public $count = 0;
public function increment()
{
$this->count++;
}
public function render()
{
return view('livewire.counter');
}
}Dan, template penghitung yang sesuai akan ditulis seperti ini:
<div>
<button wire:click="increment">+</button>
<h1>{{ $count }}</h1>
</div>Seperti yang Anda lihat, Livewire memungkinkan Anda menulis atribut HTML baru seperti wire:click yang menghubungkan frontend dan backend aplikasi Laravel Anda. Selain itu, Anda dapat me-render status komponen Anda saat ini menggunakan ekspresi Blade sederhana.
Bagi banyak orang, Livewire telah berevolusi pengembangan frontend dengan Laravel, memungkinkan mereka untuk tetap berada dalam kenyamanan Laravel sambil membangun aplikasi web yang modern dan dinamis. Biasanya, developer yang menggunakan Livewire juga akan memanfaatkan Alpine.js untuk "memercikan" JavaScript ke frontend mereka hanya jika diperlukan, misalnya untuk me-render jendela dialog.
Jika Anda baru menggunakan Laravel, sebaiknya pahami penggunaan dasar view dan Blade. Kemudian, lihat dokumentasi Laravel Livewire resmi untuk mempelajari cara membawa aplikasi Anda ke level selanjutnya dengan komponen Livewire interaktif.
Jika Anda ingin membuat frontend menggunakan PHP dan Livewire, Anda dapat memanfaatkan kit pemula Breeze atau Jetstream kami untuk memulai pengembangan aplikasi Anda. Kedua starter kit ini menyusun alur autentikasi backend dan frontend aplikasi Anda menggunakan Blade dan Tailwind sehingga Anda dapat langsung mulai membangun ide besar berikutnya.
Although it's possible to build modern frontends using Laravel and Livewire, many developers still prefer to leverage the power of a JavaScript framework like Vue or React. This allows developers to take advantage of the rich ecosystem of JavaScript packages and tools available via NPM.
Namun, tanpa alat tambahan, memadukan Laravel dengan Vue atau React akan membuat kita harus menyelesaikan berbagai masalah rumit seperti rute sisi klien, hydration data, dan autentikasi. Rute sisi klien sering disederhanakan dengan menggunakan framework Vue / React yang memiliki opini seperti Nuxt dan Next; namun, hydration dan autentikasi data tetap menjadi masalah yang rumit dan tidak praktis untuk dipecahkan saat memadukan kerangka kerja backend seperti Laravel dengan kerangka kerja frontend ini.
In addition, developers are left maintaining two separate code repositories, often needing to coordinate maintenance, releases, and deployments across both repositories. While these problems are not insurmountable, we don't believe it's a productive or enjoyable way to develop applications.
Untungnya, Laravel menawarkan yang terbaik pada kedua dunia. Inertia menjembatani celah antara aplikasi Laravel Anda dan frontend Vue atau React modern Anda, memungkinkan Anda untuk membangun frontend modern yang lengkap menggunakan Vue atau React sambil memanfaatkan rute dan pengontrol Laravel untuk perutean, hydration data, dan otentikasi - semuanya dalam satu repositori kode. Dengan pendekatan ini, Anda dapat menikmati kekuatan penuh dari Laravel dan Vue / React tanpa melumpuhkan kemampuan salah satu dari keduanya.
Setelah menginstal Inertia ke dalam aplikasi Laravel Anda, Anda akan menulis rute dan controller seperti biasa. Namun, alih-alih mengembalikan template Blade dari controller Anda, Anda akan mengembalikan halaman Inertia:
<?php
namespace App\Http\Controllers;
use App\Http\Controllers\Controller;
use App\Models\User;
use Inertia\Inertia;
class UserController extends Controller
{
/**
* Show the profile for a given user.
*
* @param int $id
* @return \Inertia\Response
*/
public function show($id)
{
return Inertia::render('Users/Profile', [
'user' => User::findOrFail($id)
]);
}
}Halaman Inertia berhubungan dengan komponen Vue atau React, biasanya disimpan di dalam direktori resources/js/Pages pada aplikasi Anda. Data yang diberikan ke halaman melalui metode Inertia::render akan digunakan untuk mengisi "props" dari komponen halaman:
<script setup>
import Layout from '@/Layouts/Authenticated.vue';
import { Head } from '@inertiajs/inertia-vue3';
const props = defineProps(['user']);
</script>
<template>
<Head title="User Profile" />
<Layout>
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Profile
</h2>
</template>
<div class="py-12">
Hello, {{ user.name }}
</div>
</Layout>
</template>Seperti yang Anda lihat, Inertia memungkinkan Anda untuk memanfaatkan kekuatan penuh Vue atau React ketika membangun frontend Anda, sambil menyediakan jembatan yang ringan antara backend Laravel dengan frontend JavaScript.
Jika Anda khawatir untuk menyelami Inertia karena aplikasi Anda membutuhkan rendering sisi server, jangan khawatir. Inertia menawarkan dukungan rendering sisi server. Dan, ketika men-deploy aplikasi Anda melalui Laravel Forge, akan sangat mudah untuk memastikan bahwa proses rendering sisi server Inertia selalu berjalan.
Jika Anda ingin membangun frontend menggunakan Inertia dan Vue / React, Anda dapat memanfaatkan kit pemula Breeze dan Inertia untuk memulai pengembangan aplikasi Anda. Kedua starter kit ini akan membangun alur otentikasi backend dan frontend aplikasi Anda menggunakan Inertia, Vue / React, Tailwind, dan Vite sehingga Anda bisa mulai membangun ide besar Anda berikutnya.
Terlepas dari apakah Anda memilih untuk mengembangkan frontend menggunakan Blade dan Livewire atau Vue / React dan Inertia, Anda mungkin perlu memaketkan CSS aplikasi Anda ke dalam aset yang siap untuk produksi. Tentu saja, jika Anda memilih untuk membangun frontend aplikasi Anda dengan Vue atau React, Anda juga perlu memaketkan komponen-komponen Anda ke dalam aset-aset JavaScript yang siap untuk browser.
Secara default, Laravel menggunakan Vite untuk memaketkan aset Anda. Vite menyediakan waktu pembuatan secepat kilat dan Penggantian Modul Panas (Hot Module Replacement/HMR) yang hampir seketika selama pengembangan lokal. Di semua aplikasi Laravel baru, termasuk yang menggunakan starter kits, Anda akan menemukan file vite.config.js yang memuat plugin Laravel Vite kami yang ringan sehingga penggunaan Vite pada aplikasi Laravel adalah sebuah suka cita.
Cara tercepat untuk memulai dengan Laravel dan Vite adalah dengan memulai pengembangan aplikasi Anda menggunakan Laravel Breeze, starter kit kami yang paling sederhana yang dapat memulai aplikasi Anda dengan menyediakan perancah otentikasi frontend dan backend.
Catatan
Untuk dokumentasi yang lebih mendetail tentang cara menggunakan Vite dengan Laravel, silakan lihat dokumentasi khusus tentang bundel dan kompilasi aset Anda.