Upload
fred-chien
View
7.637
Download
6
Embed Size (px)
DESCRIPTION
JavaScript is a client-side script language, but we can use it on server side programming now. However, it is still difficult to write server-side application for front-end developer.Here we try to find a solution to write server-side script that developer only need to understand and have client-side experience.
Citation preview
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也歡迎打臉
第一個
要求 打臉 的講者