```
### Turbo Frames ile Lazy Loading
Frameler, `src` ozelligi kullanilarak iceriklerini asenkron olarak yukleyebilir. Yukleme sirasinda ilk icerik goruntulenir.
```erb
Dashboard
Loading statistics...
Loading notifications...
<%= render "activity/placeholder" %>
```
Denetleyici, yalnizca istenen frame'i iceren bir gorunumle yanit verir.
```ruby
# app/controllers/dashboard_controller.rb
class DashboardController < ApplicationController
def stats
@user_count = User.count
@message_count = Message.count
@active_today = User.where("last_seen_at > ?", 24.hours.ago).count
# Partial rendering for the frame
render partial: "dashboard/stats"
end
end
```
```erb
<%= @user_count %>
Users
<%= @message_count %>
Messages
<%= @active_today %>
Active today
```
## Gercek Zamanli Guncellemeler icin Turbo Streams
Turbo Streams, DOM manipulasyonu icin sekiz eylem sunar: `append`, `prepend`, `replace`, `update`, `remove`, `before`, `after` ve `morph`. Bu eylemler HTTP yaniti veya WebSocket araciligiyla tetiklenebilir.
```ruby
# app/controllers/messages_controller.rb
class MessagesController < ApplicationController
def create
@message = current_user.messages.build(message_params)
respond_to do |format|
if @message.save
# Turbo Stream response to add the message
format.turbo_stream do
render turbo_stream: [
turbo_stream.prepend("messages", @message),
turbo_stream.update("message_count", partial: "messages/count"),
turbo_stream.replace("new_message", partial: "messages/form",
locals: { message: Message.new })
]
end
format.html { redirect_to messages_path, notice: "Message created" }
else
format.turbo_stream do
render turbo_stream: turbo_stream.replace(
"new_message",
partial: "messages/form",
locals: { message: @message }
)
end
format.html { render :new, status: :unprocessable_entity }
end
end
end
def destroy
@message = Message.find(params[:id])
@message.destroy
respond_to do |format|
# Removal with animation
format.turbo_stream { render turbo_stream: turbo_stream.remove(@message) }
format.html { redirect_to messages_path, notice: "Message deleted" }
end
end
end
```
### Ozel Turbo Stream Sablonlari
Daha karmasik yanitlar icin `.turbo_stream.erb` sablonu daha fazla esneklik sunar.
```erb
<%= turbo_stream.prepend "messages" do %>
<%= render @message %>
<% end %>
<%= turbo_stream.update "message_count" do %>
<%= Message.count %> messages
<% end %>
<%= turbo_stream.replace "new_message" do %>
<%= render "form", message: Message.new %>
<% end %>
<%= turbo_stream.prepend "flash_messages" do %>
Message sent successfully!
<% end %>
```
> **Yanit Formati**
>
> Turbo Stream yanitlari `text/vnd.turbo-stream.html` content-type'ina sahip olmalidir. Rails bunu `respond_to` ve `turbo_stream` formati ile otomatik olarak yonetir.
## Action Cable ile Gercek Zamanli Broadcasting
Turbo Streams, WebSocket broadcasting ile gercek gucunu gosterir. Kullanicilar polling olmadan aninda guncellemeler alir.
```ruby
# app/models/message.rb
class Message < ApplicationRecord
belongs_to :room
belongs_to :author, class_name: "User"
# Automatic broadcast after creation
after_create_commit do
broadcast_append_to(
room,
target: "messages",
partial: "messages/message",
locals: { message: self }
)
end
# Broadcast after update
after_update_commit do
broadcast_replace_to(
room,
target: dom_id(self),
partial: "messages/message",
locals: { message: self }
)
end
# Broadcast after deletion
after_destroy_commit do
broadcast_remove_to(room, target: dom_id(self))
end
end
```
Gorunum, `turbo_stream_from` helper'i ile ilgili stream'e abone olur.
```erb
<% end %>
```
### Ust Frame Disinda Gezinme
Varsayilan olarak, bir frame'deki baglantilar o frame icinde kalir. `data-turbo-frame` ozelligi, baska bir frame'i veya tum sayfayi hedeflemeyi saglar.
```erb
```
```erb
<%= yield %>
```
> **Turbo Hata Ayiklama**
>
> Gelistirme ortaminda JavaScript konsolunu acip `Turbo.setProgressBarDelay(0)` yazarak ilerleme cubugunu hemen gorebilirsiniz. `Turbo.session.drive = false` Turbo Drive'i gecici olarak devre disi birakir.
## Hata Yonetimi ve Yukleme Durumlari
Iyi bir UX, yukleme durumlarinin ve ag hatalarinin yonetilmesini gerektirir.
```erb
<%= form_with model: @model,
data: {
controller: "form-loading",
action: "turbo:submit-start->form-loading#disable turbo:submit-end->form-loading#enable"
} do |f| %>
<%= yield f %>
<% end %>
```
```javascript
// app/javascript/controllers/form_loading_controller.js
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["submit", "text", "spinner"]
disable() {
this.submitTarget.disabled = true
this.textTarget.classList.add("hidden")
this.spinnerTarget.classList.remove("hidden")
}
enable() {
this.submitTarget.disabled = false
this.textTarget.classList.remove("hidden")
this.spinnerTarget.classList.add("hidden")
}
}
```
### Sunucu Hatasi Yonetimi
```ruby
# app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
rescue_from ActiveRecord::RecordNotFound do |exception|
respond_to do |format|
format.turbo_stream do
render turbo_stream: turbo_stream.replace(
"main_content",
partial: "shared/not_found"
)
end
format.html { render "errors/not_found", status: :not_found }
end
end
end
```
## Performans Optimizasyonu
Birkac teknik, performansli Turbo uygulamalari saglar.
```ruby
# app/controllers/messages_controller.rb
class MessagesController < ApplicationController
# Avoid N+1 queries with eager loading
def index
@messages = Message.includes(:author, :room)
.order(created_at: :desc)
.page(params[:page])
end
# Fragment caching for static elements
def show
@message = Message.find(params[:id])
fresh_when @message
end
end
```
```erb
<% cache message do %>
<%= message.content %>
By <%= message.author.name %>
<% end %>
```
## Sonuc
Hotwire ve Turbo, geleneksel JavaScript frameworklerinin karmasikligini ortadan kaldirarak Rails gelistirmeyi donusturuyor. Turbo Drive gezinmeyi hizlandirir, Turbo Frames hedefli guncellemelere olanak tanir ve Turbo Streams guclu gercek zamanli yetenekler sunar.
### Hotwire ile Baslama Kontrol Listesi
- Dahili Hotwire entegrasyonu icin Rails 7+ kullanmak
- Uc bileseni anlamak: Drive, Frames ve Streams
- Turbo Frames'ten fayda saglayacak sayfa bolgelerini belirlemek
- Denetleyicilerde `respond_to` ile `format.turbo_stream` kullanmak
- Gercek zamanli ozellikler icin broadcasting uygulamak
- Basit JavaScript etkilesimleri icin Stimulus ile birlestirmek
Bu "kablo uzerinden HTML" yaklasimi, Ruby on Rails'i bu kadar guclu kilan basitligi ve uretkenliyi koruyarak modern, reaktif uygulamalar olusturmayi mumkun kilar. Sonuc: daha az bakim gerektiren kod, mukemmel performans ve optimal bir gelistirici deneyimi.
---
Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/tr/blog/ruby-on-rails/ruby-on-rails-7-hotwire-turbo