# 不寫 JS 也有行雲流水的前端體驗，AI 時代後端工程師的心流開發禪境 - 蘇泰安 taiansu

{%hackmd o8oUosN0QnqMSkF1_6kH7g %}

#### 📚 議程介紹

{%preview https://webconf.tw/agenda/37 %}

#### 投影片連結

[https://u.tai.su/webconf2025](https://u.tai.su/webconf2025)

###### ▼▼▼ 開始筆記 ▼▼▼

## 關鍵字

- Tidewave.ai
- Phoenix LiveView
- 實用的函數式編程

## Tidewave.ai

- 本體是兩組 MCP + 一個 Web app
- 框架組會告訴模型此專案的各種資訊，例如怎麼找 package 、檔案放置位置、如何取得資料庫結構等

- 介面組有shell_eval及borwser_eval->所以他做完功能後，會自動操作瀏覽器，並驗證功能是否能順利操作
- 會反覆操作直到成功為止

Tidewave 支援 Rails, React, Django, FastAPI, Flask, Next.js ...etc

免費版每月20個指令，月費10 usd+

## Why Phoenix
- c- c
痛點
- PHP:SQL + HTML義大利麵?
- Java spring mvc:XML Config地獄
- Rails:Server side rendering,只有簡單的前端互動介面
- YUI -> jQuery->React(react/flux,hook還不錯)
- 但有前後端之牆問題
- SEO,重複驗證邏輯,行為要由前端發起,還要擔心XSS

### Phoenix LiveView:重新思考WebSocket

- 驗證只要在後端寫一次就好
- 後端可以主動推送訊息給前端，再也不用long pooling
- JavaScript可以在任何時候跟Server Side互動

## 實用的函數式編程-elixir
特性
- 不是新技術
- 不用functor,monad等抽象概念
- immutable value
- 天天用map,filter,reduce
- 會把遞迴思考方式變習慣

弱點
- 抽象難上手:可以靠AI
- 冷門:個人開發或小團隊就ok
- package少: [pythonx](https://github.com/livebook-dev/pythonx) 或 [elixir-nodejs](https://github.com/revelrylabs/elixir-nodejs) 能直接介接
- 極端效能需求:用rustler寫Rust
### functional core, imperative shell
- 真正進行計算的函數 + 流程型的函數（只關心順序）
- 把只有副作用的函數抽離出來
### Summary
- AI工具鍊-> 找到讓他們合作的方式
- 讓技術棧變簡單
- 函數編程跟AI還有unit test(TDD/DDD)是天作之合

---
#### 聊天室

寫livewire的路過
> laravel boost + chromeDevTools 既視感
> 沒有tidewave包這麼漂亮ＯＲＺ

前端之前戰國時代是半年就過期吧 沒有18個月 ＸＤＤ

PHP 真的就看喜好 想SFC 還是MFC都有人支持

Phoenix語言特性 天生對websocket支援良好

最近很紅的Rust unwarp XD