---
# System prepended metadata

title: 0420 Hotwire 分享講座
tags: [講座]

---

# 0420 Hotwire 分享講座
###### tags: `講座`

## 主題：下個世代的 Rails 前端 Hotwire

[Hotwire官網](https://hotwire.dev/)

### * HTML over the wire
  * 互動頁面為何不用React?
      * 因為前端、後端分離比較貴 
### * Turbo Frame
- 一定要有 `id`
```html=
<body>
  <turbo-frame id="fruit"
  <p>apple</p>
 <a href='/kiwi'>
 <a>
</body>
```
```html=
<turbo-frame id='fruit'


```

turbo-frame lazy-load

turbo-frame target

加 data-turbo-frame =>　找到之後把內容換掉

連結跟表格送出會觸發turbo-frame


### * Turbo Stream (類似 ActionCable 即時通訊，可用在聊天室)

[Come Alive with Turbo Streams](https://turbo.hotwire.dev/handbook/streams)


### * Turbo-rails gem

https://github.com/hotwired/turbo-rails/blob/main/app/models/concerns/turbo/broadcastable.rb


最後一點點建議

做好基本CRUD再來延伸
原本的turbo drive 已夠用


學長的投票網站（太多人會壞掉）https://scrummypoky.uitsing.com/

韋政學長的email: tsing@hey.com