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，我們可以看到檔案如下

  



  {{> hello}}

我們把 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 當中：

再來，打開 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。

Andy Dai