Soumettre la recherche
Mettre en ligne
不一樣的 Web Server coServ Part II
•
8 j'aime
•
2,073 vues
Ben Lue
Suivre
繼續說明 coServ 的設計理念和使用方式。這一集主要說明「區塊」如何簡化網路應用的開發,以及 coServ 如何支援區塊。這個簡報有助於開發者掌握 coServ 的開發訣竅。
Lire moins
Lire la suite
Logiciels
Signaler
Partager
Signaler
Partager
1 sur 23
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
Kind editor设计思路
Kind editor设计思路
taobao.com
编辑器设计Kissy editor
编辑器设计Kissy editor
taobao.com
使用Bigpipe提升浏览速度
使用Bigpipe提升浏览速度
kumawu
Css性能优化
Css性能优化
linxz
Koubei banquet 34
Koubei banquet 34
Koubei UED
使用kslite支持第三方内容开发
使用kslite支持第三方内容开发
leneli
百度前端性能监控与优化实践
百度前端性能监控与优化实践
Welefen Lee
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Chieh Lin
Recommandé
Kind editor设计思路
Kind editor设计思路
taobao.com
编辑器设计Kissy editor
编辑器设计Kissy editor
taobao.com
使用Bigpipe提升浏览速度
使用Bigpipe提升浏览速度
kumawu
Css性能优化
Css性能优化
linxz
Koubei banquet 34
Koubei banquet 34
Koubei UED
使用kslite支持第三方内容开发
使用kslite支持第三方内容开发
leneli
百度前端性能监控与优化实践
百度前端性能监控与优化实践
Welefen Lee
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Chieh Lin
第三方内容开发最佳实践
第三方内容开发最佳实践
taobao.com
Js dom
Js dom
lidashuang
编辑器设计U editor
编辑器设计U editor
taobao.com
Html&css培训 舒克
Html&css培训 舒克
jay li
使用Big pipe提升浏览速度v2
使用Big pipe提升浏览速度v2
kumawu
Browser Object Model
Browser Object Model
jay li
移动端Web开发性能优化实践
移动端Web开发性能优化实践
Mingel Zhang
Node js feat pegasus
Node js feat pegasus
cnfi
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
ziggear
J Query简介及入门指南
J Query简介及入门指南
AppZ
前端调试工具使用指南
前端调试工具使用指南
gm163com
淘宝前端技术巡礼
淘宝前端技术巡礼
jay li
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
jay li
D2-ETao-show
D2-ETao-show
leneli
Mitosis seif elbadawy
Mitosis seif elbadawy
Seif El Badawy
21 Yüzyılda Bilginin Gücü - Kısa bir özet...
21 Yüzyılda Bilginin Gücü - Kısa bir özet...
Gelecek Hane
Luc labelle sps ottawa
Luc labelle sps ottawa
Luc Labelle
multiple dispatch(OOPs concepts)
multiple dispatch(OOPs concepts)
sumitra22
Top10 Trends 2015 - GelecekHane
Top10 Trends 2015 - GelecekHane
Gelecek Hane
SharePoint Saturday New Hampsire
SharePoint Saturday New Hampsire
Luc Labelle
India (English)
India (English)
Pablogil04
Gimacon ppt
Gimacon ppt
Ansley Dias
Contenu connexe
Tendances
第三方内容开发最佳实践
第三方内容开发最佳实践
taobao.com
Js dom
Js dom
lidashuang
编辑器设计U editor
编辑器设计U editor
taobao.com
Html&css培训 舒克
Html&css培训 舒克
jay li
使用Big pipe提升浏览速度v2
使用Big pipe提升浏览速度v2
kumawu
Browser Object Model
Browser Object Model
jay li
移动端Web开发性能优化实践
移动端Web开发性能优化实践
Mingel Zhang
Node js feat pegasus
Node js feat pegasus
cnfi
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
ziggear
J Query简介及入门指南
J Query简介及入门指南
AppZ
前端调试工具使用指南
前端调试工具使用指南
gm163com
淘宝前端技术巡礼
淘宝前端技术巡礼
jay li
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
jay li
D2-ETao-show
D2-ETao-show
leneli
Tendances
(14)
第三方内容开发最佳实践
第三方内容开发最佳实践
Js dom
Js dom
编辑器设计U editor
编辑器设计U editor
Html&css培训 舒克
Html&css培训 舒克
使用Big pipe提升浏览速度v2
使用Big pipe提升浏览速度v2
Browser Object Model
Browser Object Model
移动端Web开发性能优化实践
移动端Web开发性能优化实践
Node js feat pegasus
Node js feat pegasus
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
J Query简介及入门指南
J Query简介及入门指南
前端调试工具使用指南
前端调试工具使用指南
淘宝前端技术巡礼
淘宝前端技术巡礼
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
D2-ETao-show
D2-ETao-show
En vedette
Mitosis seif elbadawy
Mitosis seif elbadawy
Seif El Badawy
21 Yüzyılda Bilginin Gücü - Kısa bir özet...
21 Yüzyılda Bilginin Gücü - Kısa bir özet...
Gelecek Hane
Luc labelle sps ottawa
Luc labelle sps ottawa
Luc Labelle
multiple dispatch(OOPs concepts)
multiple dispatch(OOPs concepts)
sumitra22
Top10 Trends 2015 - GelecekHane
Top10 Trends 2015 - GelecekHane
Gelecek Hane
SharePoint Saturday New Hampsire
SharePoint Saturday New Hampsire
Luc Labelle
India (English)
India (English)
Pablogil04
Gimacon ppt
Gimacon ppt
Ansley Dias
Capitulo 7
Capitulo 7
andreinatandazo
AMA Wednesday Market Auction 2014-01-08
AMA Wednesday Market Auction 2014-01-08
mrsbubba33
Бровченко Топало Детская площадка
Бровченко Топало Детская площадка
sprojectdp
Art gallery in jaipur
Art gallery in jaipur
Priyanka Aggarwal
microwaves by peer aakif
microwaves by peer aakif
peeraakif
Türkiye Maker Hareketi - 07.05.2014 - Workshop
Türkiye Maker Hareketi - 07.05.2014 - Workshop
Gelecek Hane
Go green curb global warming
Go green curb global warming
Mohammed Suhail
Evaluation one final
Evaluation one final
AliciaRhodes11
Gojiberryreviews net
Gojiberryreviews net
CompleteLumber318
Türkiye GEN Hareketi
Türkiye GEN Hareketi
Gelecek Hane
Mr beans christmas
Mr beans christmas
nicodex
Basque mountain
Basque mountain
mjuanalcaide
En vedette
(20)
Mitosis seif elbadawy
Mitosis seif elbadawy
21 Yüzyılda Bilginin Gücü - Kısa bir özet...
21 Yüzyılda Bilginin Gücü - Kısa bir özet...
Luc labelle sps ottawa
Luc labelle sps ottawa
multiple dispatch(OOPs concepts)
multiple dispatch(OOPs concepts)
Top10 Trends 2015 - GelecekHane
Top10 Trends 2015 - GelecekHane
SharePoint Saturday New Hampsire
SharePoint Saturday New Hampsire
India (English)
India (English)
Gimacon ppt
Gimacon ppt
Capitulo 7
Capitulo 7
AMA Wednesday Market Auction 2014-01-08
AMA Wednesday Market Auction 2014-01-08
Бровченко Топало Детская площадка
Бровченко Топало Детская площадка
Art gallery in jaipur
Art gallery in jaipur
microwaves by peer aakif
microwaves by peer aakif
Türkiye Maker Hareketi - 07.05.2014 - Workshop
Türkiye Maker Hareketi - 07.05.2014 - Workshop
Go green curb global warming
Go green curb global warming
Evaluation one final
Evaluation one final
Gojiberryreviews net
Gojiberryreviews net
Türkiye GEN Hareketi
Türkiye GEN Hareketi
Mr beans christmas
Mr beans christmas
Basque mountain
Basque mountain
Similaire à 不一樣的 Web Server coServ Part II
不一樣的Web server... coServ
不一樣的Web server... coServ
Ben Lue
Web dev road map part one
Web dev road map part one
安 闫
富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用
luolonghao
Web前端标准在各浏览器中的实现差异
Web前端标准在各浏览器中的实现差异
cleverpig
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京
Joseph Chiang
深入剖析浏览器
深入剖析浏览器
jay li
Html5
Html5
cazhfe
ASP.NET Core 2.1設計新思維與新發展
ASP.NET Core 2.1設計新思維與新發展
江華 奚
基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展
agen
高效率的、可维护的Css
高效率的、可维护的Css
simaopig
[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS
jeannewoo
移动Web开发框架jqm探讨
移动Web开发框架jqm探讨
newker
浅析浏览器解析和渲染
浅析浏览器解析和渲染
Ailsa126
Uliweb设计分享
Uliweb设计分享
modou li
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
Will Huang
前端開發學習簡介
前端開發學習簡介
peterju
View 與 Blade 樣板引擎
View 與 Blade 樣板引擎
Shengyou Fan
Kissy模块化实践
Kissy模块化实践
yiming he
Kissy design
Kissy design
yiming he
給 FLOSS 社群網站管理志工的網站分析入門 - 以 Google Analytics 為例
給 FLOSS 社群網站管理志工的網站分析入門 - 以 Google Analytics 為例
Bob Chao
Similaire à 不一樣的 Web Server coServ Part II
(20)
不一樣的Web server... coServ
不一樣的Web server... coServ
Web dev road map part one
Web dev road map part one
富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用
Web前端标准在各浏览器中的实现差异
Web前端标准在各浏览器中的实现差异
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京
深入剖析浏览器
深入剖析浏览器
Html5
Html5
ASP.NET Core 2.1設計新思維與新發展
ASP.NET Core 2.1設計新思維與新發展
基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展
高效率的、可维护的Css
高效率的、可维护的Css
[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS
移动Web开发框架jqm探讨
移动Web开发框架jqm探讨
浅析浏览器解析和渲染
浅析浏览器解析和渲染
Uliweb设计分享
Uliweb设计分享
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
前端開發學習簡介
前端開發學習簡介
View 與 Blade 樣板引擎
View 與 Blade 樣板引擎
Kissy模块化实践
Kissy模块化实践
Kissy design
Kissy design
給 FLOSS 社群網站管理志工的網站分析入門 - 以 Google Analytics 為例
給 FLOSS 社群網站管理志工的網站分析入門 - 以 Google Analytics 為例
Plus de Ben Lue
Introducing coServ
Introducing coServ
Ben Lue
Programming can be like circuits drawing -- a JSON-FP perspective
Programming can be like circuits drawing -- a JSON-FP perspective
Ben Lue
What is JSON-FP
What is JSON-FP
Ben Lue
Hack & Go! Redefining API @ MOPCON 2014
Hack & Go! Redefining API @ MOPCON 2014
Ben Lue
學好 node.js 不可不知的事
學好 node.js 不可不知的事
Ben Lue
HTML+COIMOTION 開發跨平台 app
HTML+COIMOTION 開發跨平台 app
Ben Lue
以HTML5和COIMOTION打造跨平台App
以HTML5和COIMOTION打造跨平台App
Ben Lue
第一次使用COIMOTION就上手
第一次使用COIMOTION就上手
Ben Lue
COIMOTION概念介紹
COIMOTION概念介紹
Ben Lue
Plus de Ben Lue
(9)
Introducing coServ
Introducing coServ
Programming can be like circuits drawing -- a JSON-FP perspective
Programming can be like circuits drawing -- a JSON-FP perspective
What is JSON-FP
What is JSON-FP
Hack & Go! Redefining API @ MOPCON 2014
Hack & Go! Redefining API @ MOPCON 2014
學好 node.js 不可不知的事
學好 node.js 不可不知的事
HTML+COIMOTION 開發跨平台 app
HTML+COIMOTION 開發跨平台 app
以HTML5和COIMOTION打造跨平台App
以HTML5和COIMOTION打造跨平台App
第一次使用COIMOTION就上手
第一次使用COIMOTION就上手
COIMOTION概念介紹
COIMOTION概念介紹
不一樣的 Web Server coServ Part II
1.
不⼀一樣的 Web Server…
coServ Part II Ben Lue 2014© Gocharm Inc.
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.
coServ 想傳達的設計觀點 專注處理⼩小區域(區塊) è 專注在區塊或區域,⽽而不是整個網⾴頁 相同的內容可以有無數種顯⽰示⽅方式 è
如果把內容格式加以固定,UI/UX設計 可以簡化並快速累積
4.
重新檢視網⾴頁 • 同⼀一網站下,不同網⾴頁通常有相 同的⾴頁⾸首、邊欄和⾴頁尾(footer) • 真正不同的是主內容區 •
把主內容區視為⼀一個區塊 • 網址其實是在指定⼀一個區塊
5.
如能了解網⾴頁是主內容區塊的虛胖版 開發時間也能從虛胖版進化到精簡版 區塊(block) 是 coServ 建置網站的核⼼心
6.
靜態區塊 HTML CSS Js
區塊產⽣生器 多國語系 ⽚片語檔 <style> … </style> <script> … </script> <div> … </div>
7.
動態區塊 HTML CSS Js
區塊產⽣生器 多國語系 ⽚片語檔 <style> … </style> <script> … </script> <div> … </div> 內容為 JSON 物件
8.
動態區塊內容 HTML CSS Js
區塊產⽣生器 多國語系 ⽚片語檔 <style> … </style> <script> … </script> <div> … </div> 內容為 JSON 物件 本地 node 模組 BaaS 服務 OR
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.
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.
資料從何⽽而來 <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.
產⽣生資料 區塊所需的資料,可以從⼆二種⽅方式擇⼀一產⽣生: ü 本地模組(local module)
在 coServ 上撰寫 node.js 的模組,可⽤用來讀取DB 或其他網站的資料 ü BaaS 服務 利⽤用 BaaS 服務來處理資料的儲存、管理、運算等。 coServ ⺫⽬目前直接⽀支援 COIMOTION的 API 服務。要 使⽤用其他 BaaS 亦可⾃自⾏行撰寫。
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.
BaaS 資料源 coServ 能夠直接和
COIMOTION 服務串接: o 可在 siteURI.json 中直接給 API 網址,作為區塊 的資料來源 o 在 javascript 中可以⽤用 __.api() 呼叫 API,類似 Ajax 的效果 o 更多細節在未來的簡報中說明
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.
MVC 架構 區塊本⾝身是以 MVC
⽅方式架構出來: o Model: 由本地模組或 COIMOTION API 服務提供 o View: 由 HTML, CSS 樣板構成 o Controller: 由區塊的 Javascript 樣板構成,以下 做進⼀一步討論
17.
The Block Controller Block
Controller 具有以下的特性: o 只提供程式功能給對應的區塊。 o Block Controller 具有 OO encapsulaGon 的特性, 也就是在 controller 內定義的函式名稱不會與 其他 controller 內的函式名稱衝突 o coServ 提供 controller ⼀一些內建功能,讓開發 者在控制區塊時更⽅方便
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.
在 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.
關於 SASS coServ (從
0.8.8 版起)⽀支援 scss 語法的 SASS 檔 案。開發者可以⽤用 .sass 檔案來取代區塊中原來 的 .css 檔。 詳細內容可參考 https://github.com/coimotion/coServ/blob/ master/howToSASS_zh.md
21.
CSS Encapsulation 標題取的⽂文鄒鄒,意思是指如何保護
CSS 中的 class 和 id,不致互相撞名。 coServ 對區塊提供了 css encapsulaGon 的保護, 開發者不需要擔⼼心不同區塊的 class 或 id 會互相 干擾
22.
⼩小結論 coServ 中的區塊⾃自成⼀一個單位,其中的 CSS
和 Javascript 都受到保護。區塊間的 CSS 和 Javascript 不會互相干擾或衝突。 因為上述的特性,區塊可以被任意組合在⼀一個網 ⾴頁中,也可以重複使⽤用。 善⽤用區塊,開發時間變成 1/10 是可能的
23.
Thanks
Télécharger maintenant