Meteor.js

Outline

  1. Meteor簡介
  2. 框架比較
  3. 系統架構
  4. 動手做論壇
  5. 學習資源

1.Meteor簡介

Meteor是一個建構在node.js上的平台，

用來開發real-time的網頁程序

 

Meteor有7種特性

  1. Data on the Wire

  2. One Language

  3. Database Everywhere

  4. Latency Compensation

  5. Full Stack Reactivity

  6. Embrace the Ecosystem
  7. Simplicity = Productivity
 

為什麼要用Meteor呢?

用更少的程式碼達成更多的效果，

用更少且簡單的邏輯做到更多的工作，

提升了開發速度也增加了可維護性。

 

適合用Meteor的網站類型

  1. 即時提供或者交換資訊用途的網站或app 
    ex:聊天室、即時新聞、氣象、公車
  2. 有大量複雜操作的網路應用
    ex:網頁遊戲
  3. 功能龐大且容易增生需求、經常修改的網路應用
    ex:表單管理、客戶管理等系統。

2.框架比較

 

    

語言

JavaScript

Python

Ajax
應用

服務器和瀏覽器間的雙向通信

要接收、確認、回復才行

適合
網站

·  電子商務網站

·  新聞網站

·  公共設施網站

·  微型博客

(一些須即時更新的網站)

大量靜態内容的博客、维基

如果一直更新會無法觀看

比較

一種語言可用於前端後端

需用不同語言寫一樣的東西(前端後端)

Meteor V.S. Django

 Express V.S. Meteor 

MEAN stack + Socket.IO + grunt/gulp + Cordova + hot code reload + a lot more

=Meteor.js

但如果你需要一台跑車呢?

3.系統架構

4.動手做論壇

4.動手做論壇

  1. meteor create meteor
  2. cd meteor
  3. meteor  
    (In cloud 9 : meteor --port $IP:$PORT  )
  4. rm *
  5. meteor add twbs:bootstrap

第一步驟:建立一個基本的app

6.mkdir client public lib 

7.copy the css file in client/stylesheets/style.css

8.copy main.html in client

9.copy templates and posts/posts_item/list/js 

 

現在你有一個靜態模板資料囉!

 

第二步驟:建立一個模板資料

4.動手做論壇

10.update the new code on posts_list.html

11.create post_item.js

12.create lib/collections/posts.js

13.create server/fixtures.js

 

 

 

第三步驟:線上更新資料

試試看在瀏覽器的console裡面使用
    Posts.insert({
      title: 'Learn Meteor',
      author: 'hsin-chieh', 
      url: 'http://docs.meteor.com'
    });

4.動手做論壇

14.meteor remove autopublish //刪除自動枚舉

15.create main.js

12.create lib/collections/posts.js

13.create server/fixtures.js

 

 

 

第四步驟:加入討論區

試試看在瀏覽器的console裡面使用
    Posts.insert({title: 'Learn Meteor',author: 'hsin-chieh', 
      url: 'http://docs.meteor.com'});

4.動手做論壇

5.學習資源

Learn-Meteor

Free-resource

Made with Slides.com