Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
我如何停止憂慮並愛上 Non-MVC Web Framework @ OSDC.tw 2013
Search
Brian Hsu
April 19, 2013
Programming
6
3.3k
我如何停止憂慮並愛上 Non-MVC Web Framework @ OSDC.tw 2013
Introduction Lift web framework's template system at OSDC.tw 2013.
Brian Hsu
April 19, 2013
Tweet
Share
More Decks by Brian Hsu
See All by Brian Hsu
數位典藏聯合目錄搜尋引擎模組
brianhsu
0
150
Java XML Processing
brianhsu
0
78
Java Unicode NCR 處理
brianhsu
1
380
如何在 Java App 中導入 Scala @ JavaTWO 2011
brianhsu
1
110
[LT] 自由軟體讓你五分鐘上新聞 @ OSDC.tw 2011
brianhsu
1
92
ScalaTest-連貓都會的單元測試與 BDD @ COSCUP 2010
brianhsu
0
250
Introduction to Scala @ TWJUG 2010/07
brianhsu
1
180
Programming Android Application in Scala @ OSDC.tw 2010
brianhsu
1
110
Other Decks in Programming
See All in Programming
20250708_JAWS_opscdk
takuyay0ne
2
150
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
290
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
250
TypeScriptでDXを上げろ! Hono編
yusukebe
3
860
構造化・自動化・ガードレール - Vibe Coding実践記 -
tonegawa07
0
150
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
690
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
450
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
260
階層化自動テストで開発に機動力を
ickx
1
420
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
220
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
9.3k
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
130
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The World Runs on Bad Software
bkeepers
PRO
70
11k
It's Worth the Effort
3n
185
28k
GraphQLとの向き合い方2022年版
quramy
49
14k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Music & Morning Musume
bryan
46
6.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Code Review Best Practice
trishagee
69
19k
Docker and Python
trallard
45
3.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Transcript
我如何停止憂慮 並愛上 Non-MVC 網頁框架 BrianHsu @ OSDC.tw 2013
我如何停止憂慮 並愛上 Non-MVC 網頁框架 BrianHsu @ OSDC.tw 2013
關於我
BrianHsu http://plurk.com/brianhsu http://github.com/brianhsu http://speakerdeck.com/brianhsu
None
工作是寫 Java 和 JSP 網頁 但其實比較喜歡用 Scala
講到工作這件事
公家機關的技術是很落後滴 都 2013 年了還在用純 JSP 寫網站
更慘的是版面美術設計是外包
新的網站 = 新的地獄
程式都套完版了……
老闆:「那邊那個選單長得怪怪的。」
廠商給了另一個 結構完全不同的 HTML 檔
廠商給了另一個 結構完全不同的 HTML 檔 本來的 UL+CSS 變表格?!囧
W T F
還好我的 JSP 基本上只剩下 <%= %>
程式碼和外觀分離
MVC Framework
Model View Controller
Model View Controller
conf/routes GET / controllers.Application.index()
Model View Controller
None
程式碼和外觀分離 靠的是自我規制
如果你頭腦壞掉 沒有人阻止你這樣幹
None
你的 WebEditor 不一定看得懂
有沒有 Code 與 View 嚴格分離的 Web Framework ?
http://liftweb.net/ Web Framework
Web Framework for Scala
None
老實說不推薦使用
老實說不推薦使用 文件不足
老實說不推薦使用 文件不足 不好上手
老實說不推薦使用 文件不足 不好上手 不像其他框架那麼紅
但 很有趣
習慣後很好用
特別是如果你和我一樣 不會做網頁美工和排版
non-MVC View First
Model View Controller
Model View Controller
你可以用任何你喜歡的 DBMS / noSQL 甚至其他 ORM Model 都差不多
Model View Controller
Model View Controller 不需要這東西!
Model View Controller
Model View Controller 今天的重點,但很簡單! 如果你用過 Lift 其實就可以不用聽了
View 模版
None
???
你沒看錯 純 HTML 即模版
換句話說 你的模版裡不能有任何程式碼
換句話說 你的模版裡不能有任何程式碼 至於 JavaScript 那就沒辦法了……
How does that work ?
Functional Programming
Immutable High-order Function Compose-able Function
Immutable High-order Function Compose-able Function
None
Immutable Data Structure High-order Function Compose-able Function
None
Immutable Data Structure High-order Function Compose-able Function
None
TEMPLATE
把 HTML 節點拿去喂給 Function ▼ 得到修改過後的 HTML 節點
把 HTML 節點拿去喂給 Function ▼ 得到修改過後的 HTML 節點 Lift 把他叫做
Snippet !
<body> <div class="container" data-lift="currentTimeAndIP"> 現在時刻: <span class="time">....</span><br/> 你的 IP :
<span class="ip">....</span> </div> </body>
<body> <div class="container" data-lift="currentTimeAndIP"> 現在時刻: <span class="time">....</span><br/> 你的 IP :
<span class="ip">....</span> </div> </body> 把紅色的地方丟到 CurrentTimeAndIP.render 中
import scala.xml.NodeSeq import net.liftweb.util.CssSel def render (xhtml: NodeSeq): NodeSeq def
render: CssSel
import scala.xml.NodeSeq import net.liftweb.util.CssSel def render (xhtml: NodeSeq): NodeSeq def
render: CssSel 其實我是 Function!
None
<body> <h1> 我想偷懶 </h1> </body>
直接操作節點很累耶……
CSS Selector!
CSS Selector! NodeSeq => NodeSeq
None
None
CssSelector 當然也是可以組合的
None
同時套用兩個規則!
None
先套用第一個,再套用第二個
<div class="class1">Test</div> ▼ <h1 class="class1" id="replaced">Hello</h1> ▼ <h1 class="class1" id="replaced">World</h1>
先套用後面的,再套用前面的
所以
<body> <div class="container" data-lift="currentTimeAndIP"> 現在時刻: <span class="time">....</span><br/> 你的 IP :
<span class="ip">....</span> </div> </body> 把紅色的地方丟到 CurrentTimeAndIP.render 中
None
模版裡不能有任何功能實作/程式碼!
<li> <tr> ... 那迴圈怎麼辦?
Bind 到 List
None
None
None
表單?
None
Lift 內建的 Snippet 指定表單用 POST 送出
Lift 內建的 Snippet 指定表單用 POST 送出 真正處理表單的地方
None
net.liftweb.http.SHtml
None
Ajax?
不會 JavaScript 也 OK
None
None
還有很多內建的 Snippet
LazyLoad Embed Surround …...
模版不能有程式碼 View 就是 View
模版不能有程式碼 View 就是 View 程式碼裡可能會有 View 但通常很少見
What does that mean?
做網站第一件事情是喬版面
做網站第一件事情是喬版面 做網頁的時候先把 HTML/CSS 版面抄好!
套版 = 改 HTML 屬性
套版 = 改 HTML 屬性 Bind Point 定義的好的話 HTML 結構被變更也不用改程式碼
Component Based
雖然都說 Never Live Demo....
http://backstab.brianhsu.cloudbees.net
如果你是 Java 派的
https://github.com/astamuse/asta4d Asta4D
Questions?
Thanks!
Extras
囧 我要的 AJAX 元件 Lift 沒有啊!
把任何 Server Side 函式變 JavaScript
None
None
None