我如何停止憂慮並愛上 Non-MVC Web Framework @ OSDC.tw 2013

我如何停止憂慮並愛上 Non-MVC 網頁框架 BrianHsu @ OSDC.tw 2013

關於我

BrianHsu http://plurk.com/brianhsu http://github.com/brianhsu http://speakerdeck.com/brianhsu

工作是寫 Java 和 JSP 網頁但其實比較喜歡用 Scala

講到工作這件事

公家機關的技術是很落後滴都 2013 年了還在用純 JSP 寫網站

更慘的是版面美術設計是外包

新的網站 = 新的地獄

程式都套完版了……

老闆：「那邊那個選單長得怪怪的。」

廠商給了另一個結構完全不同的 HTML 檔

廠商給了另一個結構完全不同的 HTML 檔本來的 UL+CSS 變表格？！囧

還好我的 JSP 基本上只剩下 <%= %>

程式碼和外觀分離

MVC Framework

Model View Controller

conf/routes GET / controllers.Application.index()

程式碼和外觀分離靠的是自我規制

如果你頭腦壞掉沒有人阻止你這樣幹

你的 WebEditor 不一定看得懂

有沒有 Code 與 View 嚴格分離的 Web Framework ？

http://liftweb.net/ Web Framework

Web Framework for Scala

老實說不推薦使用

老實說不推薦使用文件不足

老實說不推薦使用文件不足不好上手

老實說不推薦使用文件不足不好上手不像其他框架那麼紅

但很有趣

習慣後很好用

特別是如果你和我一樣不會做網頁美工和排版

non-MVC View First

你可以用任何你喜歡的 DBMS / noSQL 甚至其他 ORM Model 都差不多

Model View Controller 不需要這東西！

Model View Controller 今天的重點，但很簡單！如果你用過 Lift 其實就可以不用聽了

View 模版

？？？

你沒看錯純 HTML 即模版

換句話說你的模版裡不能有任何程式碼

換句話說你的模版裡不能有任何程式碼至於 JavaScript 那就沒辦法了……

How does that work ？

Functional Programming

Immutable High-order Function Compose-able Function

Immutable Data Structure High-order Function Compose-able Function

TEMPLATE

把 HTML 節點拿去喂給 Function ▼ 得到修改過後的 HTML 節點

把 HTML 節點拿去喂給 Function ▼ 得到修改過後的 HTML 節點 Lift 把他叫做
Snippet ！

<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!

直接操作節點很累耶……

CSS Selector!

CSS Selector! NodeSeq => NodeSeq

CssSelector 當然也是可以組合的

同時套用兩個規則！

先套用第一個，再套用第二個

<div class="class1">Test</div> ▼ <h1 class="class1" id="replaced">Hello</h1> ▼ <h1 class="class1" id="replaced">World</h1>

先套用後面的，再套用前面的

所以

<span class="ip">....</span> </div> </body> 把紅色的地方丟到 CurrentTimeAndIP.render 中

模版裡不能有任何功能實作／程式碼！

<li> <tr> ... 那迴圈怎麼辦？

Bind 到 List

表單？

Lift 內建的 Snippet 指定表單用 POST 送出

Lift 內建的 Snippet 指定表單用 POST 送出真正處理表單的地方

net.liftweb.http.SHtml

不會 JavaScript 也 OK

還有很多內建的 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

我如何停止憂慮並愛上 Non-MVC Web Framework @ OSDC.tw 2013

我如何停止憂慮並愛上 Non-MVC Web Framework @ OSDC.tw 2013

More Decks by Brian Hsu

Other Decks in Programming

Featured

Transcript