不⼀一樣的 Web  Server…  coServ

Part  II    

Ben  Lue  2014©  Gocharm  Inc.

這是個續集

還沒看過 part I 的請先看 h<p://www.slideshare.net/BenLue/web-­‐server-­‐co-­‐serv  

專案中⽂文說明 h<ps://github.com/coimoGon/coServ/blob/master/README_zh.md  

coServ  想傳達的設計觀點

專注處理⼩小區域（區塊） è 專注在區塊或區域，⽽而不是整個網⾴頁

相同的內容可以有無數種顯⽰示⽅方式

è 如果把內容格式加以固定，UI/UX設計可以簡化並快速累積

重新檢視網⾴頁

•  同⼀一網站下，不同網⾴頁通常有相同的⾴頁⾸首、邊欄和⾴頁尾(footer)

•  真正不同的是主內容區 •  把主內容區視為⼀一個區塊 •  網址其實是在指定⼀一個區塊

如能了解網⾴頁是主內容區塊的虛胖版 開發時間也能從虛胖版進化到精簡版

區塊(block)

是 coServ 建置網站的核⼼心

靜態區塊

HTML  

CSS  

Js   區塊產⽣生器

多國語系 ⽚片語檔

<style>  …  </style>    <script>  …  </script>    <div>  …  </div>  

動態區塊

HTML  

CSS  

Js   區塊產⽣生器

多國語系 ⽚片語檔

<style>  …  </style>    <script>  …  </script>    <div>  …  </div>  

內容為 JSON 物件

動態區塊內容

HTML  

CSS  

Js  

區塊產⽣生器

多國語系 ⽚片語檔

<style>  …  </style>    <script>  …  </script>    <div>  …  </div>  

內容為 JSON 物件

本地 node 模組

BaaS 服務 OR  

區塊的合成

<h2>      <%=  valu.Gtle  %>  </h2>    <div>      <%=  value.summary  %>  </div>    <p>      <%=  value.body  %>  </p>  

{      “Gtle”:  “Hello”,        “summary”:  “Abstract  of  this  page”,        “body”:  “Body  of  the  page”  }    

<h2>      Hello  </h2>    <div>      Abstract  of  this  page  </div>  <hr  />    <p>      Body  of  the  page  </p>  

CSS也能合成 <%  if  (value.Gtle.length  <  20)  {  %>  .Gtle  {      font-­‐size:  28px;  }  <%  }  else  {  %>  .Gtle  {      font-­‐size:  24px;  }  <%  }  %>  

{      “Gtle”:  “Hello”,        “summary”:  “Abstract  of  this  page”,        “body”:  “Body  of  the  page”  }    

.Gtle  {      font-­‐size:  28px;  }  

如果你喜歡，Javascript 也可以⽤用類似的⽅方式合成

資料從何⽽而來 <h2>      <%=  valu.Gtle  %>  </h2>    <div>      <%=  value.summary  %>  </div>  <hr  />    <p>      <%=  value.body  %>  </p>  

{      “Gtle”:  “Hello”,        “summary”:  “Abstract  of  this  page”,        “body”:  “Body  of  the  page”  }    

<h2>      Hello  </h2>    <div>      Abstract  of  this  page  </div>  <hr  />    <p>      Body  of  the  page  </p>  

這個 JSON 物件從何⽽而來？

產⽣生資料 區塊所需的資料，可以從⼆二種⽅方式擇⼀一產⽣生： ü 本地模組(local  module)  

在 coServ 上撰寫 node.js 的模組，可⽤用來讀取DB  或其他網站的資料

ü  BaaS 服務 利⽤用 BaaS 服務來處理資料的儲存、管理、運算等。coServ ⺫⽬目前直接⽀支援 COIMOTION的 API 服務。要使⽤用其他 BaaS 亦可⾃自⾏行撰寫。

本地模組範例 其實就是⼀一個 node.js  module，模組中必須提供 run 這個 method 讓 coServ 呼叫

exports.run = function run(inData, callback) { var page = {title: ‘Hello World’, summary: ‘Abstract of this page.’, body: ‘This is a web page.’}; callback( {errCode: 0, message: ‘Ok’, value: page} );};

檔案應放在 www/themes/[樣板代碼]/blocks/module 下

BaaS 資料源 coServ 能夠直接和 COIMOTION  服務串接： o  可在 siteURI.json  中直接給  API  網址，作為區塊

的資料來源 o  在 javascript 中可以⽤用 __.api()  呼叫 API，類似

Ajax 的效果 o  更多細節在未來的簡報中說明

siteURI.json 這個檔⽤用來列出網站中所有的網⾴頁（區塊） "/blog/bgHead": { "id": "no“},"/blog/list": { "id": "no", "service": "/blogContent/blogRs/list“}

其中： o  blog/bgHead:  內容將來⾃自 blocks/module/

bgHead.js 或是區塊本⾝身並沒有動態內容 o  blog/list:  內容來⾃自 /blogContent/blogRs/list 這

個服務網址

};

MVC 架構 區塊本⾝身是以 MVC ⽅方式架構出來： o  Model:  由本地模組或 COIMOTION  API  服務提供 o  View:  由 HTML,  CSS  樣板構成 o  Controller:  由區塊的 Javascript  樣板構成，以下

做進⼀一步討論

The Block Controller Block  Controller 具有以下的特性： o  只提供程式功能給對應的區塊。  o  Block  Controller  具有  OO  encapsulaGon  的特性，

也就是在  controller  內定義的函式名稱不會與其他  controller  內的函式名稱衝突

o  coServ  提供  controller  ⼀一些內建功能，讓開發者在控制區塊時更⽅方便

Block Controller 範例

o  ctrl  代表  controller  本⾝身，類似 node.js  中module  的⽤用法  o  因為不同區塊可能⽤用了同樣的 css  id。所以13⾏行中⽤用 ctrl.sel()

⽽而不直接⽤用 $()  ，以確保取得的是本區塊的DOM 物件。傳回值已經包成 jQuery 物件了。

1 ctrl.startup = function() {2 /*當區塊完成顯⽰示時，coServ 就會呼叫這個函式。適合做起始的⼯工作*/3 };45 ctrl.turnOnOff = function(chkBox) {6 /*這個 method 在外部（js檔外）是可⾒見的 */7 showVisual( $(chkBox).checked );8 }; 910 function showVisual(isChecked) {11 /* 這個檔在外部是不可⾒見的（無法從外部呼叫）*/12 if (isChecked)13 ctrl.sel(‘#bulb’).html = ‘打開’;14 };

在 HTML 中呼叫 Controller

o  coServ  會將區塊的 Javascript  檔轉成  ctrl  物件  o  如何在 HTML 中引⽤用這個 ctrl 物件呢？如上例第⼆二⾏行所⽰示，

coServ 提供了⼀一個特殊的樣板變數（⽤用 <%=ctrl%>來引⽤用）。透過這個變數，便可使⽤用區塊的 controller。

1 <input type=“checkbox”2 onclick=“<%=ctrl%>.turnOnOff(this);” > 開關 3 4 <div>電燈已經 5 <span id=“bulb”>關閉</span>6 </div>

關於 SASS coServ  （從  0.8.8  版起）⽀支援 scss  語法的  SASS  檔案。開發者可以⽤用  .sass  檔案來取代區塊中原來的  .css  檔。 詳細內容可參考 https://github.com/coimotion/coServ/blob/master/howToSASS_zh.md

CSS Encapsulation 標題取的⽂文鄒鄒，意思是指如何保護    CSS  中的  class  和  id，不致互相撞名。 coServ 對區塊提供了 css  encapsulaGon 的保護，開發者不需要擔⼼心不同區塊的 class 或 id 會互相干擾

⼩小結論 coServ  中的區塊⾃自成⼀一個單位，其中的  CSS  和 Javascript  都受到保護。區塊間的  CSS  和 Javascript  不會互相干擾或衝突。 因為上述的特性，區塊可以被任意組合在⼀一個網⾴頁中，也可以重複使⽤用。 善⽤用區塊，開發時間變成 1/10 是可能的

Thanks