Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Brian Hsu Brian Hsu
April 19, 2013
Programming
3.3k
6

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

Introduction Lift web framework's template system at OSDC.tw 2013.

Avatar for Brian Hsu

Brian Hsu

April 19, 2013

More Decks by Brian Hsu

See All by Brian Hsu
數位典藏聯合目錄搜尋引擎模組
Avatar for Brian Hsu brianhsu
0
200
Java XML Processing
Avatar for Brian Hsu brianhsu
0
92
Java Unicode NCR 處理
Avatar for Brian Hsu brianhsu
1
440
如何在 Java App 中導入 Scala @ JavaTWO 2011
Avatar for Brian Hsu brianhsu
1
130
[LT] 自由軟體讓你五分鐘上新聞 @ OSDC.tw 2011
Avatar for Brian Hsu brianhsu
1
110
ScalaTest－連貓都會的單元測試與 BDD @ COSCUP 2010
Avatar for Brian Hsu brianhsu
0
300
Introduction to Scala @ TWJUG 2010/07
Avatar for Brian Hsu brianhsu
1
200
Programming Android Application in Scala @ OSDC.tw 2010
Avatar for Brian Hsu brianhsu
1
130

Other Decks in Programming

See All in Programming
Go を使い始めて 2 ヶ月の学び / My first two months with Go
Avatar for Daisuke Garaike contour_gara
0
420
業務時間外もAIに働いてもらう話
Avatar for taki colorful12
3
10k
GraphRAGのKnowledge Graphを 直接！見る/View-GraphRAG's-KnowledgeGraph-directly!
Avatar for tyumugiko tyumugi1113
0
250
{ Android | Kotlin } Gradle Plugin in 2026
Avatar for RyuNen344 ryunen344
1
290
kubernetes コンポーネント開発入門 / 新卒N年目の勉強会&交流会！〜〇〇への誘い〜 #n_study
Avatar for mazrean mazrean
0
170
片田舎のおっさん、 Swift Buildのダイアモンド問題解決の不具合修正PRを出すが、解決方法がキャッシュをしないようにすることであり、ビルド時間が伸びると言われてマージされないので高速化もする/swiftbuild
Avatar for yimajo yimajo
0
360
ソフトウェアラスタライザ
Avatar for Fadis fadis
1
790
AIに既存システムを理解させる技術　～レガシーを見捨てないハーネスエンジニアリング入門～
Avatar for Ochtum ochtum
0
210
『寄り添うラジオ』をAIで作る 体験価値から逆算した、会話しないUXと品質設計
Avatar for テオリア・テクノロジーズ theoriatec2024
3
130
一参加者から『中の人』へ 〜全通PHPerがブースに立って学んだ、カンファレンスを100倍楽しむコツ〜
Avatar for 藤掛大介 wp_daisuke
0
120
Claude Codeを組織的に動かして月400PRを実現した話
Avatar for happy_ryo happy_ryo
0
260
デプロイ直後のレイテンシスパイクを調べたら、 Railsの仕様にたどり着いた
Avatar for naohisa nhsykym
0
110

Featured

See All Featured
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.6k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
320
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
310
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.4k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.9k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
7k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
2
410
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.3k

Transcript

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

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

  3. 關於我

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

  5. None

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

  7. 講到工作這件事

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

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

  10. 新的網站 = 新的地獄

  11. 程式都套完版了……

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

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

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

  15. W T F

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

  17. 程式碼和外觀分離

  18. MVC Framework

  19. Model View Controller

  20. Model View Controller

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

  22. Model View Controller

  23. None

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

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

  26. None

  27. 你的 WebEditor 不一定看得懂

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

  29. http://liftweb.net/ Web Framework

  30. Web Framework for Scala

  31. None

  32. 老實說不推薦使用

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

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

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

  36. 但 很有趣

  37. 習慣後很好用

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

  39. non-MVC View First

  40. Model View Controller

  41. Model View Controller

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

  43. Model View Controller

  44. Model View Controller 不需要這東西！

  45. Model View Controller

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

  47. View 模版

  48. None

  49. ？？？

  50. 你沒看錯 純 HTML 即模版

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

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

  53. How does that work ？

  54. Functional Programming

  55. Immutable High-order Function Compose-able Function

  56. Immutable High-order Function Compose-able Function

  57. None

  58. Immutable Data Structure High-order Function Compose-able Function

  59. None

  60. Immutable Data Structure High-order Function Compose-able Function

  61. None

  62. TEMPLATE

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

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

    Snippet ！

  65. <body> <div class="container" data-lift="currentTimeAndIP"> 現在時刻： <span class="time">....</span><br/> 你的 IP ：

    <span class="ip">....</span> </div> </body>

  66. <body> <div class="container" data-lift="currentTimeAndIP"> 現在時刻： <span class="time">....</span><br/> 你的 IP ：

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

  67. import scala.xml.NodeSeq import net.liftweb.util.CssSel def render (xhtml: NodeSeq): NodeSeq def

    render: CssSel

  68. import scala.xml.NodeSeq import net.liftweb.util.CssSel def render (xhtml: NodeSeq): NodeSeq def

    render: CssSel 其實我是 Function!
  69. None

  70. <body> <h1> 我想偷懶 </h1> </body>

  71. 直接操作節點很累耶……

  72. CSS Selector!

  73. CSS Selector! NodeSeq => NodeSeq

  74. None
  75. None

  76. CssSelector 當然也是可以組合的

  77. None

  78. 同時套用兩個規則！

  79. None

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

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

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

  83. 所以

  84. <body> <div class="container" data-lift="currentTimeAndIP"> 現在時刻： <span class="time">....</span><br/> 你的 IP ：

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

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

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

  88. Bind 到 List

  89. None
  90. None
  91. None

  92. 表單？

  93. None

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

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

  96. None

  97. net.liftweb.http.SHtml

  98. None

  99. Ajax?

  100. 不會 JavaScript 也 OK

  101. None
  102. None

  103. 還有很多內建的 Snippet

  104. LazyLoad Embed Surround …...

  105. 模版不能有程式碼 View 就是 View

  106. 模版不能有程式碼 View 就是 View 程式碼裡可能會有 View 但通常很少見

  107. What does that mean?

  108. 做網站第一件事情是喬版面

  109. 做網站第一件事情是喬版面 做網頁的時候先把 HTML/CSS 版面抄好！

  110. 套版 = 改 HTML 屬性

  111. 套版 = 改 HTML 屬性 Bind Point 定義的好的話 HTML 結構被變更也不用改程式碼

  112. Component Based

  113. 雖然都說 Never Live Demo....

  114. http://backstab.brianhsu.cloudbees.net

  115. 如果你是 Java 派的

  116. https://github.com/astamuse/asta4d Asta4D

  117. Questions?

  118. Thanks!

  119. Extras

  120. 囧 我要的 AJAX 元件 Lift 沒有啊！

  121. 把任何 Server Side 函式變 JavaScript

  122. None
  123. None
  124. None