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
77
Java Unicode NCR 處理
brianhsu
1
380
如何在 Java App 中導入 Scala @ JavaTWO 2011
brianhsu
1
100
[LT] 自由軟體讓你五分鐘上新聞 @ OSDC.tw 2011
brianhsu
1
91
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
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
340
Deep Dive into ~/.claude/projects
hiragram
7
1.3k
WindowInsetsだってテストしたい
ryunen344
1
190
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
480
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
230
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
840
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
270
VS Code Update for GitHub Copilot
74th
1
310
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
110
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
knih
11
2k
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
390
Gleamという選択肢
comamoca
6
760
Featured
See All Featured
Speed Design
sergeychernyshev
32
1k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
Practical Orchestrator
shlominoach
188
11k
BBQ
matthewcrist
89
9.7k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Visualization
eitanlees
146
16k
Become a Pro
speakerdeck
PRO
28
5.4k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Bash Introduction
62gerente
614
210k
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