[第十八只羊] 迷雾森林舞会XII Hotwire 101

天亮了 昨晚是平安夜

关於迷雾森林故事

大风大浪

画面恢复正常後
大家打理着全身湿透的毛 甩了甩头
抬头一看
船上的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 那样支援
iOS 跟 Android

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

天黑请闭眼