SlideShare a Scribd company logo
1 of 41
如何打造Web MVC Framework<基本概念篇>  自己動手造輪子 大澤木小鐵
目標
Framework 要做什麼 封裝眾人的開發經驗。 節省前期架構建置成本。 與伙伴有共同的開發基礎。 節省建置中的溝通成本。 導入更合理的開發方式。
心理層面
資源問題 對公司有益嗎?值得老闆花時間投資嗎? 上班時間可以做嗎?還是花自己的下班時間來做? 要自己單打獨鬥嗎?還是有可以一起討論的同事? 要使用公司的伺服器嗎?還是自己申請外部空間?
推廣問題 是自己覺得好用?還是大家都覺得好用? 是否打算開源?還是僅在內部使用? 若是打算開源,有足夠的信心嗎?能承受後續維護的壓力嗎?
持續維護 官方資訊 最新消息 / 開發進度。 程式下載 / 問題回報。 現成的服務 GitHub Google Project Hosting Source Forge 。
文件建立與更新 讓使用者可以快速上手並瞭解基本功能的範例。 實用的程式碼片段及應用時機介紹。 各類別的 API 使用說明。
社群 是否準備了官方討論區? 是否有時間經常性地上線回答使用者的問題? 能否培養出共同維護 Framework 的幫手? 能否定期舉辦研討說明會?
到這裡…你的熱血冷卻了嗎?
那麼我們繼續…
技術層面
基礎  瞭解你用的程式語言。 瞭解如何與 Web Server 溝通。 在 Web 開發上所累積的經驗。
瞭解你用的程式語言 發明者的初衷。 變數型態。 敘述結構。 物件導向開發。 設計模式。 善用語言的特性與優勢。
瞭解如何與 Web Server 溝通 語言是否提供與 Web Server 溝通的方式?(例如 PHP 提供 $_GET 、 $_POST 、 $_SERVER 等預先處理好的變數;而 header / echo / print 可以對 Web Server 輸出資料。) 沒有的話,就要非常熟悉 HTTP 協定,並自行剖析或組合 HTTP 內容。 瞭解 Web Server 如何執行開發出來的程式? module / CGI / FastCGI / SSL … 每種方式都有可能有難題等著解決。
在 Web 開發上所累積的經驗 HTML / CSS / JavaScript … AJAX / JSON / XML … Database / Web Service … Optimization / Performance … 其他通用而可以放到 Framework 裡的經驗。
再深入一點…
Web MVC  示意圖: Model Controller Browser View 參考自 MVC 演化史 (http://huoding.com/2011/05/02/64)
目錄結構 project application controllers models views library public bootstrap.file
Controller  Bootstrap Router Request Response Browser Action Controller
Bootstrap 處理應用程式的初始化設定並執行。 管理應用程式執行路徑。 指派 Router分析網址。 管理輸入 (Request) ,使得使用者的動作得以分派 ( Dispatch) 到 Action Controller 中。 管理輸出 (Response) ,使得應用程式能將結果傳送出來。
Router  分析網址,並轉換成對應的 controller /action 及網址參數等。 利用 Chain of Responsibility 模式來設計路由串。 提供反組方法,讓 View 有機會可以用 controller / action 組出對應的網址。
Request  封裝瀏覽器的要求,例如 header 、 query string 、 form 及 cookies 等內容,將其轉換成方便利用的參數。 封裝伺服器端環境變數、解析後的網址所對應的 controller 及 action 等資訊。
Response  將所有要輸出的內容全部先緩存在此物件。 負責輸出 HTTP 的 header 、 body 。 接收程式丟出的 exception 。 將所有資訊傳送給 Web Server 。
Action Controller  將系統中有關連的動作集合在同一個 Action Controller 類別裡,每個動作都是一個公開的類別方法。 能決定程式流程,例如重導向。 接收 Model 的狀態,並轉交給 View 顯示。
Model  對外介面 資料運算邏輯層 資料存取邏輯層
資料運算邏輯層 演算法、商業邏輯…任何與資料來源無關而著重於資料運算的部份。 不需特別在 Framework 中實作。
資料存取邏輯層 一般指關聯式資料庫,但可以是任何資料來源。 通常程式語言會有相關的套件可以利用。(例如 PHP 的 PDO 、 mysqli等。) Database Adapter / Query Builder 。 Active Record / Table Data Gateway / Row Data Gateway / Data Mapper。
View  Data from Model Output Template Engine Layout Template
Template Engine 直接使用程式語言來當做樣版語法。 支援不同格式的輸出: HTML / JSON / XML … 提供管理樣版檔案路徑的方式。
Template / Layout 通常一個 action 方法對應一個 template 檔案,但也可以再細拆為一個頁面區塊一個 template 檔案。 Layout 為兩階式 template 設計,一般做法是:先產生 layout 內容,再產生 action template 內容。
以上只是基礎架構
我們要讓Framework更有水準
可擴充性  Action Helper – 擴充 Action Controller 。 View Helper – 擴充 View 。 Plugin / Behavior – 擴充 Model 。 Module – 擴充整個系統。
便利性  Framework 除了現成的目錄結構外,通常還會提供一些方便的操作工具。 命令列操作指令。 程式碼產生器。 但並非一定要有這些工具才算 Framework 。
命令列操作指令 管理專案的目錄結構、設定等。 產生程式碼。 安裝擴充套件。 執行排程。 在專案根目錄下通常會有一個狀態檔,來協助操作指令瞭解整個專案目錄的狀況。
程式碼產生器  通常會以命令列操作指令來呼叫使用。 產生 Controller / View / Data Mapper。 產生 CRUDScaffolding 。
其他 提供 Form (Filter / Validator) 、 Debug 、 Log 、 Cache 等功能。 整個 Framework 要有 Unit Test 的能力。 要能夠整合第三方套件。
有概念了嗎?
建議現實的專案還是用別人造好的輪子
謝謝收看

More Related Content

Similar to 如何打造 WebMVC Framework - 基礎概念篇

oa rapid framework課程說明會
oa rapid framework課程說明會oa rapid framework課程說明會
oa rapid framework課程說明會Jimmy Weng
 
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗Drupal Taiwan
 
2017 開源人年會 (COSCUP) - WooCommerce 開發入門的準備動作
2017 開源人年會 (COSCUP) - WooCommerce 開發入門的準備動作2017 開源人年會 (COSCUP) - WooCommerce 開發入門的準備動作
2017 開源人年會 (COSCUP) - WooCommerce 開發入門的準備動作Kuohui Lu
 
Our experience to start a startup
Our experience to start a startupOur experience to start a startup
Our experience to start a startupYenwen Feng
 
2021 MOPCON - 行動化解決方案的技術選型, 交給 Line Bot 來搞定
2021 MOPCON - 行動化解決方案的技術選型, 交給 Line Bot 來搞定2021 MOPCON - 行動化解決方案的技術選型, 交給 Line Bot 來搞定
2021 MOPCON - 行動化解決方案的技術選型, 交給 Line Bot 來搞定Kyle Shen
 
關於產品經理的角色與職責
關於產品經理的角色與職責關於產品經理的角色與職責
關於產品經理的角色與職責Cloud Chen
 
Don't make me think
Don't make me thinkDon't make me think
Don't make me thinkakong0517
 
Responsive Web Design 響應式網頁設計
Responsive Web Design 響應式網頁設計Responsive Web Design 響應式網頁設計
Responsive Web Design 響應式網頁設計Bill Lin
 
2011 0729-推动知识管理之成功关键因素(拓尔思)
2011 0729-推动知识管理之成功关键因素(拓尔思)2011 0729-推动知识管理之成功关键因素(拓尔思)
2011 0729-推动知识管理之成功关键因素(拓尔思)Yeong-Long Chen
 
6.twitter bootstrap 元件介紹
6.twitter bootstrap 元件介紹6.twitter bootstrap 元件介紹
6.twitter bootstrap 元件介紹Nelson Chen
 
Designing Interfaces chapter 9
Designing Interfaces chapter 9Designing Interfaces chapter 9
Designing Interfaces chapter 9Shu Ting Hsieh
 
無責任網站企劃:以全國碩博士論文網為例 by 孫治華
無責任網站企劃:以全國碩博士論文網為例 by 孫治華無責任網站企劃:以全國碩博士論文網為例 by 孫治華
無責任網站企劃:以全國碩博士論文網為例 by 孫治華悠識學院
 
2021品禾全端網路工作室
2021品禾全端網路工作室2021品禾全端網路工作室
2021品禾全端網路工作室Nowill Chang
 
一个互联网产品的成长史
一个互联网产品的成长史一个互联网产品的成长史
一个互联网产品的成长史AHAConference
 
技术框架对比
技术框架对比技术框架对比
技术框架对比Tony Deng
 
行動雲端團隊介紹
行動雲端團隊介紹行動雲端團隊介紹
行動雲端團隊介紹cathyyin
 
(宇宏)生產履歷 建議方案 20100901 v2
(宇宏)生產履歷 建議方案 20100901 v2(宇宏)生產履歷 建議方案 20100901 v2
(宇宏)生產履歷 建議方案 20100901 v2Sonny Chen
 
Radical collaboration ibm microelectronics upload
Radical collaboration ibm microelectronics uploadRadical collaboration ibm microelectronics upload
Radical collaboration ibm microelectronics uploadalbert Ding shan Wang
 

Similar to 如何打造 WebMVC Framework - 基礎概念篇 (20)

oa rapid framework課程說明會
oa rapid framework課程說明會oa rapid framework課程說明會
oa rapid framework課程說明會
 
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
 
2017 開源人年會 (COSCUP) - WooCommerce 開發入門的準備動作
2017 開源人年會 (COSCUP) - WooCommerce 開發入門的準備動作2017 開源人年會 (COSCUP) - WooCommerce 開發入門的準備動作
2017 開源人年會 (COSCUP) - WooCommerce 開發入門的準備動作
 
Our experience to start a startup
Our experience to start a startupOur experience to start a startup
Our experience to start a startup
 
2021 MOPCON - 行動化解決方案的技術選型, 交給 Line Bot 來搞定
2021 MOPCON - 行動化解決方案的技術選型, 交給 Line Bot 來搞定2021 MOPCON - 行動化解決方案的技術選型, 交給 Line Bot 來搞定
2021 MOPCON - 行動化解決方案的技術選型, 交給 Line Bot 來搞定
 
關於產品經理的角色與職責
關於產品經理的角色與職責關於產品經理的角色與職責
關於產品經理的角色與職責
 
Don't make me think
Don't make me thinkDon't make me think
Don't make me think
 
Responsive Web Design 響應式網頁設計
Responsive Web Design 響應式網頁設計Responsive Web Design 響應式網頁設計
Responsive Web Design 響應式網頁設計
 
2011 0729-推动知识管理之成功关键因素(拓尔思)
2011 0729-推动知识管理之成功关键因素(拓尔思)2011 0729-推动知识管理之成功关键因素(拓尔思)
2011 0729-推动知识管理之成功关键因素(拓尔思)
 
6.twitter bootstrap 元件介紹
6.twitter bootstrap 元件介紹6.twitter bootstrap 元件介紹
6.twitter bootstrap 元件介紹
 
Ch10
Ch10Ch10
Ch10
 
Designing Interfaces chapter 9
Designing Interfaces chapter 9Designing Interfaces chapter 9
Designing Interfaces chapter 9
 
無責任網站企劃:以全國碩博士論文網為例 by 孫治華
無責任網站企劃:以全國碩博士論文網為例 by 孫治華無責任網站企劃:以全國碩博士論文網為例 by 孫治華
無責任網站企劃:以全國碩博士論文網為例 by 孫治華
 
2021品禾全端網路工作室
2021品禾全端網路工作室2021品禾全端網路工作室
2021品禾全端網路工作室
 
一个互联网产品的成长史
一个互联网产品的成长史一个互联网产品的成长史
一个互联网产品的成长史
 
技术框架对比
技术框架对比技术框架对比
技术框架对比
 
行動雲端團隊介紹
行動雲端團隊介紹行動雲端團隊介紹
行動雲端團隊介紹
 
吳明展的履歷表 My Resume 2009 (pdf)
吳明展的履歷表 My Resume 2009 (pdf)吳明展的履歷表 My Resume 2009 (pdf)
吳明展的履歷表 My Resume 2009 (pdf)
 
(宇宏)生產履歷 建議方案 20100901 v2
(宇宏)生產履歷 建議方案 20100901 v2(宇宏)生產履歷 建議方案 20100901 v2
(宇宏)生產履歷 建議方案 20100901 v2
 
Radical collaboration ibm microelectronics upload
Radical collaboration ibm microelectronics uploadRadical collaboration ibm microelectronics upload
Radical collaboration ibm microelectronics upload
 

More from Jace Ju

Advanced php testing in action
Advanced php testing in actionAdvanced php testing in action
Advanced php testing in actionJace Ju
 
Beginning PHPUnit
Beginning PHPUnitBeginning PHPUnit
Beginning PHPUnitJace Ju
 
Refactoring with Patterns in PHP
Refactoring with Patterns in PHPRefactoring with Patterns in PHP
Refactoring with Patterns in PHPJace Ju
 
Patterns in Library Design (套件設計裡的模式)
Patterns in Library Design (套件設計裡的模式)Patterns in Library Design (套件設計裡的模式)
Patterns in Library Design (套件設計裡的模式)Jace Ju
 
Patterns in Zend Framework
Patterns in Zend FrameworkPatterns in Zend Framework
Patterns in Zend FrameworkJace Ju
 
Head First Zend Framework - Part 1 Project & Application
Head First Zend Framework - Part 1 Project & ApplicationHead First Zend Framework - Part 1 Project & Application
Head First Zend Framework - Part 1 Project & ApplicationJace Ju
 
PHPUnit 入門介紹
PHPUnit 入門介紹PHPUnit 入門介紹
PHPUnit 入門介紹Jace Ju
 
Web Refactoring
Web RefactoringWeb Refactoring
Web RefactoringJace Ju
 
jQuery 實戰經驗講座
jQuery 實戰經驗講座jQuery 實戰經驗講座
jQuery 實戰經驗講座Jace Ju
 
CSS 排版 - 基礎觀念篇
CSS 排版 - 基礎觀念篇CSS 排版 - 基礎觀念篇
CSS 排版 - 基礎觀念篇Jace Ju
 
PHP 防駭 - 基礎觀念篇
PHP 防駭 - 基礎觀念篇PHP 防駭 - 基礎觀念篇
PHP 防駭 - 基礎觀念篇Jace Ju
 
PHP 物件導向 - 基礎觀念篇
PHP 物件導向 - 基礎觀念篇PHP 物件導向 - 基礎觀念篇
PHP 物件導向 - 基礎觀念篇Jace Ju
 

More from Jace Ju (12)

Advanced php testing in action
Advanced php testing in actionAdvanced php testing in action
Advanced php testing in action
 
Beginning PHPUnit
Beginning PHPUnitBeginning PHPUnit
Beginning PHPUnit
 
Refactoring with Patterns in PHP
Refactoring with Patterns in PHPRefactoring with Patterns in PHP
Refactoring with Patterns in PHP
 
Patterns in Library Design (套件設計裡的模式)
Patterns in Library Design (套件設計裡的模式)Patterns in Library Design (套件設計裡的模式)
Patterns in Library Design (套件設計裡的模式)
 
Patterns in Zend Framework
Patterns in Zend FrameworkPatterns in Zend Framework
Patterns in Zend Framework
 
Head First Zend Framework - Part 1 Project & Application
Head First Zend Framework - Part 1 Project & ApplicationHead First Zend Framework - Part 1 Project & Application
Head First Zend Framework - Part 1 Project & Application
 
PHPUnit 入門介紹
PHPUnit 入門介紹PHPUnit 入門介紹
PHPUnit 入門介紹
 
Web Refactoring
Web RefactoringWeb Refactoring
Web Refactoring
 
jQuery 實戰經驗講座
jQuery 實戰經驗講座jQuery 實戰經驗講座
jQuery 實戰經驗講座
 
CSS 排版 - 基礎觀念篇
CSS 排版 - 基礎觀念篇CSS 排版 - 基礎觀念篇
CSS 排版 - 基礎觀念篇
 
PHP 防駭 - 基礎觀念篇
PHP 防駭 - 基礎觀念篇PHP 防駭 - 基礎觀念篇
PHP 防駭 - 基礎觀念篇
 
PHP 物件導向 - 基礎觀念篇
PHP 物件導向 - 基礎觀念篇PHP 物件導向 - 基礎觀念篇
PHP 物件導向 - 基礎觀念篇
 

如何打造 WebMVC Framework - 基礎概念篇