İnertia, klasik sunucu tarafı web uygulamaları oluşturmak için yeni bir yaklaşımdır. Biz buna modern monolit diyoruz.
İnertia, modern tek sayfa uygulamalarının karmaşıklığı olmadan tamamen istemci tarafında oluşturulmuş uygulamalar yaratmanızı sağlar. Bunu, zaten sevdiğiniz mevcut sunucu tarafı kalıplarını kullanarak yapar.
İnertia, istemci tarafı yönlendirmesi yapmaz ve bir API gerektirmez. Sadece her zaman yaptığınız gibi denetleyiciler ve sayfa görünümleri oluşturun! İnertia, herhangi bir arka uç çerçevesiyle harika çalışır, ancak Laravel için özellikle iyileştirilmiştir.
Bir çerçeve değil İnertia bir çerçeve veya mevcut sunucu veya istemci tarafı çerçevelerinizin yerine geçmez. Bunun yerine, onlarla çalışmak için tasarlanmıştır. İnertia’yı, ikisini birleştiren bir yapıştırıcı olarak düşünün. İnertia bunu adaptörler aracılığıyla yapar. Şu anda üç resmi istemci tarafı adaptörümüz var (React, Vue ve Svelte) ve iki sunucu tarafı adaptörümüz (Laravel ve Rails).
Kime yönelik Inertia.js?
Inertia, genellikle Laravel, Ruby on Rails veya Django gibi çerçeveleri kullanarak sunucu tarafı oluşturulan uygulamaları geliştiren ekipler ve bireysel yazılımcılar için tasarlanmıştır. Bu kişiler denetleyiciler oluşturur, veritabanından veri alır (bir ORM aracılığıyla) ve görünümleri oluşturur.
Ancak, bu geliştiriciler sunucu tarafı oluşturulan görünümlerini modern JavaScript tabanlı tek sayfa uygulama arayüzüyle değiştirmek istediklerinde ne olur? Cevap her zaman “bir API oluşturmanız gerekir” şeklindedir. Çünkü modern tek sayfa uygulamaları böyle oluşturulur.
Bu, bir REST veya GraphQL API oluşturmak anlamına gelir. Bu, o API için kimlik doğrulama ve yetkilendirme çözmeniz anlamına gelir. Bu, istemci tarafı durum yönetimi anlamına gelir. Bu, yeni bir Git deposu kurmak anlamına gelir. Bu, daha karmaşık bir dağıtım stratejisi anlamına gelir. Ve bu liste devam eder. Bu tam bir paradigm değişimi demektir.
Inertia, eklenen hiçbir karmaşıklık olmadan tamamen JavaScript tabanlı tek sayfa uygulamaları oluşturmanıza olanak tanır.
Inertia, klasik sunucu tarafı oluşturulan uygulamalara çok daha fazla benzer. Denetleyiciler oluşturursunuz, veritabanından veri alırsınız (ORM aracılığıyla) ve görünümleri oluşturursunuz. Ancak, Inertia görünümleri React, Vue veya Svelte ile yazılmış JavaScript sayfa bileşenleridir.
Bu, istemci tarafı uygulama ve modern tek sayfa uygulama deneyimi gücüne sahip olmanız anlamına gelir, ancak bir API oluşturmanıza gerek yoktur. Biz bunun üretkenliğinizi artıracak bir nefes aldığını düşünüyoruz.
Inertia nasıl çalışır?
Inertia ile, tercih ettiğiniz sunucu tarafı web çerçevenizle her zamanki gibi uygulamalar oluşturursunuz. Rota belirleme, denetleyiciler, ara yazılımlar, kimlik doğrulama, yetkilendirme, veri alımı ve daha fazlası için çerçevenizin mevcut işlevselliğini kullanırsınız.
Ancak Inertia, uygulamanızın görünüm katmanını değiştirir. Blade şablonları aracılığıyla sunucu tarafı işleme yerine uygulamanızın döndürdüğü görünümler JavaScript sayfa bileşenleridir. Bu, tercih ettiğiniz sunucu tarafı çerçeveniz olan Laravel veya başka bir sunucu tarafı çerçevenizi kullanarak tamamı React, Vue veya Svelte ile ön uç oluşturmanızı sağlar.
Bekleyebileceğiniz gibi, yalnızca ön uç işlemlerini JavaScript kullanarak tek sayfa uygulama deneyimi elde edemezsiniz. Bir bağlantıya tıkladığınızda, tarayıcınız tam sayfa ziyareti yapar, bu da sonraki sayfa yüklemesinde istemci tarafı çerçevenizi yeniden başlatır. İşte burada Inertia her şeyi değiştirir.
Esasen, Inertia bir istemci tarafı yönlendirme kütüphanesidir. Tam sayfa yeniden yüklemeden sayfa ziyaretleri yapmanızı sağlar. Bu, normal bir çapa bağlantısının hafif bir sargısı olan <Link> bileşeni kullanılarak yapılır. Bir Inertia bağlantısına tıkladığınızda, Inertia tıklamayı yakalar ve ziyareti XHR aracılığıyla yapar. Hatta router.visit() kullanarak JavaScript’te programatik olarak bu ziyaretleri yapabilirsiniz.
Inertia bir XHR ziyareti yaptığında, sunucu bir Inertia ziyareti olduğunu algılar ve tam HTML yanıtı yerine JavaScript sayfa bileşeni adı ve verileri (props) içeren JSON yanıtı döndürür. Inertia daha sonra önceki sayfa bileşenini yeni sayfa bileşeniyle dinamik olarak değiştirir ve tarayıcının geçmiş durumunu günceller.
Sonuç olarak, pürüzsüz bir tek sayfa deneyimi elde edilir.
Sunucu tarafı kurulumu
Inertia’yı kurarken ilk adım, sunucu tarafı çerçevenizi yapılandırmaktır. Inertia’nın resmi bir Laravel sunucu tarafı adaptörü vardır. Inertia, Laravel için optimize edildiğinden, bu web sitesindeki belgelendirme örnekleri Laravel’i kullanır.
Laravel’in başlangıç kitleri olan Breeze ve Jetstream, yeni Inertia uygulamaları için kutudan çıkarılmış bir iskelet yapısı sağlar. Bu başlangıç kitleri, Laravel ve Vue veya React kullanarak yeni bir Inertia projesi oluşturmanın mutlak en hızlı yolu.
Kök şablon, uygulamanıza ilk sayfa ziyaretinde yüklenecek olan kök şablonu ayarlayın. Bu, sitenizin varlıklarını (CSS ve JavaScript) yüklemek için kullanılacak ve ayrıca JavaScript uygulamanızı başlatmak için bir kök <div> içerecektir.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
@vite('resources/js/app.js')
@inertiaHead
</head>
<body>
@inertia
</body>
</html>Bu şablon, varlıklarınızı ve @inertia ve @inertiaHead yönergelerini içermelidir.
Varsayılan olarak, Inertia’nın Laravel adaptörü, kök şablonunuzun app.blade.php olarak adlandırıldığını varsayar. Farklı bir kök görünümü kullanmak isterseniz, Inertia :: setRootView () yöntemini kullanarak değiştirebilirsiniz.
Inertia ara yazılımını kurmamız gerekiyor. Bunun için aşağıdaki Artisan komutunu kullanarak HandleInertiaRequests ara yazılımını uygulamanıza yayımlayabilirsiniz.
php artisan inertia:middleware
Ara yazılım yayınlandıktan sonra, App\Http\Kernel dosyasında web ara yazılım grubunun son öğesi olarak HandleInertiaRequests ara yazılımını kaydedin.
'web' => [
// ...
\App\Http\Middleware\HandleInertiaRequests::class,
],Bu ara yazılım, varlık sürümünüzü belirlemek için version() yöntemi sağlar ve paylaşılan verileri tanımlamak için share() yöntemini sağlar.
Hazırsınız, artık sunucu tarafında kullanıma hazırsınız! Şimdi Inertia sayfaları oluşturarak ve yanıtlar aracılığıyla bunları renderlamaya başlayabilirsiniz.
use Inertia\Inertia;
class EventsController extends Controller
{
public function show(Event $event)
{
return Inertia::render('Event/Show', [
'event' => $event->only(
'id',
'title',
'start_date',
'description'
),
]);
}
}Müşteri tarafı kurulumu
Sunucu tarafı çerçevenizi yapılandırdıktan sonra, müşteri tarafı çerçevenizi yapılandırmanız gerekir. Inertia şu anda React, Vue ve Svelte için destek sağlamaktadır.
Laravel başlangıç kitleri, Laravel’in başlangıç kitleri olan Breeze ve Jetstream, yeni Inertia uygulamaları için kutudan çıkarılabilir iskelet oluşturma sağlar. Bu başlangıç kitleri, Laravel ve Vue veya React kullanarak yeni bir Inertia projesi oluşturmanın mutlak en hızlı yoludur.