Non-MVCWeb Framework

前端工程師也能淡定地開發網站應用程式

Fred Chien

我是誰？

Who Am I

Fred Chien錢逢祥

永遠的大四生

Forever

StartupMandice Software.

StartupMandice Software.

StartupMandice Software.

慣 C

救火 惡搞

創新

慣 C

救火 惡搞

創新

JavaScript

cfsghost At gmail.com

Blogfred-zone.blogspot.com

Personal Websitepeople.linux.org.tw/~fred/

回到主題

Non-MVC Web Framework

正式提到 Non-MVC 之前

Some Stories

Web 的故事

Story of Web

簡單來說

商人眼中的 Web 發展

History of Web

Web 1.0做很多網頁來賺錢

泡沫化

Web 2.0讓用戶自己做很多網頁來賺錢

Cloud嗯... 滿出來的錢

但是

工程師眼中的 Web 發展

As Developer

Homepage做很多網頁

CGI伺服器有了多功能

Homepage + CGI功能好多好開心

泡沫化

CHomeGpagIe 已經看不懂自己在寫什麼了

救星

Web Framework 有條理的整理我們的 code

因為 MVC 的介入

降世於 Web

Web 從此...

有臉蛋

View

有身材

Model

還有神秘的三角地帶

Controller

從此 MVC 讓大家過著爽歪歪的日子

Happiness Forever

一個星期前

在 Node.js Taiwan 活動

發現一個驚人的事實！

Amazing

強者都要自幹一套

Web Framework

我要當強者！

於是我也自幹了一套 Web 框架

RedTea

RedTea這不是紅茶！這不是紅茶！

RedTea 是什麼？

Non-MVC 的嘗試

Experimental

githubgithub.com/cfsghost/redtea

我沒有因 MVC 爽歪歪

我只想要用 JavaScript

回到原點思考

Thinking

傳統 Web 開發不外乎...

Traditional Web Development

HTML Page

Front-end JavaScript

Server-side ScriptingPHP, Python, RoR, ASP, .Net.....etc

Server-sideScripting

Model(Database)

Controller(Handler)

View(Front-end)

User

MVC World

Server-sideScripting

Model(Database)

Controller(Handler)

View(Front-end)

User

MVC World

對！

前端工程師

只看臉蛋

只專精前端

難道就不能得到幸福嗎？

郎情妾意劍就教不了

Non-MVCWeb Framework

前端工程師的奸夫淫婦劍

因為JavaScript只能寫前端

然後有了光

Node.js我能用 JavaScript 寫後端了！

可是碰了壁

前後端開發經驗差好大！

要會寫後端程式...

學會組裝網頁

把資料塞到網頁中送出去

學會 GET/POST 機制

接收各式各樣從 Client 送來的資料

學會自定 API 和 Protocol

為了和前端 Ajax 套上

JavaScript != JavaScript老子都不老子了

為什麼

不能只用前端經驗？

為什麼

後端的前戲這麼多？

長驅直入才是王道！

Non-MVCWeb Framework

前端工程師的奸夫淫婦劍

如果

你可以直接使用後端 Class

不再需要再學會怎麼用 GET/POST 傳遞資料

後端 API 就像

Browser 內建的 API

不再需要設計 API Protocol 和學會 Ajax

前端工程師時代

容易上手，開發效率比 MVC 高

var c = document.getElementById('content');var chat = RedTea.API.Chat(); chat.conversation.push('Fred: Hello!<br>'); chat.getConversation(function(err, data) { c.innerHTML = data;});c.innerHTML += chat.conversation.join('');

Browser-side JavaScript Code

module.exports = { Chat: Chat };function Chat() { var self = this; this.conversation = []; this.getConversation = function(callback) { callback(null, self.conversation); }; ...}

Server-side JavaScript Code

一個放上面，一個放下面

會寫 JavaScript 就搞定！

這只有 JavaScript 才辦得到！

Server-sideJavaScript

Class

Browser-sideJavaScript

Script

RPC

Convert source code to AST

Send AST to client

Compile AST to real Object

Server

Caller

Operatechat.getConversation(...);chat.conversation.push(...)

Ajax/Web Socket

RedTea 開發四部曲

● 決定 URL Path● 設計 Layout in HTML● 設計前端功能 (In JavaScript)● 設計後端功能 (In JavaScript)

RedTea 四大部份

● Route (統一化的 routing 設定)● UI (如同 MVC 的 views)● API (Server-side Script)● Runner (Client-side Script)

Routing

Get /index

Runnerindex.js

UIindex.jade Browser

But

RedTea 只是原型

不支援 Session, Auth......etc

某一天在 IRC 上

irc.freenode.net #Node.js-tw

和 Caesar 討論

未來可以應用的方向

決定以 Express 重新包裝

名字千挑萬選

Naming

Kamalan葛瑪蘭、嘎媽蘭

Kamalan Web Framework台灣味的 Web Framework

最重要的是

全世界唯一神明認可

我有擲茭杯！

githubgithub.com/cfsghost/Kamalan

Feature特色

Express 有的我們都有

All We Have

而且

使用方法一樣

可是

RedTea 的機制還沒移植

Coming Soon

為了表示歉意

Live Demo也歡迎打臉

第一個

要求 打臉 的講者