Real-time web App development framework based on NODEJS.
What meteor can bringSimply put, you can use JS to solve the client, server development. In addition, the boundaries of the client and server are greatly blurred. The interface of the client and the data of the server are two-way bound, modify the data on the server side, the user interface will be updated; You can also modify the server database directly on the client side.
System, for the (front-end) developers, may be more attractive points.
Click on the demo and follow the official demo for further simplification. You can also refer directly to the official demo
Meteor's introductory demo is better to get started. With Ste by Step Tutorial Walk, basically can make a decent todo list of the demo, so here also do not intend to talk about, just pick some key to forget.
First, install meteor, and then meteor create create a new project with this command.
meteor create meteor-todo-list
Create a good project structure as follows.
The following is roughly included. A bit like a traditional Web page, 1 HTML pages, plus 1 CSS files, 1 JS files.
Meteor-todo-list.html.meteor // 项目依赖的package，在这个小demo里我们可以先忽略├── meteor-todo-list.css // 页面相关的css├── meteor-todo-list.html // 页面入口文件└── meteor-todo-list.js // 页面主逻辑
Open the HTML page and you'll find head only body , template three tags. If you have contact with the template engine of the students will have a sense of familiarity. which
head, body two tags, will eventually be embedded in the output to the end user's HTML page.templateIt defines the template that the page needs to use, a little bit to the Web Component specification.For example, the contents of the head tag are as follows
<head> <title>程序猿小卡的meteor demo</title> </head
We visit the page to see the title of the program ape Small card
As for the body tag, if you are familiar with handlebars , you will generally know what to do with it. {{>create}} introduces a well-defined template with name Create . {{#each tasks}} is a traversal of the data, as the data source is mentioned below.
<body> Span class= "hljs-expression" >{{>create}} <div class= "Todo-items" > {{#each tasks}} {{> task}} {{/each }} </div></< Span class= "Hljs-title" >BODY> Let's take a look at this template again. namefor create , it can be conveniently in the page by create this name to refer to the template (including template nesting). The template data is mentioned in section meteor-todo-list.js .
Meteor-todo-list.js<template name="create"> <div class=""> <input type="text" placehodler="输入todo项" class="js-text" /> <button class="js-add">创建</button> </div></template>
Open meteor-todo-list.js , you'll see a line of conspicuous code. As Meteor's official introduction says, the code for the Meteor application can run at the client and server side at the same time. In some scenarios, some code is only suitable for running on the client, so you can use the following judgment.
if( Meteor.isClient ){ //...}
meteor-todo-list.htmlIn fact, a bunch of templates. Accordingly, data will need to be provided for those templates. Data is mostly in the database, then you need to have database operations .
In addition to data, handling user interactions involves event binding .
1. Data & Database OperationsData has played an extremely important role in Meteor, and as a reference for real-time bidirectional updates, the modification of Meteor server data will lead to the updating of the client interface. At the same time, data updates caused by client user actions are synchronized to the service side in real time.
This code, for example, means that the body data used in the template tasks is the return value of the method with the same name.
Template.body.helpers({ tasks: function(){ return Tasks.find({}); } });
For example, the page has such a boring template, then you can Template.nonsense.helpers register nonsense the template needs to use the data. Our page actually does not have name body the template, this is because the inside has done the special processing, body , the head label defaults when the formwork treats.
<template name="nonsense"> <p>hello {{nick}}</p></template>
The following is a database operation, where the masses have loved for a long time mongodb .
First of all, we create collections , corresponding to a series of document collection, the following we do is to work on this document collection, such as Add, delete, change, check, the four operation of the demo is covered.
var Tasks = new Mongo.Collection("tasks");
For example, return all the task data, like in MySQL select * .
return Tasks.find({});
Insert a bar task .
Tasks.insert({text: value, createdAt: new Date()});
The rest of the operation is similar, not detailed here, more details refer to official documents.
2. Event BindingQuite intuitive. Take the following code for example. For more details, refer to the official documentation
Template.create.eventsRepresents a create node-bound event rendered for this template.click .js-addIndicates: The .js-add node in this selector match listens for click events.eventIs the regular event object. Instead template , a reference to the template itself can be used template.$(selector) to select a child node within the template. (Design similar to backbone internal node operation)Meteor-todo-list.cssTemplate.create.events({ ‘click .js-add‘: function(event, template){ var (‘.js-text‘), value = $input.val(); Tasks.insert({text: value, createdAt: new Date()}); $input.val(‘‘); } });
Nothing to say, skip ...
DDP protocolDDP is the short name of the Distributed Data Protocol (distributed), which is the underlying dependency of the meteor bidirectional real-time update mechanism. Official agreement
A cursory glance at the agreement, with roughly two features:
Actually look at the example. In the chrome console, cut to WebSocket this tab and you'll see a constant packet of transceivers. This is partly a user action, such as a delete operation, that is part of a heartbeat packet that is used to keep the communication state. (You can translate it like this.) ）
The agreement is relatively long, the content itself is not complex, interested in the self-onlookers ...
PackageMeteor has its own package management mechanism, and there is a dedicated community in the maintenance of https://atmospherejs.com/. About this, when you are free to talk about it alone.
Compiling native appsAlso there is no good to say, directly affixed to the official document address HTTPS://WWW.METEOR.COM/TRY/7, free to post a few chapters.
AppendixTODO demo:https://github.com/chyingp/meteor-todo-list
Official website: https://www.meteor.com/
Getting Started Tutorial: Https://www.meteor.com/install
DDP protocol: HTTPS://GITHUB.COM/METEOR/METEOR/BLOB/DEVEL/PACKAGES/DDP/DDP.MD
Meteor Introductory Introduction
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
