ev borcu WordPress sitesi
Inertia.js: Tek Sayfalı Uygulamaları Eski Yöntemle Oluşturma
Yıllardır Laravel uygulamaları geliştiriyorum. Mergebot (RIP 😢) ve SpinupWP gibi büyük, veri ağırlıklı uygulamalardan en son yan projem Formstatic gibi küçük yan projelere kadar. Bu nedenle, Laravel uygulamaları oluşturmayı çok daha kolay hale getirmeyi vaat eden yeni bir çerçeve ortaya çıktığında, onu kontrol etmekten çok mutlu oluyorum. Son bir süredir, Jonathan Reinink'in Inertia.js adlı yeni bir gelecek vaat eden çerçevesini kullanarak en son yan projemi oluşturuyorum.
Bu yazıda, Inertia'nın ne olduğuna, neden kullanmayı düşünmeniz gerektiğine ve bir sonraki Laravel uygulamanızda nasıl kullanmaya başlayabileceğinize bir göz atacağız.
Inertia.js nedir?
Inertia kendisini “Modern Monolit” olarak adlandırıyor ve bir API oluşturmadan tek sayfalık uygulamalar (SPA) oluşturmanıza izin verdiğini iddia ediyor. Bunu, JS'nin dünyayı yönetmesinden önceki en parlak zamanlardan, eskinin klasik sunucu tarafı çerçevelerinde kendisini modelleyerek yapar. Bu, modern SPA'lar (örneğin, istemci tarafı yönlendirme, API'ler, vb.) oluşturmanın getirdiği karmaşıklık hakkında endişelenmenize gerek olmadığı anlamına gelir.
Buradaki fikir, web uygulamanızı tam sayfa yüklemeleriyle sunucu tarafından oluşturulmuş bir uygulama gibi yazmanızdır. Sadece kontrolörler ve görünümler. Aradaki fark, görüşlerinizin aslında istemci tarafı bileşenleri olmasıdır. Uygulamanız ilk yüklendiğinde tam bir HTML sayfası döndürülür. Ancak, sonraki tüm sayfa ziyaretleri AJAX (XHR) aracılığıyla yapılır ve JSON döndürür.
Eylemsizlik, bir page nesnesini bir istemci tarafı uygulamasına geçirerek, sunucu tarafından oluşturulan ilk HTML sayfanızı bir SPA'ya dönüştürür. Bu page nesnesi, sayfa bileşenini (bileşen, aksesuarlar, URL, vb.) oluşturmak için gereken gerekli bilgileri içerir. Ardından, sonraki sayfa ziyaretlerinde istekler AJAX aracılığıyla gönderilir ve yanıt aynı page nesnesi verilerini JSON biçiminde döndürür. Sunucu tarafı şeyler, isteğin bir Atalet isteği olup olmadığını ve HTML veya JSON sunması gerekip gerekmediğini algılamak için üstbilgileri kullanan ara katman yazılımı tarafından işlenir. Oldukça dahi.
Neden Inertia.js kullanmalıyım?
Inertia'yı neden kullanmayı düşünmeniz gerektiğini açıklamak için öncelikle web uygulamaları oluşturmaya gelince mevcut durumu anlamanıza yardımcı olur. Örnek olarak SpinupWP'yi (Laravel) kullanarak, onu Laravel'in kutudan çıktığı haliyle gelen "hibrit" mimari türünü kullanarak oluşturduk. Bir Vue bileşeni içeren bir blade görünümü oluşturan sunucu tarafı denetleyicilerimiz var. Vue bileşeni daha sonra JSON yanıtlarını döndüren ayrı bir sunucu tarafı denetleyicisi olan bir API kullanarak arka uçla etkileşime girer.
Bu mimari, hepsinin ayrı ayrı korunması gereken ve hatta uygulamanın klasör yapısında farklı yerlerde yaşaması gereken birçok parçaya sahiptir. Uygulamadaki farklı sayfalar için hala ayrı bir tam sayfa yüklemeye ihtiyacımız olduğundan, uygun bir SPA bile değil. Bu, uygulamanın bilişsel yüküne ve bakım yüküne katkıda bulunur.
Atalet, aksine, çok daha az parça ile daha eksiksiz bir SPA inşa etmemizi sağlar. En son yan projemi oluşturmak için Inertia'yı kullandım ve Laravel'de web uygulamaları oluşturma sürecini basitleştirme söz konusu olduğunda bu gerçekten yeni bir soluk getiriyor.
Inertia.js'yi nasıl kullanırım?
Eylemsizlik aslında çerçeve agnostiktir, yani adaptörlerin kullanımı yoluyla hemen hemen her sunucu tarafı çerçeve (örn. Laravel, Rails, vb.) ve istemci tarafı çerçeve (Vue, React, Svelte, vb.) ile çalışabilir. Bu küçük örneğin amaçları için, Laravel ve Vue kullanarak Inertia'nın nasıl kurulacağını açıklayacağım.
Inertia'yı sunucu tarafında kurmak için, ilk olarak composer kullanarak inertia-laravel bağdaştırıcısını kurun:
composer require inertiajs/inertia-laravel
Ardından, uygulamamız için bir düzen görevi gören bir app.blade.php dosyamız olduğundan emin olmamız gerekiyor. Bu şablon, @inertia yönergesinin yanı sıra tüm varlıkları içermelidir.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link href="{{ mix('/css/app.css') }}" rel="stylesheet" /> <script src="{{ mix('/js/app.js') }}" defer></script> </head> <body> @inertia </body> </html>
Son olarak, ilk denetleyiciyi ve yanıtı oluşturun. Normalde Laravel'de bir blade şablonu oluşturmak için yaptığımız gibi bir view() döndürmek yerine, Inertia Inertia::render() 'ı bir ön uç (Vue) bileşeni adıyla döndürmemiz gerekir.
use Illuminate\Http\Request; use Inertia\Inertia; class BooksController extends Controller { public function books(Request $request) { $books = $request->user()->books()->orderBy('created_at', 'desc')->paginate(10); return Inertia::render('Books', [ 'books' => $books, ]); } }
Inertia'yı istemci tarafında kurmak için, önce inertia paketini ve inertia-vue bağdaştırıcısını kurmamız gerekiyor:
npm install @inertiajs/inertia @inertiajs/inertia-vue
Ardından, app.js dosyamızda Inertia'yı kullanmak için Vue'yu kurmamız gerekiyor:
import { InertiaApp } from '@inertiajs/inertia-vue'; import Vue from 'vue'; Vue.use(InertiaApp); const app = document.getElementById('app'); new Vue({ render: h => h(InertiaApp, { props: { initialPage: JSON.parse(app.dataset.page), resolveComponent: name => require(`./Pages/${name}`).default, }, }), }).$mount(app);
require(`./Pages/${name}`) dikkat edin? Vue bileşenlerimizi nereye yükleyeceğimizi bu şekilde tanımlarız. Son olarak, ./Pages dizininde Book.vue bileşenini oluşturun:
<template> <div> <h1>Books</h1> <ul> <li v-for="book in books.data"> <inertia-link :href="`/books/${book.id}`"> {{ book.title }} </inertia-link> </li> </ul> </div> </template> <script> export default { props: { books: Object } } </script>
İşte aldın! İstemci tarafı yönlendirme ve API'ler hakkında düşünmek zorunda kalmadan Laravel ve Vue kullanılarak oluşturulmuş eksiksiz bir SPA.
Sonraki adımlar
Gördüğünüz gibi Inertia, modern SPA'lar oluşturmayı geçmişin sunucu tarafından oluşturulan eski web uygulamalarını oluşturmak kadar basit hale getiriyor. Benim düşünceme göre, modern SPA'ların getirdiği karmaşıklık olmadan, tamamen istemci tarafında oluşturulmuş, tek sayfalık uygulamalar oluşturmanıza izin verme vaadini gerçekten yerine getiriyor.
Bu makalede Atalet'in yalnızca yüzeyini çizdim. İlgileniyorsanız, çerçeveye ve nasıl çalıştığına aşina olmak için Atalet belgelerini iyi bir şekilde okumanızı tavsiye ederim. Vurgulayacağım bir şey, eğer Laravel kullanıyorsanız, ön uç bileşenlerinizde route() yardımcı yöntemiyle kullanılabilecek adlandırılmış yollar oluşturmak için Ziggy'yi ayarlamaya değer.
Inertia'nın arka planıyla daha fazla ilgileniyorsanız, Adam Wathan'ın Jonathan ile neden çerçeveyi oluşturmaya karar verdiği hakkında konuştuğu bu Full Stack Radio podcast'ini önerebilirim.
Hiç SPA kurdunuz mu? Inertia'yı denemeyi düşünüyor musun? Laravel ve Vue ile SPA'lar oluşturmaya ilişkin başka ipuçlarınız var mı? Yorumlarda bize bildirin.