Meteor هي منصة تطبيق ويب. إنها أداة لكل من المبتدئين والخبراء ، فهي تجعل من السهل جدًا البدء ، وتوفر نظامًا بيئيًا ضخمًا للمكتبات التي يمكنك الاستفادة منها
Meteor هي منصة تطبيق ويب.
يمكن أن تكون تطبيقات الويب الحديثةمعقد للغايةلأكتب. خاصة للمبتدئين.
Meteor هي أداة للمبتدئين والخبراء على حد سواءمن السهل أن تبدأ، ويوفر نظامًا بيئيًا ضخمًا من المكتبات التي يمكنك الاستفادة منها.
- JavaScript
- في الوقت الحالى
- يشعر بالسرعة
- المصدر المفتوح
- انه سهل
- نظام حزم رائع
- كيف يمكن لـ Meteor أن يحسن حياتك
- عندما لا يكون Meteor هو الأنسب لك
- 7 مبادئ النيزك
- إجراء التركيب
- الخطوات الأولى مع Meteor
- إرشادات التعليمات البرمجية
- النيزك CLI
- متماثل
- متغيرات الجلسة ومساعدي القالب
- البرمجة التفاعلية
- منشورات النيزك
- مينيمونجو
- تعويض الكمون
- مجموعات النيزك
JavaScript
كان Meteor أحد الأساليب الشائعة الأولى لاستخدام JavaScript على كل من العميل والخادم بسلاسة.
مرفق معMongoDB، وهي قاعدة بيانات تخزن ملفاتجسونالكائنات ، ويستخدم Javascript كلغة استعلام ، فإنه يجعل JavaScript في كل مكان.
نيزك السفن أيضا معمينيمونجوفي الواجهة الأمامية ، وهي قاعدة بيانات للواجهة الأمامية متوافقة مع واجهات برمجة تطبيقات MongoDB ، وهي مكتوبة بالكامل بلغة جافا سكريبت.
في الوقت الحالى
تشتهر Meteor بميزاتها في الوقت الفعلي ، ولكن ما هو الوقت الفعلي بالضبط؟ افترض أنك تريد إنشاء تطبيق دردشة. يقدم لك Meteor ميزات مثالية لذلك.
هل تريد إنشاء تطبيق اتصالات داخلي؟ ممتاز جدا. تطبيق لإدارة المشاريع؟ بشكل أساسي ، أي تطبيق يمكن من خلاله إخطار المستخدمين أو تحديث الأشياء بناءً على إجراءات المستخدمين الآخرين ، أو أشياء أخرى مثل واجهة برمجة التطبيقات (API) تقوم بتغيير المعلومات المعروضة ، يمكن إخطار المستخدم الذي يشاهد التطبيق بهذه التغييرات على الفور ، بطريقة سهلة إلى حد ما بطريقة مقارنة بالحلول الأخرى.
يشعر بالسرعة
شيء اسمهتعويض الكمونيقدم لك خدعة تمكّن الواجهة من الشعور بالسرعة الميتة حتى لو كانت لا تزال بحاجة إلى الاتصال بخادم بعيد. والأفضل من ذلك كله ، أنه مجاني لك من حيث التنفيذ ، مما يعني أنه مدعوم في Meteor وليس عليك فعل أي شيء لتمكينه.
المصدر المفتوح
بالطبع Meteor مفتوح المصدر بالكامل.
انه سهل
تبدو الأشياء بسيطة للغاية في Meteor ، لأنهانكونبسيط.
تؤدي الأشياء المعقدة إلى أخطاء غريبة أو مشاكل صعبة لاحقًا. نيزك يقدم لناواجهة برمجة تطبيقات نظيفة وجميلةوالوظائف التي يمكن البناء عليها.
نظام حزم رائع
الشيء الرائع في Meteor هو أنه نظرًا لأنه يمكنه تشغيل كل من الواجهة الأمامية والخلفية ، وهو مدمج بعمق مع قاعدة البيانات ،يمكن وضع كود الواجهة الأمامية والخلفية في حزمة واحدة، والعمل بسلاسة على كلا الجانبين. لهذا السبب يمكننا إضافة إدارة مستخدم كاملة بسطر واحد من التعليمات البرمجية.
كيف يمكن لـ Meteor أن يحسن حياتك
النيزك يعطيكمنصة Full-Stack، بتوفيركل من إطار العمل من جانب العميل وإطار العمل من جانب الخادم. علاوة على ذلك ، يوفر لك Meteor قناة الاتصال بين هؤلاء. تسمىDDP، وسنتحدث عنها لاحقًا.
لم تعد بحاجة إلى لصق إطار ولغات وأدوات وأدوات مختلفة معًا معًا. يعد هذا أمرًا ضخمًا للمطور المستقل أو الشركات الناشئة الصغيرة أو حتى المؤسسات الأكبر حجمًا التي لا تريد إضاعة الوقت والموارد مما يجعل الأمور أصعب مما ينبغي.
عندما لا يكون Meteor هو الأنسب لك
مواقع المحتوى الثابتلديك منصات أخرى أفضل للبناء عليها. إذا كنت بحاجة إلى إخراج بعض HTML فقط دون الكثير من التفاعل ، فاستخدم منشئ موقع ثابت.
النيزك حتى الكتابة لا يدعمقواعد بيانات SQL، والتي يمكن أن تكون شيئًا جيدًا في كثير من الحالات ، ولكن قد تكون هناك حاجة إليها في حالات أخرى. بالطبع يمكنك كتابة الإجراءات الخاصة بك باستخدام بيانات SQL.
7 مبادئ النيزك
النيزك مبني على المبادئ السبعة التالية. تم سردها في وثائق المشروع وهي مبادئ أساسية لذلك سنقوم بالإبلاغ عنها هنا.
المبادئ مهمة دائمًا عندما يتم احترامها في الحياة اليومية.
البيانات الموجودة على السلك
Meteor لا يرسل HTML عبر الشبكة. يرسل الخادم البيانات ويسمح للعميل بعرضها.
لغة واحدة
يتيح لك Meteor كتابة أجزاء العميل والخادم لتطبيقك بتنسيقJavaScript.
قاعدة بيانات في كل مكان
يمكنك استخدام نفس الطرق للوصول إلى قاعدة البيانات الخاصة بك من العميل أو الخادم.
تعويض الكمون
على العميل ، يقوم Meteor بإعداد البيانات مسبقًا ويحاكي النماذج لجعلها تبدو وكأنها تعود مكالمات طريقة الخادم على الفور.
تفاعلية مكدس كاملة
في Meteor ، الوقت الحقيقي هو الافتراضي. تقوم جميع الطبقات ، من قاعدة البيانات إلى القالب ، بتحديث نفسها تلقائيًا عند الضرورة.
احتضان النظام البيئي
Meteor هو مفتوح المصدر ويتكامل مع الأدوات والأطر مفتوحة المصدر الحالية.
البساطة تعني الإنتاجية
أفضل طريقة لجعل شيء ما يبدو بسيطًا هو أن يكون بسيطًا بالفعل. تتميز وظيفة Meteor الرئيسية بواجهات برمجة تطبيقات نظيفة وجميلة بشكل كلاسيكي.
إجراء التركيب
على OSX و Linux ، يكون تثبيت Meteor بسيطًا مثل كتابة هذا في محطة نظام التشغيل:
curl https://install.meteor.com/ | sh
هذا هو!
يحتوي Windows على برنامج التثبيت الرسمي الخاص به ، لذا تحقق من ذلك على الموقع الرسمي.
الخطوات الأولى مع Meteor
لنقم بإنشاء أول تطبيق Meteor.
افتح محطة نظام التشغيل ، واذهب إلى الدليل حيث ستستضيف المشروع واكتب
meteor create hello-world
سيقوم Meteor بإنشاء التطبيق الجديد لك ، فيhello-world
الدليل.
اذهب الآن داخل هذا الدليل واكتب
meteor
سيؤدي هذا إلى تدوير خادم الويب Meteor ، وستتمكن من الوصول إلى تطبيق Meteor الأول الخاص بك عن طريق توجيه متصفحك إلىhttp://localhost:3000
كان سهلا ، أليس كذلك؟
إرشادات التعليمات البرمجية
دعنا نتصفح رمز التطبيق لنرى كيف يعمل ذلك.
لا تقلق إذا لم تكن الأمور واضحة في الوقت الحالي ، فسيتم تقديم العديد من المفاهيم وشرحها لاحقًا.
قبل بضع سنوات ، كان من الممكن أن يحتوي تطبيق Meteor النموذجي هذا على ملف JavaScript واحد فقط ، لكل من العميل والخادم ، باستخدامMeteor.isClient
وMeteor.isServer
للتحقق مما إذا كان التطبيق يعمل على العميل أم على الخادم.
ابتعد نموذج التطبيق عن هذا النهج ، وكيف تم إنشاء ملفserver/main.js
والملفات الأخرى بتنسيقclient/
.
العميل / main.html
إذا قمت بفتح ملفclient/main.html
ملف يمكنك رؤية الكود المصدري للتطبيق:
<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>
يتعرف النيزك علىhead
وbody
العلامات ويضعها في المكان الصحيح في محتوى الصفحة. هذا يعني أنه من خلال تضمين أhead
علامة ، ستتم إضافة جميع محتوياتها إلى الصفحة "الحقيقية"head
بطاقة شعار.
نفس الشيء ينطبق علىbody
بطاقة شعار. هم العلامتان الرئيسيتان.
يجب وضع كل الطلبات المتبقية بشكل منفصلtemplate
العلامات.
الخاص{{ }}
يتم تعريف الأقواس التي تراها بواسطةالمسافة، وهي لغة قوالب تشبه إلى حد بعيدالمقاودمع بعض الميزات الفريدة التي تجعله مثاليًا للعمل مع Meteor
في مثال عالم الترحيب ،
{{> hello}}
يتضمنhello
و
{{counter}}
داخلhello
يبحث النموذج عن قيمة العداد في سياق القالب.
العميل / main.js
هذا هو محتوىclient/main.js
ملف:
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);
},
});
تقوم الكود بإعداد ReactiveVar ، aمتغير تفاعلي. يكشف المتغير التفاعلي واضعًا وجامعًا. باستخدام أداة الضبط ، سيتم تنبيه جميع الوظائف التي تسترد القيمة باستخدام get () عندما تتغير قيمتها.
يتم عرض قيمة المتغير التفاعلي في HTML باستخدام{{counter}}
المقتطف ، الذي يستدعي ملفcounter()
نموذج المساعد الذي حددناه هنا.
يقوم أولاً بتهيئة هذا المتغير إلى الصفر ، ويقوم بتعيين قيمته ليتم زيادتها عند النقر فوق الزر فيhello
نموذج.
للتعامل مع النقرات ، عليك العمل على أحداثhello
نموذج. في هذه الحالة ، نقوم باعتراض النقر على ملفbutton
عنصر HTML. عندما يحدث هذا ، فإنك تزيد من قيمة Session.counter.
في كود خادم Meteor ، بتنسيقserver/main.js
، هناكMeteor.startup
call ، الذي يستدعي الوظيفة التي تم تمريرها فقط عندما يكون Meteor جاهزًا. الآن لا يوجد شيء فيه ، لكننا سنرى كيف يمكن أن يكون هذا مفيدًا لاحقًا.
النيزك CLI
عند تثبيت Meteor ، تحصل على CLI (أداة سطر الأوامر المساعدة) تسمىmeteor
.
إنها أداة مفيدة للغاية ، لقد استخدمتها بالفعل لإنشاء التطبيق الأول ، وللبدء نحتاج فقط إلى معرفة جزء صغير مما يمكنه فعله.
دعنا نقدم الأوامر الأربعة الأكثر فائدة التي ستستخدمها عند البدء بـ Meteor.
نيزك
إذا كنت داخل دليل فارغ تكتب
meteoryou’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_nameMeteor 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_namewill 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_namewill 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>