Meteor 初體驗(上)
Meteor 是一個最近很火紅的 web framework。跟 Django、Rails 等目前主流的 web framework 相比,Meteor 讓建構 real-time web apps 這件事情更加的容易。儘管目前 Meteor 仍然在 preview 階段,不過他們目前有七個人 full-time 開發這個 framework,所以進展的相當迅速。
這篇文章會分成上下兩集,完成之後會建立起一個很簡單的 hacknews clone,這邊就姑且叫做 hahanews 吧。 最終的 source code 放在 https://github.com/daikeren/hahanews。如果想先看看成果的也可以在 http://hahanews.meteor.com/ 看看。
安裝 Meteor
Meteor 的安裝十分簡單,只要
$ curl https://install.meteor.com | /bin/sh
就可以裝好了~
Meteor 初體驗
裝好了 Meteor 之後,首先我們先 create 一個 project
$ meteor create hahanews
來跑看看吧
$ cd hahanews
$ meteor
接著我們就可以打開瀏覽器,訪問 http://localhost:3000/ 我們可以看到如下的圖
讓我們開始熱身一下吧,首先,打開 hahanews.html,我們可以看到檔案如下
hahanews
{{> hello}}
Hello World!
{{greeting}}
我們把 h1 tag 裡面的內容稍作修改,改成
HAHAnews
存檔之後看看你的瀏覽器,你會發現到儘管沒有 reload,但是瀏覽器當中的 Hello World! 自動改成 HAHANews 了!這就是 Meteor 自動幫我們處理的眾多事情之一。
讓我們再來玩玩吧。接著讓我們打開 news.js,如果沒意外的話會看到
if (Meteor.isClient) {
Template.hello.greeting = function () {
return "Welcome to hahanews.";
};
Template.hello.events({
'click input' : function () {
// template data, if any, is available in 'this'
if (typeof console !== 'undefined')
console.log("You pressed the button");
}
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
把 Template.hello.greeting 改成
Template.hello.greeting = function () {
return "News List:";
};
存檔之後應該會在瀏覽器中看到原本的 “Welcome to hahanews.” 改成 “News List:” 了。
讓我們來存些資料吧
剛剛我們只是隨便改些東西,感覺起來 meteor 好像只是做了類似 LiveReload 的功能而已,好像也沒什麼。所以讓我們來存些資料吧!
在 Meteor 裡面,透過 MongoDB 來幫我們做資料庫相關的處理,關於資料庫方面的事情之後有機會會再多談點。讓我們首先存些資料體驗一下。在 news.js 當中,我們在第一行加入:
Links = new Meteor.Collection("links");
這樣就在 MongoDB 當中建了一個新的 collection,因為 news 這個 collection 宣告在 news.js 的第一行,所以在 client side 跟 server side 的程式當中都會被看到。你可能會想,這樣真的有在 server side 做了啥嗎?讓我們打開 chorme 的 console,輸入
> Links
會看到
接下來讓我們加入一些資料進去,
> Links.insert({title: "Google is evil", url: "http://www.google.com/" });
> Links.insert({title: "M$ is evil", url: "http://www.microsoft.com/" });
在兩行指令之後,應該都會看到一串類似 “1891c327-4a65-464c-bfed-4096e1e6a410” 的 guid。接著我們可以來確認看看我們的 news 有沒有真的存入 database 中。
> Links.findOne({title: "Google is evil"});
存好資料,然後咧?
接著讓我們來把剛剛加入的 Links 在網頁上面呈現出來吧!首先讓我們打開 hahanews.html,移除原本的 {{> hello}} 並且加入 {{> link_list}}
{{> link_list}}
Meteor 預設使用 Handlebars 的 template,關於更多 Handlebars 的語法可以參考 Handlebars 的網站。這邊的意思是說要 render 一個 template name 為 link_list 的 template。所以我們要多新增一個 template 在 news.html 當中:
{{#each links }}
-
{{ title }}
{{/each }}
再來,打開 news.js,我們要來定義這當中的 links 是什麼東西。Meteor 會根據 Meteor.isClient 以及 Meteor.isServer 來判斷這段 javascript 應該是在 server 端還是 client 端的 code。這邊我們希望要 render 出 link_list 這個 template 當中的 links,所以在 if (Meteor.isClient) 這段判斷式當中,加入定義 links 的 code
if (Meteor.isClient) {
Template.link_list.links = function () {
return Links.find({});
};
}
其中 Template.link_list.links 就是對應到 link_list 這個 template name,links 裡面這個變數。
return Links.find({});
則是代表回傳所有的 Links。如果都沒錯的話會看到
我們剛剛從 console 加入的 links 已經 render 出來了!我們可以繼續在 console 當中加些 links
> Links.insert({title: "Apple", url: "http://www.apple.com/" });
應該會看到新的 title 馬上跟著即時被 render 出來。
接下來呢?
這邊為止我們很快的存了一些資料,也看了基本的 template 應用。在下集的部份我們會加入一些事件的處理,還有簡單介紹一下 Meteor 的 package 還有 deploy。