iT邦幫忙

2021 iThome 鐵人賽

DAY 18
0

天亮了 昨晚是平安夜

關於迷霧森林故事

大風大浪

畫面恢復正常後
大家打理著全身濕透的毛 甩了甩頭
抬頭一看
船上的animals 似乎在水龍幻化成滂薄大雨時候
也同時經歷了一場大風大浪大雷雨
也正在從搖喚的船身 逐漸恢復平靜
讓甲板上的 animal 選手們東倒西歪
洛神則是穩穩地飄在半空中
碰觸到她周圍五釐米的水
都變成了那個雲根霧
圍繞在身邊

圖片來源
等著比賽繼續進行
待續..

動物園派對

昨天我們小試一下把套用 turbo_frame_tag讓房間透過 turbo_frame_tag 呈現
因為中文沒什麼人介紹 hotwire
讓我腦海中浮現 DHH 來台灣 RubyCon 演講指著排名前十名(從第8升到第7)又笑笑的黑人問號語氣說著

DHH: Less popular???

今天來從頭開始介紹 hotwire
隨著JavaScript統治世界全端開發也被逼著要套用很多前端套件
從自己的一個 lib 或 framework 變成需要 MVC、MVVM來做複雜的狀態管理
此後 全端開發變得常需要動態更新狀態
再由前端從後端拉取 JSON 並在前端修改 DOM,增進快速無縫的使用者體驗
叫做俗稱的單頁式應用Single Page Applications(SPA)
究竟一個單純的應用轉變成不用從新載入的單頁式應用Single Page Applications(SPA)
但是當一個頁面的物件狀態多到一定的複雜層度
就會讓全端開發有個夢想

Chris McCord 在 2019 的 Elixir論壇介紹了LiveView,這種基於通過 WebSocket 將後端render的parial推送到所有連接的客戶端的方法在開發者社群中獲得了很大的吸引力,並都開是支援類似技術像是Django Sockpuppet、Phoenix LiveView、Unpoly、Laravel Livewire、htmx與 Django reactor
在Rails則要歸功於 StimulusReflex系列 gem
並由DHH 在去年年底向世界介紹了Hotwire

大概八年前就已存在 Rails 的世界中,Rails開發者甚至流傳著一段都市傳說
如果你的前端作動很奇怪或不能work...試著關閉Turbolinks,雖然他可以快取讓頁面變得順暢
但同時也為開發過程中帶來些許問題,比方說元件狀態該更新而未更新

在 Hotwire 中主要分成三大核心功能,分別是Turbo、Stimulus、Strada

  • Turbo
    Turbo Drive
    Turbo Frames
    Trubo Streams
    Turbo Native
  • Stimulus
  • Strada

    所以他做了什麼事情呢?
    用一句話解釋就是
    就是把傳統從後端傳送JSON的方式改成以HTML取代

sending HTML over the wire, instead of JSON.

Turbo是Hotwire的核心,80%都會使用到它
是一個 JavaScript lib,負責在前端和後端之間交換 HTML 並更新 DOM
但有時候還是需要一些客製化我們會用的到 Stimulus 把 controller 的 html 丟到前段
就是上面所謂的傳遞HTML而不是像remote: true一樣還是要接 JSON

Strada的部分目前有些延宕,他的終極目標是讓我們的app也能像是 react native 那樣支援
iOSAndroid

DHH: Letting the HTML drive native UI configuration in apps built with Turbo Native iOS and Android.
source:

但目前看來要等到明年了,預計會置換swift跟kotlin重要的常用部分並替換為原生元素
究竟會長什麼樣子非常值得期待

reference:

  1. hotwire
  2. hotwire-reactive-rails-with-no-javascript
  3. How to use Hotwire in Rails
  4. Hotwireとは何なのか?
  5. HTML over-the-wire is a promising future of Web Development

阿虎每日選幣

$sol 守 $171

天黑請閉眼


上一篇
[第十七隻羊] 迷霧森林舞會XI 套用turbo_frame_tag
下一篇
[第十九隻羊] 迷霧森林舞會XIII 設定form 綁定dom 同步房間(單押)
系列文
透過迷霧,看破一切~~ZOOPARTY 動物園派對桌遊設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言