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.2k
我如何停止憂慮並愛上 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
120
Java XML Processing
brianhsu
0
69
Java Unicode NCR 處理
brianhsu
1
320
如何在 Java App 中導入 Scala @ JavaTWO 2011
brianhsu
1
84
[LT] 自由軟體讓你五分鐘上新聞 @ OSDC.tw 2011
brianhsu
1
71
ScalaTest-連貓都會的單元測試與 BDD @ COSCUP 2010
brianhsu
0
150
Introduction to Scala @ TWJUG 2010/07
brianhsu
1
140
Programming Android Application in Scala @ OSDC.tw 2010
brianhsu
1
91
Other Decks in Programming
See All in Programming
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
690
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
1
370
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
1k
GitLab CI/CD で C#/WPFアプリケーションのテストとインストーラーのビルド・デプロイを自動化する
hacarus
0
360
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.3k
PHPはいつから死んでいるかの調査
chiroruxx
2
420
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
10
1.5k
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
1.1k
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
330
Ruby Function Composition
bkuhlmann
1
340
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
6
1.8k
AmperとFleetを使ったAndroidアプリ
yoppie
0
260
Featured
See All Featured
Fireside Chat
paigeccino
22
2.6k
Optimizing for Happiness
mojombo
370
69k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
A designer walks into a library…
pauljervisheath
201
23k
Designing Experiences People Love
moore
136
23k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Building Your Own Lightsaber
phodgson
100
5.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
79
43k
Designing for Performance
lara
601
67k
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