简介

先来活动一下大脑。假设你坐在电脑面前,在两个窗口中打开同一个文件夹。

在其中一个窗口中删除一个文件,另一个窗口中的这个文件会消失吗?

不用实际操作你也知道肯定会消失的。在本地文件系统中的操作,不用刷新或者回调,变动就能应用到所有地方。

我们再来看一下相同的事情在网页中会有什么结果。例如,你在两个浏览器窗口中打开同一个 WordPress 后台页面,在其中一个窗口中新建了一篇文章。和桌面系统不同的是,不管等待多长时间,另一个窗口都不会发生变化,除非你手动刷新网页。

过去这些年,我们已经习惯了,人和网站之间的通信是离散的。

但是,作为新一代框架和技术之一的 Meteor,尝试挑战这一现状,让网页能够实时和响应。

Meteor 是什么?

Meteor 是一个构建在 Node.js 之上的平台,用来开发实时网页程序。Meteor 位于程序数据库和用户界面之间,保持二者之间的数据同步更新。

因为 Meteor 是基于 Node.js 开发的,所以在客户端和服务器端都使用 JavaScript 作为开发语言。而且,Meteor 程序的代码还能在前后两端共用。

Meteor 这个平台很强大,网页程序开发过程中的很多复杂、容易出错的功能都能抽象出来,实现起来很简单。

为什么使用 Meteor?

那么,你为什么要花时间学习 Meteor,而不去学其他框架呢?拨开 Meteor 的各种功能,我们认为原因只有一个:因为 Meteor 易于学习。

而且,和其他框架不同,使用 Meteor,几小时之内就能开发出一个正常运行的实时网页程序。如果之前做过前端开发,对 JavaScript 已经有所了解,甚至都不用再学习一门新的编程语言。

Meteor 可能就是你要找的理想框架,当然,也可能不是。既然只要几晚或一个周末就能上手,为什么不试试呢?

开始学习meteor

第一印象十分重要,安装 Meteor 并不会遇到什么困难。大多数情况下,在五分钟内便可以完成。

首先,如果在 Mac OS 或 Linux 系统下,你可以打开终端窗口,输入以下命令来安装 Meteor:

$ curl https://install.meteor.com | sh

如果你使用 Windows 系统,请参考 Meteor 网站的 安装指导

以上命令会在系统中安装 meteor 可执行文件,然后就可以使用 Meteor 了。

选择不安装 Meteor

如果你无法或者不想在本地安装 Meteor ,我们推荐你使用 Nitrous.io

使用 Nitrous.io 可以让你在览器中直接编辑代码并运行程序。我们撰写了一篇简短的指南,介绍如何使用 Nitrous.io。

你可以一直阅读那篇指南直到“Installing Meteor”部分,然后再回到本章,从“创建简单的应用”一节开始阅读。

创建简单的应用

安装好 Meteor 之后,我们来创建一个应用。创建应用要使用 Meteor 的命令行工具 meteor

$ meteor create microscope

上述命令会下载 Meteor,然后新建一个基本可用的 Meteor 项目。命令执行完成后,会看到新建了一个文件夹,名为microscope/,包含以下文件:

.meteor
microscope.css
microscope.html
microscope.js

Meteor 生成的应用只是一个简单的骨架,演示一些简单的模式。

虽然这个应用没什么功能,但也能运行。要运行应用,请切换到终端,输入下面的命令:

$ cd microscope
$ meteor

现在打开浏览器,访问 http://localhost:3000(或者等效的 http://0.0.0.0:3000),应该能看到下面的网页:

恭喜!你的第一个 Meteor 应用顺利运行了。顺便说一下,如果想停止运行程序,只要切换到对应的终端窗口按 ctrl+c键即可。

如果你使用 Git,正是时候用 git init 来初始化你的项目仓库。

再见 Meteorite

曾经有段时间,Meteor 依赖于外部代码包管理器 Meteorite。自从 Meteor 0.9.0 版本以后,就不再需要 Meteorite 了,因为它的功能已经融入 Meteor 之中。

所以,如果你在这本书或在浏览 Meteor 相关的资料时,遇到 Meteorite 的 mrt 命令行工具,你可以放心地用meteor 来替换它。

添加代码包

下面我们使用 Meteor 的 package 系统在项目中引入 Bootstrap 框架。

这与通常手动添加 Bootstrap 的 CSS 和 Javascript 文件的方法是没有区别的,只不过我们依赖代码包维护者来为我们更新这些文件。

既然我们说到此,我们也来添加 Underscore 代码包。 Underscore 是一个 JavaScript 工具库,对于操纵 JavaScript 数据结构非常有用。

截至写这本书时,underscore 代码包依然算作 Meteor “官方”的代码包,所以这个包没有作者:

meteor add twbs:bootstrap
meteor add underscore

注意的是现在我们添加了 Bootstrap 3。而这本书中的一些截图是老版本的 Microscope 使用 Bootstrap 2 时截取的,所有它们看起来会有稍微不同。

在 GitHub 上查看

一旦你添加了 Bootstrap 代码包,你应会注意到我们应用的变化:

与“传统”方式添加外部资源不同,我们还没有链接任何 CSS 或 JavaScript 文件,因为 Meteor 已经帮我们搞定了!这就是 Meteor 代码包的众多优势之一。

关于代码包

Meteor 中的代码包有点特殊,分为五种:

  • Meteor 核心代码本身分成多个核心代码包(core package),每个 Meteor 应用中都包含,你基本上不需要花费精力来维护它们
  • 常规 Meteor 代码包称为“isopack”,或同构代码包(isomorphic package,意味着它们既能在客户端也能在服务器端工作)。第一类代码包例如 accounts-ui 或 appcache 由 Meteor 核心团队维护,与 Meteor 捆绑在一起。
  • 第三方代码包就是其他用户开发的 isopack 上传到 Meteor 的代码包服务器上。你可以访问 Atmosphere 或meteor search 命令来浏览这些代码包。
  • 本地代码包(local package)是自己开发的代码包,保存在 /packages 文件夹中。
  • NPM 代码包(NPM package)是 Node.js 的代码包,虽不能直接用于 Meteor,但可以在上述几种代码包中使用

Meteor 应用的文件结构

开始编写代码之前,我们必须要正确的设置项目。为了保证项目整洁,请打开 microscope 文件夹,删除microscope.htmlmicroscope.js 和 microscope.css

请在 microscope 文件夹中新建四个子文件夹:/client/server/public 和 /lib。然后在 /client 文件夹中新建两个空文件:main.html 和 main.js。如果程序无法运行了先别担心,从下一章开始我们会编写代码。

值得一提的是,上述文件夹中有一些拥有特别的作用。关于文件, Meteor 有以下几条规则:

  • 在 /server 文件夹中的代码只会在服务器端运行。
  • 在 /client 文件夹中的代码只会在客户端运行。
  • 其它代码则将同时运行于服务器端和客户端上。
  • 请将所有的静态文件(字体,图片等)放置在 /public 文件夹中。

知道 Meteor 以什么顺序加载文件也很有用:

  • 在 /lib 文件夹中的文件将被优先载入。
  • 所有以 main.* 命名的文件将在其他文件载入后载入。
  • 其他文件以文件名的字母顺序载入。

需要注意的是,即便 Meteor 包含上述规则,这并不意味着它强制你为你的 Meteor 应用采用任何预设的文件结构。上述结构只是我们的建议,并不是一成不变的。

对此如果你想了解更多,我们强烈建议你参阅 Meteor 官方文档

Meteor 采用 MVC 架构吗?

如果你之前有过在其它诸如 Ruby on Rails 框架下开发的经历,此时你心中可能会有这样的疑问, Meteor 采用 MVC(Model View Controller)架构吗?

简短的回答是,不。与 Rails 不同,Meteor 并不为你的应用强加任何预设的架构。因此本书将直接给出我们认为最合理的代码,而不对任何现有架构作过多考虑。

不需要 public 文件夹?

好吧,我们承认在之前小小的忽悠了大家一下。其实我们并不需要为我们的应用建立一个 public/ 文件夹,因为 Microscope 并不需要使用任何的静态文件。但是值得注意的是,大多数 Meteor 应用都会或多或少使用一些图片,因此我们觉得 public/ 文件夹还是值得一谈的。

另外,你可能注意到了一个隐藏的 .meteor 文件夹。这是 Meteor 存储它内部代码的地方,尝试更改里面的内容并不是什么好主意。事实上,你根本不需要关心其中的内容。有两个例外是 .meteor/packages 文件和 .meteor/release 文件。它们分别列出了你安装的所有智能代码包和你使用的 Meteor 版本。当你为你的应用添加代码包或更改 Meteor 版本时,查看这两个文件的变更可能会为你带来一些帮助。

下划线命名法 vs 驼峰命名法

对于历史悠久的下划线命名法(my_variable)和驼峰命名法(myVariable)我们认为选择哪种并不重要,只要你坚持在项目中贯彻它。

在本书中,我们将采用驼峰命名法,因为它是 JavaScript 中的惯例(毕竟它叫 JavaScript 而不是 java_script 呀!)。

对此唯一的例外是,对文件的命名,我们将采用下划线命名法(my_file.js)。对于 CSS 类,我们将使用连字号(.my-class)。这样做的原因是在文件系统中,下划线命名法最常见,而 CSS 语法本身就使用连字号作为连接(比如font-familytext-align等)。

Meteor 简介的更多相关文章

  1. JS内存泄漏 和Chrome 内存分析工具简介(摘)

    原文地址:http://web.jobbole.com/88463/ JavaScript 中 4 种常见的内存泄露陷阱   原文:Sebastián Peyrott 译文:伯乐在线专栏作者 - AR ...

  2. 最流行的Node.js应用开发框架简介

    最流行的Node.js应用开发框架简介 快速开发而又容易扩展,高性能且鲁棒性强.Node.js的出现让所有网络应用开发者的这些梦想成为现实.但是,有如其他新的开发语言技术一样,从头开始使用Node.j ...

  3. ASP.NET Core 1.1 简介

    ASP.NET Core 1.1 于2016年11月16日发布.这个版本包括许多伟大的新功能以及许多错误修复和一般的增强.这个版本包含了多个新的中间件组件.针对Windows的WebListener服 ...

  4. MVVM模式和在WPF中的实现(一)MVVM模式简介

    MVVM模式解析和在WPF中的实现(一) MVVM模式简介 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在 ...

  5. Cassandra简介

    在前面的一篇文章<图形数据库Neo4J简介>中,我们介绍了一种非常流行的图形数据库Neo4J的使用方法.而在本文中,我们将对另外一种类型的NoSQL数据库——Cassandra进行简单地介 ...

  6. REST简介

    一说到REST,我想大家的第一反应就是“啊,就是那种前后台通信方式.”但是在要求详细讲述它所提出的各个约束,以及如何开始搭建REST服务时,却很少有人能够清晰地说出它到底是什么,需要遵守什么样的准则. ...

  7. Microservice架构模式简介

    在2014年,Sam Newman,Martin Fowler在ThoughtWorks的一位同事,出版了一本新书<Building Microservices>.该书描述了如何按照Mic ...

  8. const,static,extern 简介

    const,static,extern 简介 一.const与宏的区别: const简介:之前常用的字符串常量,一般是抽成宏,但是苹果不推荐我们抽成宏,推荐我们使用const常量. 执行时刻:宏是预编 ...

  9. HTTPS简介

    一.简单总结 1.HTTPS概念总结 HTTPS 就是对HTTP进行了TLS或SSL加密. 应用层的HTTP协议通过传输层的TCP协议来传输,HTTPS 在 HTTP和 TCP中间加了一层TLS/SS ...

随机推荐

  1. skynet的协程

    之前对skynet的印象,主要是来自于我对golang的理解,对gevent开发的经验,以及云风的blog.对于底层的代码,并没有仔细去阅读过.最近在实现业务系统的时候,发现有同事在同一个函数里做了一 ...

  2. dp - 2015 Multi-University Training Contest 2 1004 Delicious Apples

    Delicious Apples Problem's Link: http://acm.hdu.edu.cn/showproblem.php?pid=5303 Mean: 一条长为L的环形路上种着n棵 ...

  3. PHP之分页类

    <?php /** * Created by PhpStorm. * User: Administrator * Date: 2016/6/22 * Time: 21:37 */ Class P ...

  4. Linux磁盘及文件系统管理 4---- Linux文件系统挂载管理

    1 挂载操作 1 磁盘或者分区需要创建好文件系统后,需要挂载到一个目录才能够使用 2 windows或者是Mac会自动的挂载文件系统,一旦创建好文件系统后会自动的挂载 3 对于Linux来说我们必须要 ...

  5. AsyncHandler

    package com.ango.deskclock; import android.content.Context; import android.content.Intent; import an ...

  6. 【吐血整理】SVN命令行,Subversion的正确使用姿势,让版本控制更简单~

    一.写在前面 前面一直博主一直用svn的桌面版本,但看项目经理一直都用的命令行方式,不为性能,还能直接装逼呀!在这里先感谢赵哥,也把它分享给感兴趣的你们~ 二.直接上干货 1. svn checkou ...

  7. python使用上下文管理器实现sqlite3事务机制

    如题,本文记录如何使用python上下文管理器的方式管理sqlite3的句柄创建和释放以及事务机制. 1.python上下文管理(with) python上下文管理(context),解决的是这样一类 ...

  8. TensorFlow深度学习,一篇文章就够了

    http://blog.jobbole.com/105602/ 作者: 陈迪豪,就职小米科技,深度学习工程师,TensorFlow代码提交者. TensorFlow深度学习框架 Google不仅是大数 ...

  9. 点击复制内容到剪切板(clipboard)

    clipboard官方文档:https://clipboardjs.com/ 安装: 1.用npm:npm install clipboard --save 2.下载:https://github.c ...

  10. easyui 获取特定页签tab

    var findTab=$('#mytabs').tabs('getTab','财务信息').panel('options').tab; var findTabIndex = $('#tab').ta ...