Meteor入门
转载Meteor入门介绍
Meteor是什么
基于nodejs的实时web APP开发框架。
Meteor能带来什么
简单的说,你可以用js搞定客户端、服务端的开发。另外,客户端、服务端的界限被极大的模糊。客户端的界面跟服务端的数据是双向绑定的,修改服务端的数据,用户界面会随着更新;你也可以在客户端直接修改服务端的数据库。
系统的归纳下,对于(前端)开发者来说,可能比较吸引人的点。
- 统一开发语言:客户端、服务端都可以用js搞定。
- 提高开发效率:开发者可以用10行左右的代码就开发出一个具有多点实时更新的应用,因为底层框架已经帮你处理好了数据更新、数据同步以及界面更新的工作。
- 数据驱动下的多端同步更新机制:基于DDP协议,服务端数据的修改会引起客户端界面的更新,同时客户端对数据的改动也会同步到服务端。
- 统一插件系统:同样的插件,可以同时运行在客户端、服务端。
- 简易热部署:通过简单的命令,即可快速部署到生产系统。同时对所有当前已链接的应用进行更新。
- 高实时性:通过巧妙的延迟补偿策略,让终端的用户感觉是在访问一个实时无延迟的应用。
- 原生应用:可通过编译工具,将web app编译成原生的终端应用程序
- 数据库访问:客户端、服务端都可以直接访问数据库(安全性隐患)
getting started
demo请点击,参照官方demo进行的仿写,进一步进行了简化。也可直接参考官方demo
meteor的入门demo还是比较好上手的。跟着ste by step的教程走,基本就可以捣鼓出一个像样的TODO LIST的demo了,所以这里也不打算细讲,只是挑一些重点备忘下。
首先,安装meteor,然后通过meteor create
这个命令创建一个新项目。
meteor create meteor-todo-list
创建好的项目结构如下。
大致包含以下内容。有点像传统的web页面,1个HTML页面,再加1个css文件、1个js文件。
.
├── .meteor // 项目依赖的package,在这个小demo里我们可以先忽略
├── meteor-todo-list.css // 页面相关的css
├── meteor-todo-list.html // 页面入口文件
└── meteor-todo-list.js // 页面主逻辑
meteor-todo-list.html
打开html页面,你会发现只有head
、body
、template
三个标签。如果接触过模版引擎的同学会有中熟悉之感。其中:
head
、body
两个标签中的内容,最终会被嵌入到输出给终端用户的HTML页面中。template
则定义了页面需要用到的模版,有点向web component规范看齐的意味。
举例来说,head标签中内容如下
<head>
<title>程序猿小卡的meteor demo</title>
</head
我们访问页面就可以看到title为程序猿小卡
至于body
标签,如果对handlebars
熟悉的同学,大致就知道是干嘛用的了。{{>create}}
引入定义好的模版,该模版的name
为create
。{{#each tasks}}
则是对数据进行遍历,至于数据源,下面会提到。
<body>
{{>create}}
<div class="todo-items">
{{#each tasks}}
{{>task}}
{{/each}}
</div>
</body>
我们再来看看这段模版。name
为create
,就可以在页面里方便的通过create
这个名字来引用这段模版(包括模版嵌套)。而模版数据会在 meteor-todo-list.js 小节提到。
<template name="create">
<div class="">
<input type="text" placehodler="输入todo项" class="js-text" />
<button class="js-add">创建</button>
</div>
</template>
meteor-todo-list.js
打开meteor-todo-list.js
,会看到一行显眼的代码。正如meteor官方介绍所说,meteor应用的代码可以同时跑在客户端、服务端。有些场景下,某些代码只适合跑在客户端,那么,就可以用下面的判断。
if( Meteor.isClient ){
//...
}
meteor-todo-list.html
里其实就一堆模版。相应的,需要为这些模版提供数据。数据大都是存在数据库的,那么就需要有数据库操作。
除了数据之外,还要处理用户交互,那么就涉及到事件绑定。
1、数据 & 数据库操作
数据在meteor应用了扮演了极为重要的角色,作为实时双向更新的引用,meteor服务端数据的修改,会导致客户端界面的更新。同时,客户端用户操作导致的数据更新,也会实时同步到服务端。
比如这段代码,意思就是,模版body
用到的tasks
数据,就是这个同名方法的返回值。
Template.body.helpers({
tasks: function(){
return Tasks.find({});
}
});
比如页面有这么一段无聊的模版,那么就可以通过Template.nonsense.helpers
来注册nonsense
这段模版需要用到的数据。我们的页面里其实没有name
为body
的模版,这是因为内部做了特殊处理,body
、head
标签默认当模板对待了。
<template name="nonsense">
<p>hello {{nick}}</p>
</template>
下面来讲数据库操作,这里用到了人民大众热爱已久的mongodb
。
首先,我们我们创建collections
,对应的是一系列的文档集合,下面我们做的就是对这个文档集合进行操作,比如增、删、改、查,这四大操作demo里都覆盖到了。
var Tasks = new Mongo.Collection("tasks");
举个例子,返回所有的task
数据,类似mysql里的select *
。
return Tasks.find({});
插入一条task
。
Tasks.insert({text: value, createdAt: new Date()});
其余操作类似,这里不赘述,更多细节参考官方文档。
2、事件绑定
相当直观。以下面代码为例。更多细节参考官方文档
Template.create.events
表示为create
这个模版渲染出来的节点绑定事件。click .js-add
表示:为.js-add
这个选择器匹配中的节点监听click
事件。event
就是常规的事件对象。而template
相当于模版自身的引用,可以通过template.$(selector)
来选中模版内部的子节点。(类似backbone内部节点操作的设计)
Template.create.events({
'click .js-add': function(event, template){
var ('.js-text'),
value = $input.val();
Tasks.insert({text: value, createdAt: new Date()});
$input.val('');
}
});
meteor-todo-list.css
没什么好讲的,跳过。。。
DDP协议
DDP是 分布式数据协议 (Distributed Data Protocol)的简称,meteor双向实时更新机制的底层依赖的就是这东东。官方协议
粗略瞄了下协议,大致有两个特点:
- 平台无关的通用协议:DDP只是定义了协议的格式和一些规范,但具体用什么语言在什么平台上实现无所谓,你可以用js写,也可以用java写。
- json格式:从协议说明,以及实际抓包来看,服务端、客户端数据通信采用的都是json格式的数据,前端极为友好~
实际看看例子。在chrome控制台下,切到WebSocket
这个tab,就会看到不断的有收发包。部分是用户操作发出(如删除操作),部分是用于保持通信状态的心跳包。(可以这样翻译吧。。)
协议比较长,内容本身倒是不复杂,有兴趣的自行围观。。。
编译原生应用
同样没什么好讲的,直接贴上官方文档地址 https://www.meteor.com/try/7 ,有空再贴几章截图。。
新浪微博:http://weibo.com/chyingp
站酷主页:http://www.zcool.com.cn/u/346408/
Meteor入门的更多相关文章
- Meteor入门介绍
Meteor是什么 基于nodejs的实时web APP开发框架. Meteor能带来什么 简单的说,你可以用js搞定客户端.服务端的开发.另外,客户端.服务端的界限被极大的模糊.客户端的界面跟服务端 ...
- 怎么评价Facebook的Relay框架?Meteor.js 是什么?
http://www.zhihu.com/question/34531232?rf=34500201 Meteor.js 是什么? 作者:陈天链接:http://www.zhihu.com/quest ...
- 以太坊智能合约开发,Web3.js API 中文文档 ethereum web3.js入门说明
以太坊智能合约开发,Web3.js API 中文文档 ethereum web3.js入门说明 为了让你的Ðapp运行上以太坊,一种选择是使用web3.js library提供的web3.对象.底层实 ...
- node.js之web开发 koa入门
用Node.js开发Web服务器端,有几个显著的优势: 速度快,非常快!这得益于Node.js天生是异步的. 常见的Web框架包括:Express,Sails.js,koa,Meteor,DerbyJ ...
- Jenkins入门【转】
一.Jenkins概述 二.安装Jenkins https://pkg.jenkins.io/redhat-stable/ sudo wget -O /etc/yum.repos.d/jenkins. ...
- Nexus入门【转】
介绍 DevOps平台采用的介质服务器类型为NEXUS,NEXUS是一个强大的maven仓库管理器,它极大的简化了本地内部仓库的维护和外部仓库的访问. 一.配置Maven [root@meteor ~ ...
- Web开发初探之JavaScript 快速入门
本文改编和学习自 A JavaScript Primer For Meteor 和 MDN Web教程 前文 Web开发初探 概述 本文以介绍 JavaScript 为主,初学者掌握本文的内容后,将能 ...
- Spring基础入门
一.Spring了解 Spring:程序员们的春天 Spring主要技术是IOC.AOP两个大概念 它是轻量级的,每个jar包就1M ~ 3M 左右,所以速度快 面向接口编程:降低了耦合度 面向切面编 ...
- Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求
上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...
随机推荐
- 【新秀疯狂UML系列】——面向对象的技术
从软质工作开始,我们来到与面向对象的接触,接下来的学习材料似乎已经提到了面向对象,在与她的朋友去一个.所以,我们必须知道她多一点点. 一.何为面向对象? 面向对象(Object Oriented).是 ...
- 怎样用C#代码管理SharePoint解决方式
怎样用C#代码管理SharePoint解决方式 本文我们将了解怎样用代码管理SharePoint解决方式.我们使用server端对象模型抽取解决方式. SharePoi ...
- TextView于getCompoundDrawables()使用演示样本的方法
MainActivity例如下列: package cc.testcompounddrawables; import android.app.Activity; import android.grap ...
- 第七章——DMVs和DMFs(3)——用DMV和DMF监控TempDB
原文:第七章--DMVs和DMFs(3)--用DMV和DMF监控TempDB 前言: 我们都知道TempDB是SQLServer的系统数据库,且SQLServer的日常运作严重依赖这个库.因此,监控T ...
- SQLServer RESOURCE_SEMAPHORE 等待状态
原文:SQLServer RESOURCE_SEMAPHORE 等待状态 概述: 当一个SQLServer实例运行得很慢的时候,应该做一些检查,如检查等待状态.最好的方法是一开始就建立一个性能基线,以 ...
- WPF学习(11)2D绘图
本篇我们来学习WPF的绘图,在2D绘图中主要有这么几个重要的类:Drawing.Visual和Shape,顺便讲下Brush和BitmapEffect. 1 2D绘图 1.1Drawing类 Draw ...
- web自定义炫酷字体
电脑有已经安装好的字体,但是如果你有特殊需要而要选择其他字体,则需要以下几个步骤 1.寻找适合你的字体 有下面几个站点提供字体下载: www.theleagueofmoveabletype.com w ...
- LeetCode :: Insertion Sort List [具体分析]
Sort a linked list using insertion sort. 仍然是一个很简洁的题目,让我们用插入排序给链表排序:这里说到插入排序.能够来回想一下, 最主要的入门排序算法.就是插入 ...
- Entity Framework笔记(一)
最近在看MVC方面的资料,看了几个教程都在使用Entity Framework做数据持久化.之前也听说过这个东西,在微软的网站上看过一个演示视频,但都没怎么去仔细研究.MVC的东西太庞大了,先慢慢熟悉 ...
- uva10067 Playing with Wheels 【建图+最短路】
题目:option=com_onlinejudge&Itemid=8&page=show_problem&problem=1008">uva10067 Play ...