Hướng dẫn cho người mới bắt đầu về sao băng

Meteor là một nền tảng ứng dụng web. Đó là một công cụ cho cả người mới bắt đầu và chuyên gia, nó giúp bạn bắt đầu cực kỳ dễ dàng và cung cấp một hệ sinh thái thư viện khổng lồ mà bạn có thể tận dụng

Meteor là một nền tảng ứng dụng web.

Các ứng dụng web hiện đại có thểcực kỳ phức tạpviết. Đặc biệt là đối với những người mới bắt đầu.

Meteor là một công cụ cho cả người mới bắt đầu và chuyên gia, nó làm cho nódễ bắt đầuvà cung cấp một hệ sinh thái thư viện khổng lồ mà bạn có thể tận dụng.

JavaScript

Meteor là một trong những cách tiếp cận phổ biến đầu tiên chỉ sử dụng JavaScript cả trên máy khách và máy chủ một cách liền mạch.

Đã cặp đôi vớiMongoDB, là Cơ sở dữ liệu lưu trữJSONvà sử dụng Javascript làm ngôn ngữ truy vấn, nó làm cho JavaScript trở nên phổ biến.

Meteor cũng giao hàng vớiMinimongotrong giao diện người dùng, là cơ sở dữ liệu giao diện người dùng tương thích với các API MongoDB, hoàn toàn được viết bằng JavaScript.

Thời gian thực

Meteor được biết đến với các tính năng thời gian thực, nhưng chính xác thì thời gian thực là gì? Giả sử bạn muốn tạo một ứng dụng trò chuyện. Meteor cung cấp cho bạn các tính năng hoàn hảo cho điều đó.

Bạn muốn tạo một ứng dụng giao tiếp nội bộ? Hoàn hảo quá. Một ứng dụng quản lý dự án? Về cơ bản, bất kỳ ứng dụng nào mà người dùng có thể được thông báo hoặc mọi thứ sẽ được cập nhật dựa trên hành động của người dùng khác hoặc những thứ phần thứ ba như API thay đổi thông tin hiển thị, người dùng xem ứng dụng có thể được thông báo về những thay đổi đó ngay lập tức, một cách khá dễ dàng cách so với các giải pháp khác.

Cảm thấy nhanh

Một thứ có tênBù đắp cho độ trễcung cấp cho bạn một thủ thuật cho phép giao diện hoạt động nhanh chóng ngay cả khi nó vẫn cần giao tiếp với máy chủ từ xa. Và trên hết, nó miễn phí cho bạn về mặt triển khai, nghĩa là nó được hỗ trợ trong Meteor và bạn không phải làm bất cứ điều gì để kích hoạt nó.

Mã nguồn mở

Tất nhiên Meteor hoàn toàn là mã nguồn mở.

Nó đơn giản

Mọi thứ dường như rất đơn giản trong Meteor, bởi vì chúngChúng tôiđơn giản.

Những thứ phức tạp dẫn đến những lỗi kỳ lạ hoặc những vấn đề khó khăn sau này. Meteor cung cấp cho chúng ta mộtAPI sạch đẹpvà chức năng để xây dựng.

Một hệ thống gói tuyệt vời

Điều thú vị về Meteor là vì nó có thể cung cấp năng lượng cho cả giao diện người dùng và phụ trợ, và nó được tích hợp sâu với cơ sở dữ liệu,cả mã frontend và backend đều có thể được đặt trong một gói duy nhấtvà làm việc liên tục cho chúng tôi ở cả hai bên. Đó là lý do tại sao chúng tôi có thể thêm quản lý người dùng đầy đủ với một dòng mã duy nhất.

Cách Meteor có thể cải thiện cuộc sống của bạn

Meteor cho bạn mộtNền tảng Full-Stack, bằng cách cung cấpcả khung phía máy khách và khung phía máy chủ. Hơn nữa, Meteor thậm chí còn cung cấp cho bạn kênh giao tiếp giữa chúng. Nó được gọi làDDP, và chúng ta sẽ nói về nó sau.

Bạn không còn cần phải gắn các khuôn khổ, ngôn ngữ, công cụ và cơ sở mã khác nhau lại với nhau. Điều này là rất lớn đối với các nhà phát triển độc lập, các công ty khởi nghiệp nhỏ hoặc thậm chí là các tổ chức lớn hơn, những người không muốn mất thời gian và nguồn lực để làm mọi thứ khó khăn hơn họ nên làm.

Khi sao băng có thể không phù hợp nhất với bạn

Trang web nội dung tĩnhcó các nền tảng khác tốt hơn để xây dựng. Nếu bạn chỉ cần xuất một số HTML mà không cần nhiều tương tác, hãy sử dụng trình tạo trang web tĩnh.

Meteor khi viết không hỗ trợCơ sở dữ liệu SQL, có thể là một điều tốt trong nhiều trường hợp, nhưng chúng có thể cần thiết trong các trường hợp khác. Tất nhiên bạn có thể viết các thủ tục của riêng mình sử dụng Dữ liệu SQL.

7 nguyên tắc về sao băng

Meteor được xây dựng dựa trên bảy nguyên tắc sau. Chúng được liệt kê trong tài liệu dự án và chúng là những nguyên tắc cơ bản nên chúng tôi sẽ báo cáo chúng ở đây.

Các nguyên tắc luôn quan trọng khi chúng được tôn trọng trong cuộc sống hàng ngày.

Dữ liệu trên dây

Meteor không gửi HTML qua mạng. Máy chủ gửi dữ liệu và cho phép máy khách kết xuất dữ liệu đó.

Một ngôn ngữ

Meteor cho phép bạn ghi cả phần máy khách và phần máy chủ của ứng dụng của bạn vàoJavaScript.

Cơ sở dữ liệu mọi nơi

Bạn có thể sử dụng các phương pháp tương tự để truy cập cơ sở dữ liệu của mình từ máy khách hoặc máy chủ.

Bù đắp cho độ trễ

Trên máy khách, Meteor tìm nạp trước dữ liệu và mô phỏng các mô hình để làm cho nó trông giống như các lệnh gọi phương thức máy chủ trả về ngay lập tức.

Khả năng phản ứng toàn ngăn xếp

Trong Meteor, thời gian thực là mặc định. Tất cả các lớp, từ cơ sở dữ liệu đến mẫu, tự động cập nhật khi cần thiết.

Ôm lấy hệ sinh thái

Meteor là mã nguồn mở và tích hợp với các công cụ và khuôn khổ mã nguồn mở hiện có.

Đơn giản Bình đẳng Năng suất

Cách tốt nhất để làm cho một cái gì đó có vẻ đơn giản là làm cho nó thực sự đơn giản. Chức năng chính của Meteor có các API sạch sẽ, đẹp mắt.

Thủ tục cài đặt

Trên OSX và Linux, việc cài đặt Meteor chỉ đơn giản bằng cách nhập mã này vào thiết bị đầu cuối Hệ điều hành:

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

Install Meteor

Đó là nó!

Windows có trình cài đặt chính thức của riêng nó, vì vậy hãy kiểm tra nó trên trang web chính thức.

Các bước đầu tiên với Meteor

Hãy tạo ứng dụng Meteor đầu tiên.

Mở thiết bị đầu cuối Hệ điều hành, đi vào thư mục nơi bạn sẽ lưu trữ dự án và nhập

meteor create hello-world

Create a Meteor app

Meteor sẽ tạo ứng dụng mới cho bạn, tronghello-worlddanh mục.

Bây giờ hãy vào bên trong thư mục đó và gõ

meteor

Thao tác này sẽ khởi động máy chủ web Meteor và bạn sẽ có thể truy cập ứng dụng Meteor đầu tiên của mình bằng cách trỏ trình duyệt của bạn vàohttp://localhost:3000

Hello Meteor

Nó đã được dễ dàng, phải không?

Xem qua mã

Hãy xem qua mã ứng dụng để xem cách hoạt động.

Đừng lo lắng nếu mọi thứ vẫn chưa rõ ràng ngay bây giờ, nhiều khái niệm sẽ được giới thiệu và giải thích ở phần sau.

Một vài năm trước, ứng dụng mẫu Meteor này sẽ chỉ chứa một tệp JavaScript, cho cả máy khách và máy chủ, sử dụngMeteor.isClientMeteor.isServerđể kiểm tra xem ứng dụng đang chạy trên máy khách hay trên máy chủ.

Ứng dụng mẫu đã loại bỏ cách tiếp cận này và làm thế nào đểserver/main.jstệp và các tệp khác trongclient/.

client / main.html

Nếu bạn mởclient/main.htmltệp bạn có thể thấy mã nguồn của ứng dụng:

<head>
  <title>hello-world</title>
</head>

<body> <h1>Welcome to Meteor!</h1>

{{> hello}} {{> info}} </body>

<template name=“hello”> <button>Click Me</button> <p>You’ve pressed the button {{counter}} times.</p> </template>

<template name=“info”> <h2>Learn Meteor!</h2> <ul> … </ul> </template>

Meteor nhận raheadbodyvà đặt chúng vào đúng vị trí trong nội dung trang. Điều này có nghĩa là bằng cách bao gồm mộthead, tất cả nội dung của nó sẽ được thêm vào trang "thực"headnhãn.

Điều tương tự cũng áp dụng chobodynhãn. Chúng là hai thẻ chính.

Tất cả phần còn lại của ứng dụng phải được đặt riêng biệttemplatecác thẻ.

Cái đặc biệt{{ }}dấu ngoặc bạn thấy được xác định bởiPhím cách, là một ngôn ngữ tạo mẫu rất giống vớiGhi đôngvới một số tính năng độc đáo làm cho nó trở nên hoàn hảo khi làm việc với Meteor

Trong ví dụ hello-world,

{{> hello}}

bao gồmhellomẫu, và

{{counter}}

bên tronghellomẫu tìm kiếm giá trị bộ đếm trong ngữ cảnh mẫu.

client / main.js

Đây là nội dung củaclient/main.jstập tin:

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

import ‘./main.html’;

Template.hello.onCreated(function helloOnCreated() { // counter starts at 0 this.counter = new ReactiveVar(0); });

Template.hello.helpers({ counter() { return Template.instance().counter.get(); }, });

Template.hello.events({ ‘click button’(event, instance) { // increment the counter when button is clicked instance.counter.set(instance.counter.get() + 1); }, });

Mã thiết lập ReactiveVar,biến phản ứng. Một biến phản ứng hiển thị một bộ định giá và bộ thu hồi. Bằng cách sử dụng setter, tất cả các hàm đang truy xuất giá trị bằng get () sẽ được cảnh báo khi giá trị của nó thay đổi.

Giá trị của biến phản ứng được hiển thị trong HTML bằng cách sử dụng{{counter}}đoạn mã này gọi làcounter()trình trợ giúp mẫu mà chúng tôi đã xác định ở đây.

Đầu tiên, nó khởi tạo biến đó thành 0 và nó đặt giá trị của nó được tăng lên khi nút được nhấp tronghellobản mẫu.

Để xử lý các nhấp chuột, bạn hành động dựa trên các sự kiện củahellobản mẫu. Trong trường hợp này, chúng tôi chặn nhấp chuột vàobuttonPhần tử HTML. Khi điều này xảy ra, bạn tăng giá trị Session.counter.

Trong mã máy chủ Meteor, trongserver/main.js, có mộtMeteor.startupgọi, chỉ gọi hàm đã truyền khi Meteor đã sẵn sàng. Bây giờ không có gì trong đó, nhưng chúng ta sẽ xem điều này có thể hữu ích như thế nào sau này.

CLI sao băng

Khi cài đặt Meteor, bạn nhận được CLI (tiện ích dòng lệnh) được gọi làmeteor.

Đó là một công cụ siêu hữu ích, bạn đã sử dụng nó để tạo ứng dụng đầu tiên và để bắt đầu, chúng ta chỉ cần biết một phần nhỏ những gì nó có thể làm.

Hãy giới thiệu bốn lệnh hữu ích nhất mà bạn sẽ sử dụng khi bắt đầu với Meteor.

sao băng

Nếu bên trong một thư mục trống, bạn nhập

meteor

you’ll get an error because Meteor was not initialized in that directory.

If you instead type meteor in a folder that has a Meteor project already created (see meteor create here below), Meteor will start up and create the server, initialize the database and you’ll be able to open the Meteor website.

meteor create

If inside a directory you type

meteor create my_app_name

Meteor will initialize a new Meteor project in a subfolder named my_app_name.

meteor add

Inside your Meteor project already initialized, calling

meteor add package_name

will lookup the package_name package and will install it in the current project.

You can run this command in a separate terminal window while the Meteor app is running, and you’ll get the package functionality without the need to restart the Meteor server.

meteor remove

Inside your Meteor project already initialized, calling

meteor remove package_name

will remove the package with that name from your project.

Isomorphic

The term isomorphic identifies a framework where client-side code and server-side code are written in the same language. This implies that any piece of code could run both on the server and on the client, unless it’s tied to a context-specific action.

In the past 10 years Web Applications have been built by clearly separating the server and the client code. Server code run PHP, Ruby, Python code. That code could never work on the frontend-side, because the browser does not support those languages.

Browsers are only capable of executing code written in JavaScript.

With the meteoric rise of Node.js in the last few years, and what was built on top, now we have the chance to build an entire application in the same language: JavaScript.

Meteor takes the isomorphic concept even further, by transparently running every file in your project, unless you don’t want it to do it, on both sides of the platform, doing different things based on the context, clearly explained by the Meteor documentation.

This is an amazing opportunity and advantage that Meteor enables by building a “super-platform” on top of Node.js and the Browser platforms, enabling you to build applications faster and better than ever.

Isomorphic refers to JavaScript code that runs with little to no modifications on the client and on the server. It’s code that takes care of both what runs inside the browser, and the what runs on the server.

Meteor is an isomorphic framework. This is great because we can write concise applications that now even share some pieces of code between client and server code.

It enables you to become a full-stack developer, because you no longer need to deeply know two separate stacks to work on both sides of the application.

The classical example is the one of an HTTP request. On the browser you’d do an AJAX call. On the server you’d use your stack-specific code.

Using Meteor, you can use the same function HTTP.get() provided by the http package, on both sides, just like when you install the Axios library.

Meteor.isServer, Meteor.isClient

Meteor exposes two boolean variables to determine where the code is running:

  • Meteor.isServer
  • Meteor.isClient


Put them inside an if statement to run some code part just on one side of the platform.

For example:

if (Meteor.isClient) {
  alert('Hello dear user!')
} else if (Meteor.isServer) {
  //running server-side
}

Special directories

Putting lots of Meteor.isServer and Meteor.isClient checks in the application is not ideal of course.

First, the code can quickly grow complicated and not nice to read. Second, even the server code is sent to the client. This is bad because you’d better keep server-side code private, and also because you send unnecessary code which slows down loading times.

That’s why Meteor has two special folders that automatically take care of the distinction for us: client and server

Whatever you put in the client directory is not loaded on the server side.

Whatever you put in the server directory is not sent to the client.

Another advantage of keeping this distinction is that assets put in the client folders are never taken into consideration during the build phases.

Session variables and template helpers

Here’s a simple example on combining Session variables and template helpers to achieve a simple case of selecting the current comment selected in a list.

In our template.html file:

<template name="main">
  {{#each comments}}
    {{> comment}}
  {{/each}}
</template>

<template name=“comment”> <div class="{{#if selected}}selected{{/if}}"> <p>{{this.comment}}</p> </div> </template>

In template.js:

Session.set('selectedComment', null)

Template.main.helpers({ comments: function() { return Comments.find() } })

Template.comment.helpers({ selected: function() { return Session.equals(‘selectedComment’, this._id) } })

Template.comment.events({ ‘click div’ : function(e, t) { Session.set(‘selectedComment’, this._id) } })

In this case any time I click a comment, that comment becomes the selected comment, and we can show it full-size, fetch the other comments made by the user or do some other fancy stuff.

Reactive programming

First, a clarification: Meteor’s reactivity has nothing to do with React, the other very popular JavaScript framework.

What is reactive programming, you say? Reactive programming is a programming paradigm.

Reactive programming is nothing new, nor something that Meteor introduced. But, what Meteor did was making reactive programming easy to use.

Actually, you’re most probably already using reactive programming without even knowing about it.

What is reactive programming

Reactive programming allows you to write code that automatically refreshes and re-calculates functions and values when something that you depend on changed.

For example, data in the database changed? You need to re-display it in the client.

That variable that counts the number of comments changed because you added a comment? Everything that depends on it, or shows it, must react to that change and re-compute the values.

That works by having Reactive Sources. The database for example is a reactive source. When something changes inside it, it notifies the JavaScript variables that depend on those changes. Those variables are invalidated and must be recalculated according to the new data available.

Reactive sources

Meteor has a list of things that are reactive, and those drive the entire application. Not everything is reactive, just those things listed here:

  • Reactive variables, defined using new ReactiveVar()

  • The data coming from the database is a reactive data source, because by subscribing to a publication you get a cursor, and that cursor is reactive. Any change to the collection represented by the cursor will trigger a recomputation of anything that uses it.

  • Talking about subscriptions, when a subscription is available on the client its .ready() method is called. That is a reactive data source.

  • Session variables are a reactive data source. When one changes a session variable by using .set(), everything that depends on those will be recalculate or re-rendered.

  • The user methods Meteor.user() and Meteor.userId() are a reactive data source.

  • Meteor.status(), which is a client-side method that returns the current client-server connection status, is a reactive data source.

  • Meteor.loggingIn(), which returns true if the user is currently doing a login, is a reactive data source.

Reactive computations

Whatever changes upon a reactive source change is a reactive computation. It’s some piece of code, a function, that needs to run again when a reactive source it depends on changes.

An example of reactive computation is the template helpers: every time a reactive data source that involves a template helper changes, the template re-renders it.

Defining your own reactive computations

You can define your own reactive computations, and react when something changes upstream, by using Tracker.autorun().

This function:

Tracker.autorun(function () {
  var currentPage = Session.get('currentPage')
  alert("The current page is " + currentPage)
})

Will trigger an alert whenever you call Session.set('currentPage', 'whatever') without you needing to add callbacks or other observers.

Meteor Publications

One of the key features of Meteor is provided by the data layer.

Since Meteor manages both the server and the client, I can explain the concept in this way:

  • The server creates a publication
  • The client subscribes to that publication
  • Meteor keeps everything in sync

The server can precisely determine what each client will see. Each publication can be tailored upon parameters and user permissions.

Let’s do a simple Pub/Sub introduction on standard MongoDB collections.

Server publication

Here’s an example of a server code creating a publication for comments that have been approved:

//server-side code
Meteor.publish('comments', () => {
  return Comments.find({ approved: true })
})

Or we want to create a publication for comments made on a specific article:

Meteor.publish('comments', (articleId) => {
  return Comments.find({ articleId: articleId })
})

The publish function is called every time a client subscribes.

Client subscription

On the client the code is very easy. For example, let’s subscribe to all comments:

Meteor.subscribe('comments')

Let’s instead subscribe to comments made on the current article:

const articleId = 23
Meteor.subscribe('comments', articleId)

Once the subscribe method has been called, Meteor fills the client-side Minimongo (the MongoDB instance running on the client) with the data you chose to sent it.

Typically the client-side database only gets some records, the minimum amount needed to initialize and work. You don’t replicate the whole server-side Mongo collection content of course, but you request data as needed.

Autopublish

Meteor makes it very easy for us to start diving into a project without worrying at all about publications and subscriptions.

It does this by including the autopublish package in every new project. That that packages does is, it automatically creates a pub/sub for each collection we have defined, syncing all the data available from server to client.

When you’ll reach the phase when you need more control on the data available to each user or view, you’ll just remove the autopublish package and you’ll manually define what you need.

Minimongo

Minimongo is your best friend when developing in Meteor. Ok, if you feel you have lots of best friends when using Meteor, I feel the same. Everything in Meteor is provided to ease your life.

Minimongo, in particular, is a frontend implementation of MongoDB. You might say.. what? Why do I need another database?

MongoDB: The Meteor Database

As of writing, Meteor has just one officially supported database: MongoDB.

You may wonder why. First, let me clarify: you can actually use any database you want, but to enjoy at 100% the marvels of Meteor you need to use Mongo. There are currently community projects that are working towards adding support for many other databases.

MongoDB in two words

MongoDB is a document-based database. It features high performance, high availability, easy scalability. It stores its documents in database collections. A document is a set of key-value pairs (JSON), and it has a dynamic schema. This means that each document does not need to have the same set of fields, but you have a great freedom in managing data.

Meteor and MongoDB

As said, a MongoDB document is a JSON object. Meteor Collections are directly related to MongoDB collections, and the Meteor internals make sure that when data changes in a MongoDB Collection tracked by Meteor, the Meteor Collection is updated too.

Minimongo

In short, in Meteor you typically create a collection, and that collection is available on both client and server code. When you do some database query or database processing, you don’t “think” whether you should do that operation on the client-side database, or the server-side database: to a certain extent, they’re mostly the same thing. And they talk to each other transparently.

This means that when the server-side database (MongoDB) is updated by someone else or something happens in the app you’re using, or even you add something in a second browser window.. everything that’s stored in the database that interests your current session is pushed by the server MongoDB to the Minimongo running inside your browser.

The same happens for the opposite: you push a post to the Posts collection? Minimongo is updated immediately, while Meteor pushes the update to the MongoDB database server side.

This has the nice effect of making your changes, your pages and interactions feel immediate to the user.

Minimongo is a MongoDB client-side clone

Minimongo tries to perfectly emulate a subset of MongoDB. You can insert data, remove data, search, sort, update.. with the same exact MongoDB APIs.

This means you can also easily port some parts of your code from the server to the client-side very easily when it makes sense.

Client-side storage facility

With Minimongo you have a fantastic client-side storage that you can query using the MongoDB Query functionalities.

You can of course create instances of a Minimongo collection just client-side, when you don’t have the need to sync a collection to the server.

Not only, you can observe for database changes, and your interface can react to those changes easily.

Latency Compensation

Latency Compensation is part of the Meteor Principles. There, it’s described in this way: on the client, Meteor prefetches data and simulates models to make it look like server method calls return instantly.

What does it mean?

On a typical Web Application, when you do some kind of action, the action is passed to the server to be processed, and then you need to wait until the server responds, and then changes are applied to the page you’re interacting with.

More modern applications rely on AJAX to provide a better turnaround and avoid refreshing a page on every action, but still many apps rely on the server response prior to taking any action. Better apps introduce some sort of latency compensation, but it’s a manual process.

Meteor introduces the concept of Latency Compensation deep into his philosophy and it’s enabled by default, without you needing to do anything special to work with it.

For example when you add an item to a collection, meanwhile the item will be sent to the server, it’s already added to the collection view on your page.

It feels better, because the app feels immediately responsive (it is).

If there is an error you’ll be notified later and you have the opportunity to handle things in the best way for each situation.

Meteor Collections

An application typically needs to display data of some sort.

Be it messages, comments, posts, books, addresses, pictures.. everything is a collection of something.

Meteor being deeply integrated with MongoDB takes the Mongo database collection concept and takes it to the application level.

In both the client and server contexts, you’ll typically interact with data by interacting with data collections.

How does it work?

Create your first collection

Messages = new Mongo.Collection('messages')

This defines a global variable messages, which will be visible across the entire App on client and server.

This code needs to run on both the client and the server, so you’ll put it for example under collections/messages.js.

While the code running in the two environments is the same, what it does is different:

  • on the server it creates a Mongo collection if it’s not already existing, and then it will load the cursor in the Messages variable
  • on the client it will instantiate a Minimongo local collection. The app once instantiated will link that to the server-side collection, and will automatically keep them in sync.

Adding items to a collection

You’ll be able to insert items into a collection using the .insert() method on the collection cursor:

Messages.insert({message: "Hi"})

Showing the collection in the template

In a template you can use the {{#each}} Spacebars helper to navigate the collection and print all values stored in it:

<template name="messages">
  {{#each messages}}
    {{message}}
  {{/each}}
</template>