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

创建好的项目结构如下。

Alt text

大致包含以下内容。有点像传统的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页面,你会发现只有headbodytemplate三个标签。如果接触过模版引擎的同学会有中熟悉之感。其中:

  • headbody两个标签中的内容,最终会被嵌入到输出给终端用户的HTML页面中。
  • template则定义了页面需要用到的模版,有点向web component规范看齐的意味。

举例来说,head标签中内容如下

<head>
    <title>程序猿小卡的meteor demo</title> </head

我们访问页面就可以看到title为程序猿小卡

Alt text

至于body标签,如果对handlebars熟悉的同学,大致就知道是干嘛用的了。{{>create}}引入定义好的模版,该模版的namecreate{{#each tasks}}则是对数据进行遍历,至于数据源,下面会提到。

<body>
    {{>create}} <div class="todo-items"> {{#each tasks}} {{>task}} {{/each}} </div> </body>

我们再来看看这段模版。namecreate,就可以在页面里方便的通过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这段模版需要用到的数据。我们的页面里其实没有namebody的模版,这是因为内部做了特殊处理,bodyhead标签默认当模板对待了。

<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、事件绑定

相当直观。以下面代码为例。更多细节参考官方文档

  1. Template.create.events表示为 create 这个模版渲染出来的节点绑定事件。
  2. click .js-add表示:为.js-add这个选择器匹配中的节点监听click事件。
  3. 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双向实时更新机制的底层依赖的就是这东东。官方协议

粗略瞄了下协议,大致有两个特点:

  1. 平台无关的通用协议:DDP只是定义了协议的格式和一些规范,但具体用什么语言在什么平台上实现无所谓,你可以用js写,也可以用java写。
  2. json格式:从协议说明,以及实际抓包来看,服务端、客户端数据通信采用的都是json格式的数据,前端极为友好~

实际看看例子。在chrome控制台下,切到WebSocket这个tab,就会看到不断的有收发包。部分是用户操作发出(如删除操作),部分是用于保持通信状态的心跳包。(可以这样翻译吧。。)

Alt text

协议比较长,内容本身倒是不复杂,有兴趣的自行围观。。。

package

meteor有自己的包管理机制,也有个专门的社区在维护 https://atmospherejs.com/ 。关于这个,有空再单独拎出来讲讲。

Alt text

编译原生应用

同样没什么好讲的,直接贴上官方文档地址 https://www.meteor.com/try/7 ,有空再贴几章截图。。

相关文章
|
9月前
|
前端开发 JavaScript 算法
第一章 react简介
第一章 react简介
|
并行计算 程序员 C++
软件开发入门教程网 Search之C++ 简介
软件开发入门教程网 Search之C++ 简介
|
6月前
|
中间件 API 开发者
Bottle框架探秘:如何用几行代码搅动Web开发江湖?
【8月更文挑战第31天】Bottle是一个仅依赖Python标准库的轻量级Web开发微框架,无需额外依赖,简化部署与维护。它以简洁高效著称,适合快速构建Web应用。通过简单的示例即可上手,如用几行代码实现“Hello World”应用。除基础功能外,Bottle还支持模板渲染、会话管理和表单处理等,适用于学习及小型项目,也能在高性能要求的应用中展现价值。无论是新手还是有经验的开发者,Bottle都是高效Web开发的理想选择。
70 1
|
8月前
|
监控 Linux Python
python自研流星监控系统meteor_monitor(第二篇)
该文介绍了替代流星监控软件UFOcaptureHD2的新方案,强调了原软件的性能消耗大和收费问题。文中提供了一个GitHub链接以获取最新代码。推荐使用配备Windows 10/11、2.4GHz四核CPU的主机,搭配索尼MX291摄像头进行监控。程序基于ffmpeg,支持不同编码器,如mjpeg、h264_qsv等,具体编码器选择取决于硬件环境。安装涉及创建虚拟环境、安装Python 3.10+及依赖项,并提供了Windows和Linux的详细步骤。此外,程序通过帧差法进行运动检测,然后过滤掉非流星目标,最后使用ffmpeg对原始视频切片并存储。
python自研流星监控系统meteor_monitor(第二篇)
|
8月前
|
存储 监控 Java
python自研流星监控系统meteor_monitor(第一篇)
本文介绍了作者开发的一个Python流星监控系统,替代了性能不佳且收费的ufocapturehd2软件。系统采用Win10相机应用低耗录制视频,通过SikuliX进行自动化控制,分段录制并存储到本地,然后通过脚本同步到NAS。视频分析使用帧差法检测流星,支持分布式分析。代码已更新,旧文章不再适用,最新内容可见:[用python自行开发的流星监控系统meteor_monitor(第二篇)-CSDN博客](https://github.com/xingxinghuo1000/meteor_monitor_scripts.git)。
|
资源调度 前端开发 JavaScript
从零开始学习React-开发环境的搭建(一)
从零开始学习React-开发环境的搭建(一)
90 0
|
前端开发
前端学习笔记202304学习笔记第九天-lerna简介和重点1
前端学习笔记202304学习笔记第九天-lerna简介和重点1
78 0
|
前端开发
前端学习笔记202304学习笔记第九天-lerna简介和重点2
前端学习笔记202304学习笔记第九天-lerna简介和重点2
88 0
|
NoSQL JavaScript 中间件
知新 | koa框架入门到熟练第二章
这里对koa-bodyparser的使用教程。
578 0
|
开发框架 前端开发 JavaScript
知新 | koa框架入门到熟练第一章
koa,是基于Node.js 平台的下一代的web开发框架。 是由Express原班人马打造,致力于成为一个更小的,更加富有表现力的,web框架。 使用koa编写web应用,可以免除重复的回调函数嵌套,并极大的提高错误处理的效率, koa框架不仅仅在内核方法中可以绑定任何中间件,它仅仅提供了一个轻量级,优雅的函数库,思路和express相差不少。
580 0

热门文章

最新文章