不⼀一樣的 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	
  想傳達的設計觀點	
專注處理⼩小區域(區塊)	
	
è 專注在區塊或區域,⽽而不是整個網⾴頁	
	
相同的內容可以有無數種顯⽰示⽅方式	
	
è 如果把內容格式加以固定,UI/UX設計
可以簡化並快速累積
重新檢視網⾴頁	
•  同⼀一網站下,不同網⾴頁通常有相
同的⾴頁⾸首、邊欄和⾴頁尾(footer)	
•  真正不同的是主內容區	
•  把主內容區視為⼀一個區塊	
•  網址其實是在指定⼀一個區塊
如能了解網⾴頁是主內容區塊的虛胖版	
開發時間也能從虛胖版進化到精簡版	
	
區塊(block)	
是 coServ 建置網站的核⼼心
靜態區塊	
HTML	
  
CSS	
  
Js	
   區塊產⽣生器	
多國語系	
⽚片語檔	
<style>	
  
…	
  
</style>	
  
	
  
<script>	
  
…	
  
</script>	
  
	
 ...
動態區塊	
HTML	
  
CSS	
  
Js	
   區塊產⽣生器	
多國語系	
⽚片語檔	
<style>	
  
…	
  
</style>	
  
	
  
<script>	
  
…	
  
</script>	
  
	
 ...
動態區塊內容	
HTML	
  
CSS	
  
Js	
  
區塊產⽣生器	
多國語系	
⽚片語檔	
<style>	
  
…	
  
</style>	
  
	
  
<script>	
  
…	
  
</script>	
  
	...
區塊的合成	
<h2>	
  
	
  	
  <%=	
  valu.Gtle	
  %>	
  
</h2>	
  
	
  
<div>	
  
	
  	
  <%=	
  value.summary	
  %>	
  
</div>	...
CSS也能合成	
<%	
  if	
  (value.Gtle.length	
  <	
  
20)	
  {	
  %>	
  
.Gtle	
  {	
  
	
  	
  font-­‐size:	
  28px;	
  
}	
  ...
資料從何⽽而來	
<h2>	
  
	
  	
  <%=	
  valu.Gtle	
  %>	
  
</h2>	
  
	
  
<div>	
  
	
  	
  <%=	
  value.summary	
  %>	
  
</div...
產⽣生資料	
區塊所需的資料,可以從⼆二種⽅方式擇⼀一產⽣生:	
	
ü  本地模組(local	
  module)	
  
在 coServ 上撰寫 node.js 的模組,可⽤用來讀取DB	
  
或其他網站的資料	
	
ü  Baa...
本地模組範例	
其實就是⼀一個 node.js	
  module,模組中必須提供
run 這個 method 讓 coServ 呼叫	
exports.run = function run(inData, callback) {	
var p...
BaaS 資料源	
coServ 能夠直接和 COIMOTION	
  服務串接:	
	
o  可在 siteURI.json	
  中直接給	
  API	
  網址,作為區塊
的資料來源	
o  在 javascript 中可以⽤用 __....
siteURI.json	
這個檔⽤用來列出網站中所有的網⾴頁(區塊)	
"/blog/bgHead": {	
"id": "no“	
},	
	
"/blog/list": {	
"id": "no",	
"service": "/blogC...
MVC 架構	
區塊本⾝身是以 MVC ⽅方式架構出來:	
	
o  Model:	
  由本地模組或 COIMOTION	
  API	
  服務提供	
o  View:	
  由 HTML,	
  CSS	
  樣板構成	
o  Contr...
The Block Controller	
Block	
  Controller 具有以下的特性:	
	
o  只提供程式功能給對應的區塊。	
  
o  Block	
  Controller	
  具有	
  OO	
  encapsul...
Block Controller 範例	
o  ctrl	
  代表	
  controller	
  本⾝身,類似 node.js	
  中module	
  的⽤用法	
  
o  因為不同區塊可能⽤用了同樣的 css	
  id。所以13...
在 HTML 中呼叫 Controller 	
o  coServ	
  會將區塊的 Javascript	
  檔轉成	
  ctrl	
  物件	
  
o  如何在 HTML 中引⽤用這個 ctrl 物件呢?如上例第⼆二⾏行所⽰示,
co...
關於 SASS	
coServ	
  (從	
  0.8.8	
  版起)⽀支援 scss	
  語法的	
  SASS	
  檔
案。開發者可以⽤用	
  .sass	
  檔案來取代區塊中原來
的	
  .css	
  檔。	
	
詳細內容...
CSS Encapsulation	
標題取的⽂文鄒鄒,意思是指如何保護	
  	
  CSS	
  中的	
  
class	
  和	
  id,不致互相撞名。	
	
coServ 對區塊提供了 css	
  encapsulaGon 的保...
⼩小結論	
coServ	
  中的區塊⾃自成⼀一個單位,其中的	
  CSS	
  和
Javascript	
  都受到保護。區塊間的	
  CSS	
  和 Javascript	
  
不會互相干擾或衝突。 	
	
因為上述的特性,區塊...
Thanks	
  
Upcoming SlideShare
Loading in …5
×

不一樣的 Web Server coServ Part II

1,897 views

Published on

繼續說明 coServ 的設計理念和使用方式。這一集主要說明「區塊」如何簡化網路應用的開發,以及 coServ 如何支援區塊。這個簡報有助於開發者掌握 coServ 的開發訣竅。

Published in: Software
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,897
On SlideShare
0
From Embeds
0
Number of Embeds
89
Actions
Shares
0
Downloads
24
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

不一樣的 Web Server coServ Part II

  1. 1. 不⼀一樣的 Web  Server…   coServ Part  II     Ben  Lue   2014©  Gocharm  Inc.
  2. 2. 這是個續集 還沒看過 part I 的請先看 h<p://www.slideshare.net/BenLue/web-­‐ server-­‐co-­‐serv   專案中⽂文說明 h<ps://github.com/coimoGon/coServ/ blob/master/README_zh.md  
  3. 3. coServ  想傳達的設計觀點 專注處理⼩小區域(區塊) è 專注在區塊或區域,⽽而不是整個網⾴頁 相同的內容可以有無數種顯⽰示⽅方式 è 如果把內容格式加以固定,UI/UX設計 可以簡化並快速累積
  4. 4. 重新檢視網⾴頁 •  同⼀一網站下,不同網⾴頁通常有相 同的⾴頁⾸首、邊欄和⾴頁尾(footer) •  真正不同的是主內容區 •  把主內容區視為⼀一個區塊 •  網址其實是在指定⼀一個區塊
  5. 5. 如能了解網⾴頁是主內容區塊的虛胖版 開發時間也能從虛胖版進化到精簡版 區塊(block) 是 coServ 建置網站的核⼼心
  6. 6. 靜態區塊 HTML   CSS   Js   區塊產⽣生器 多國語系 ⽚片語檔 <style>   …   </style>     <script>   …   </script>     <div>   …   </div>  
  7. 7. 動態區塊 HTML   CSS   Js   區塊產⽣生器 多國語系 ⽚片語檔 <style>   …   </style>     <script>   …   </script>     <div>   …   </div>   內容為 JSON 物件
  8. 8. 動態區塊內容 HTML   CSS   Js   區塊產⽣生器 多國語系 ⽚片語檔 <style>   …   </style>     <script>   …   </script>     <div>   …   </div>   內容為 JSON 物件 本地 node 模組 BaaS 服務 OR  
  9. 9. 區塊的合成 <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>  
  10. 10. 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 也可以⽤用類似的⽅方式合成
  11. 11. 資料從何⽽而來 <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 物件從何⽽而來?
  12. 12. 產⽣生資料 區塊所需的資料,可以從⼆二種⽅方式擇⼀一產⽣生: ü  本地模組(local  module)   在 coServ 上撰寫 node.js 的模組,可⽤用來讀取DB   或其他網站的資料 ü  BaaS 服務 利⽤用 BaaS 服務來處理資料的儲存、管理、運算等。 coServ ⺫⽬目前直接⽀支援 COIMOTION的 API 服務。要 使⽤用其他 BaaS 亦可⾃自⾏行撰寫。
  13. 13. 本地模組範例 其實就是⼀一個 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 下
  14. 14. BaaS 資料源 coServ 能夠直接和 COIMOTION  服務串接: o  可在 siteURI.json  中直接給  API  網址,作為區塊 的資料來源 o  在 javascript 中可以⽤用 __.api()  呼叫 API,類似 Ajax 的效果 o  更多細節在未來的簡報中說明
  15. 15. 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 這 個服務網址 };
  16. 16. MVC 架構 區塊本⾝身是以 MVC ⽅方式架構出來: o  Model:  由本地模組或 COIMOTION  API  服務提供 o  View:  由 HTML,  CSS  樣板構成 o  Controller:  由區塊的 Javascript  樣板構成,以下 做進⼀一步討論
  17. 17. The Block Controller Block  Controller 具有以下的特性: o  只提供程式功能給對應的區塊。   o  Block  Controller  具有  OO  encapsulaGon  的特性, 也就是在  controller  內定義的函式名稱不會與 其他  controller  內的函式名稱衝突 o  coServ  提供  controller  ⼀一些內建功能,讓開發 者在控制區塊時更⽅方便
  18. 18. Block Controller 範例 o  ctrl  代表  controller  本⾝身,類似 node.js  中module  的⽤用法   o  因為不同區塊可能⽤用了同樣的 css  id。所以13⾏行中⽤用 ctrl.sel() ⽽而不直接⽤用 $()  ,以確保取得的是本區塊的DOM 物件。傳回 值已經包成 jQuery 物件了。 1 ctrl.startup = function() { 2 /*當區塊完成顯⽰示時,coServ 就會呼叫這個函式。適合做起始的⼯工作*/ 3 }; 4 5 ctrl.turnOnOff = function(chkBox) { 6 /*這個 method 在外部(js檔外)是可⾒見的 */ 7 showVisual( $(chkBox).checked ); 8 }; 9 10 function showVisual(isChecked) { 11 /* 這個檔在外部是不可⾒見的(無法從外部呼叫)*/ 12 if (isChecked) 13 ctrl.sel(‘#bulb’).html = ‘打開’; 14 };
  19. 19. 在 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>
  20. 20. 關於 SASS coServ  (從  0.8.8  版起)⽀支援 scss  語法的  SASS  檔 案。開發者可以⽤用  .sass  檔案來取代區塊中原來 的  .css  檔。 詳細內容可參考 https://github.com/coimotion/coServ/blob/ master/howToSASS_zh.md
  21. 21. CSS Encapsulation 標題取的⽂文鄒鄒,意思是指如何保護    CSS  中的   class  和  id,不致互相撞名。 coServ 對區塊提供了 css  encapsulaGon 的保護, 開發者不需要擔⼼心不同區塊的 class 或 id 會互相 干擾
  22. 22. ⼩小結論 coServ  中的區塊⾃自成⼀一個單位,其中的  CSS  和 Javascript  都受到保護。區塊間的  CSS  和 Javascript   不會互相干擾或衝突。 因為上述的特性,區塊可以被任意組合在⼀一個網 ⾴頁中,也可以重複使⽤用。 善⽤用區塊,開發時間變成 1/10 是可能的
  23. 23. Thanks  

×