Hotwire ile Modern Web'in Geleceği

Ende r Ahmet Y u r t @ Sams u
n GDG 2025 Hotwire ile Modern Web’in Geleceği

Ender Ahmet Yurt So f twa r e Deve l
ope r @ Teamtai l o r enderahmetyurt.com

Modern Web Akımları

Kullanıcı Deneyimi Teknolojik Gelişmeler Geliştirme Pratikleri

Kullanıcı Deneyimi Odaklılık Hızlı yükleme süreleri Mobil-first tasarım Responsive (duyarlı)
arayüzler Kesintisiz etkileşimler

Teknolojik Gelişmeler Single Page Applications (SPA) Progressive Web Apps (PWA)
Component-based mimariler API-first yaklaşımlar Cloud-native geliştirme

Geliştirme Pratikleri Version control (Git) Automated testing Continuous Integration/Deployment (CI/CD)
Agile/DevOps metodolojileri Mikroservis mimarileri

Geleneksel vs Modern Web Geliştirme

SPA’in Yükü

Teknik Karmaşıklık Geliştirici Deneyimi Sorunları İş/Proje Etkisi Kullanıcı Deneyimi

React/Vue/Angular vs.

Önümüzü Açtı AMA Karmaşıklığı da Getirdi

Karmaşık Build Süreçleri Ağır Bundle’lar Yüksek Öğrenme Eğrisi

2010 Development Flow: Edit HTML/CSS/JS → F5 → Done ✅
2020 SPA Flow: Edit → Webpack → Babel → TypeScript → PostCSS → Minify → Source Maps → Hot Reload → Bundle Analysis → Deploy 😵 Karmaşık Build Süreçleri

Ağır Bundle’lar 2010: Ortalama website 100KB 2024: Ortalama ReactApp 2MB
😅 Node modules? 🥲 Hello World yazmak için neler yüklüyoruz?

Yüksek Öğrenme Eğrisi 1 Developer = 1 Feature HTML/CSS/JS Backend
DB Deploy 2024: Specialized Teams Backends Frontends DevOps QA:s ….

Alternatif: Ruby on Rails

Convention over Configuration

HTML ove r the wi r e = Se r
ve r r ende r s, b r owse r disp l a y s

“SPA’sız SPA” fikri HTML üzerinden etkileşim.

SPA: Smooth, Complex, JS Heavy Hotwire: Smooth, Simple, HTML Heavy

SPA: HTML is Static, JS makes Dynamic Hotwire: HTML CAN
BE Static, JS just orchestrates

JS fetch JSON -> JS builds HTML - > JS
Updates DOM

Server builds HTML -> Browser swaps HTML - > Done

Turbo Turbo Drive Turbo Frames Turbo Streams

Turbo Drive Traditional Web: Click link → Browser loads entire
page → White flash Turbo Drive Solution Click link → AJAX in background → Replace <body> → Smooth!

Turbo Frames User Clicks “Edit Profile” Traditional Web: User clicks
"Edit Profile" → Entire page reloads → Sidebar reloads (unnecessary) → Header reloads (unnecessary) → Footer reloads (unnecessary) → Only profile section needed to change! Waste of bandwidth + Poor UX

Turbo Frames User Clicks “Edit Profile” Turbo solution: User clicks
"Edit" 2. Turbo fetches /users/123/edit 3. Server returns full HTML with matching frame: <turbo-frame id="user_profile"> <form> . .. </ form> </ turbo-frame> 4. Only that frame updates! 5. Rest of page untouched ✅

Turbo Streams Multiple users on same page Traditional Web: Multiple
users on same page → User A adds a comment → User B doesn't see it → User B must manually refresh page → Poor collaboration experience No real-time updates without complex WebSocket code!

Turbo Streams Multiple users on same page Turbo Streams Solutions:
User A adds comment → Saves to DB Server → Broadcasts update User B's screen → [New comment appears automatically!] Real-time collaboration! 🎉

Key Difference Turbo Drive: User navigates → Update Turbo Frames:
User clicks → Partial update Turbo Streams: Server pushes → Real-time update All three work together! 🎯

StimulusJS

StimulusJS React: "JavaScript controls everything" Stimulus: "HTML is in charge,
JavaScript helps"

✅ Lightweight ✅ HTML-first ✅ Progressive enhancement ✅ Easy to
learn ✅ Framework agnostic ❌ Full framework ❌ State management solution ❌ Routing system ❌ Virtual DOM ❌ SPA builder Turbo: Handles 90% of needs (navigation, updates) Stimulus: Handles 10% (custom interactions)

Hotwire Native: Tek Backend - Çok Yüz Web uygulamanı bir
WebView içinde gösterirsin ama native gibi hissettirirsin: • Native navigation (geri butonu, tab bar, vs.) • Native UI komponentleri (menüler, action sheets) • Offline destek • Push notification'lar • Native özellikler (kamera, GPS, vs.)

Hotwire Native: Tek Backend - Çok Yüz Web App (Rails/Hotwire)
↓ Hotwire Native Bridge ↓ Native Shell (iOS/Android) Uygulamanın %95'i web teknolojileri (HTML/CSS/JS) Sadece shell ve bazı özel özellikler native kod Tek bir backend, üç platform (web, iOS, Android)

Hotwire Native: Tek Backend - Çok Yüz Avantajları •Tek kod
tabanı paylaşıyorsun (backend + web) •Native developer'a daha az ihtiyaç •Güncellemeler instant (web'i güncelle, app otomatik güncellenir) •Hızlı prototipleme Dezavantajları • Çok karmaşık animasyonlar/UI için uygun değil • Oyun veya yoğun grafik uygulamalar için değil • Performance native kadar iyi olmayabilir • App Store review süreçleri yine var

Modern Web Development → Web app (React) → iOS app
(Swift) → Android app (Kotlin) → 3 farklı codebase → 3 farklı team → 3x development cost → 3x maintenance Small team: "We can't afford native apps" 😢

Traditional Approach Web Team: - Build web app with React
- API endpoints iOS Team: - Swift/SwiftUI - Consume same API - Rebuild all UI logic Android Team: - Kotlin/Jetpack Compose - Consume same API - Rebuild all UI logic again Result: Same feature, 3 times work!

Hotwire Native Solution Rails Backend ↓ Serves HTML ↓ →
Web Browser (shows HTML) → iOS App (shows same HTML) → Android App (shows same HTML) Write once, deploy everywhere! 🎉

Modern Web'in Geleceği Basitliğe Dönüş Trendi 🔄 Server-Side First Yaklaşımın
Yaygınlaşması 🖥 Hotwire Ekosistemine Adaptasyon 🌐 Sürdürülebilir Web Geliştirme 🌱

Ender Teşekkürler ❤

Hotwire ile Modern Web'in Geleceği

Hotwire ile Modern Web'in Geleceği

More Decks by ender

Other Decks in Technology

Featured

Transcript