GDG Samsun 2025 - Hotwire ile Modern Web'in Geleceği
webender
0 views
43 slides
Oct 20, 2025
Slide 1 of 48
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
About This Presentation
Hotwire ile Modern Web'in Geleceği
Slide Content
Ender Ahmet Yurt @ Samsun GDG 2025
Hotwire ile
Modern Web’in Geleceği
Hotwire ile
Modern Web’in Geleceği
Ender Ahmet Yurt
Software Developer @ Teamtailor
enderahmetyurt.com
Software Developer @ Teamtailor
enderahmetyurt.com
Modern Web Akımları
Kullanıcı Deneyimi
Teknolojik Gelişmeler
Geliştirme Pratikleri
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
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
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
Version control (Git)
Automated testing
Continuous Integration/Deployment (CI/CD)
Agile/DevOps metodolojileri
Mikroservis mimarileri
Geleneksel vs Modern
Web Geliştirme
Web Geliştirme
SPA’in Yükü
Teknik Karmaşıklık
Geliştirici Deneyimi Sorunları
İş/Proje Etkisi
Kullanıcı Deneyimi
Geliştirici Deneyimi Sorunları
İş/Proje Etkisi
Kullanıcı Deneyimi
React/Vue/Angular vs.
Önümüzü Açtı
AMA
Karmaşıklığı da Getirdi
AMA
Karmaşıklığı da Getirdi
Karmaşık Build Süreçleri
Ağır Bundle’lar
Yüksek Öğrenme Eğrisi
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
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?
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
….
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 over the wire = Server renders, browser displays
“SPA’sız SPA” fikri
HTML üzerinden etkileşim.
HTML üzerinden etkileşim.
SPA: Smooth, Complex, JS Heavy
Hotwire: Smooth, Simple, HTML Heavy
Hotwire: Smooth, Simple, HTML Heavy
SPA: HTML is Static, JS makes Dynamic
Hotwire: HTML CAN BE Static, JS just
orchestrates
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
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!
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
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 ✅
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!
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! %
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! &
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"
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)
✅ 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.)
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)
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
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" (
→ 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!
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! %
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 ,
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 ❤
Teşekkürler ❤
Categories
TechnologyDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 0
- Slides 43
- Age 43 days
Related Slideshows
11
8-top-ai-courses-for-customer-support-representatives-in-2025.pptx
JeroenErne2
44 views
10
7-essential-ai-courses-for-call-center-supervisors-in-2025.pptx
JeroenErne2
45 views
13
25-essential-ai-courses-for-user-support-specialists-in-2025.pptx
JeroenErne2
36 views
11
8-essential-ai-courses-for-insurance-customer-service-representatives-in-2025.pptx
JeroenErne2
33 views
21
Know for Certain
DaveSinNM
19 views
17
PPT OPD LES 3ertt4t4tqqqe23e3e3rq2qq232.pptx
novasedanayoga46
23 views