Yeni projelere imza atmak ve yenilikçi beyinlerle iş birliği yapmak beni her zaman heyecanlandırıyor.

Telefon

+90 505 447 91 51

Website

https://dogangokce.com

Adres

İnönü Mah. 154. Sk. 14/4 Torbalı İZMİR

Sosyal Bağlantılar

Open Source Contributions

TALL Stack ile Tam Yığın (Full-Stack) Uygulama Geliştirmek

Laravel, Alpine.js, Tailwind CSS ve Livewire’ı entegre ederek dinamik ve duyarlı (responsive) bir web uygulamasını TALL Stack kullanarak nasıl geliştireceğinizi öğrenin.

TALL Stack ile Tam Yığın (Full-Stack) Uygulama Geliştirmek

TALL Stack ile Full-Stack Uygulama Geliştirmek

Eğer güçlü, modern ve zarif bir şekilde full-stack web uygulamaları geliştirmek istiyorsanız, TALL stack tam size göre olabilir. Bu yapı dört temel teknolojiden oluşur:

  • Tailwind CSS – utility-first (yardımcı sınıf temelli) stillendirme

  • Alpine.js – etkileşim için hafif JavaScript

  • Laravel – sağlam ve esnek bir PHP backend framework’ü

  • Livewire – tek satır JavaScript yazmadan reaktif bileşenler

Gerçek dünyada kullanılabilir, hızlı, sade ve tamamen etkileşimli bir uygulamayı TALL stack kullanarak nasıl geliştirdiğimi adım adım paylaşıyorum:


1. Laravel Projesini Kurmak

İlk olarak, Blade + Livewire yapısıyla birlikte gelen Laravel Breeze kullanarak yeni bir Laravel uygulaması oluşturdum:

bash
laravel new tall-app   cd tall-app   composer require laravel/breeze --dev   php artisan breeze:install blade   npm install && npm run dev   php artisan migrate  

Bu işlem, Livewire ve Tailwind CSS’in önceden yapılandırılmış olduğu temiz bir başlangıç ortamı sundu.


2. Livewire Bileşenleri Oluşturmak

Etkileşim için ayrı bir JavaScript dosyası yazmak yerine, doğrudan Livewire bileşenleri oluşturdum:

bash
php artisan make:livewire PostForm

Bu komut bir Blade görünümü ve form mantığını (doğrulama dahil) yönettiğim bir PHP sınıfı oluşturdu—AJAX ya da frontend framework’e ihtiyaç duymadım.


3. Hızlı ve Temiz Arayüzler için Tailwind CSS

Tailwind’in utility sınıfları ile UI oluşturmak oldukça akıcı ve hızlıydı:

html
<input type="text" wire:model="title" class="border rounded p-2 w-full">

Özel CSS yazmadan, doğrudan sade, işlevsel ve responsive arayüzler geliştirdim.


4. Minimal JavaScript için Alpine.js

Livewire dışında ufak etkileşimler (örneğin açılır menüler, modal pencereler) gerektiğinde Alpine.js kullandım:

html
<div x-data="{ open: false }">    <button @click="open = !open">Toggle</button>    <div x-show="open">Bu bir açılır menü</div> </div>

Alpine son derece hafif ve Laravel Blade bileşenleriyle kusursuz bir şekilde entegre oluyor.

JavaScript, Vietnam Developer
2 dk. okuma
Ara 20, 2024
Doğan GÖKÇE< tarafından
Paylaş

İlgili gönderiler

Şub 04, 2025 • 3 dk. okuma
2024 Yılı İçin Web Geliştiricilerine Özel 5 Temel Araç

Web geliştirme dünyası her zamankinden daha hızlı bir şekilde evriliyo...

Ara 23, 2024 • 3 dk. okuma
2024’te Yeni Web Geliştirme Trendlerine Uyum Sağlamak

Web geliştirme her zamankinden daha hızlı ilerliyor ve 2024 de bu konu...

Eki 21, 2024 • 3 dk. okuma
Yeni Başlayanlar için Laravel’e Derinlemesine Bir Bakış

Laravel’i öğrenmek isteyen yeni başlayanlar için kurulumdan basit bir...