مقدمه ای بر فریمورک Meteor.js

گردآوری و تالیف : امیررضا سیستانه ای
تاریخ انتشار : 18 مهر 1396
دسته بندی ها : جاوا اسکریپت

Meteor یک پلتفرم کامل برای ساخت اپلیکیشن های وب و موبایل real-time با استفاده از جاوا اسکریپت هست. Meteor فریمورک یا کتابخانه ای نیست که فقط برای حل مشکل خاصی آمده باشه, مثل express که ابزار توسعه وب در Node.js یا django برای پایتون باشه, بلکه این فریمورکی هست که به برنامه نویس ها اجازه میده اپلیکیشن های با کارایی بالا بسازند.

چرا از Meteor استفاده کنیم؟

فریمورک Meteor مزایای زیر را دارد :

کد کمتر

Meteor تمام کامپوننت هایی که شما برای ساخت یک اپلیکیشن real-time احتیاج دارید رو فراهم میکنه, مثل node.js برای سرور یا mongo برای دیتابیس . پس این ابزار چطوری کمک میکنه ما کدهامون رو بنویسیم, تصویر زیر میتونه گویای مطلب باشه :

همانطور که تصویر نشون میده, Metoer یک پکیج کامل شبیه یک ماشینه, تمام چیزهایی که برای رانندگی نیاز دارید!

از یک زبان, همه جا استفاده کنید

از یک فرم در کلاینت تا سرور و دیتابیس, جاوا اسکریپت هست. Mongo یک موتور دیتابیس متن باز هست که از JSON استفاده میکنه. Meteor میتونه شامل هر کتابخانه ی کلاینتی مثل Angular بشه.

مدل برنامه نویسی Inbuilt Reactive 

مدل برنامه نویسی Reactive برای اپلیکیشن های وب real-time ضروریست. این مدل رویکرد مناسب برای مدیریت اطلاعاتی که در لحظه تغییر میکنند رو داره (تغییرات client side یا back-end side). 

یکی از بهترین مثال ها برای درک این موضوع لایک فیسبوک و سیستم کامنت هاست. به محض اینکه تصویری رو دوست داشتید و لایک زدید توی دیتابیس ثبت میشه. با Meteor نیازی به نگرانی در این مدل ندارید. همه چیز آمادست, کافیه استفاده کنید.

نصب و راه اندازی

برای نصب فریمورک Meteor از طریق این لینک به وبسایتش برید و اون رو دانلود کنید.

اگر شما از Mac استفاده میکنید. اینکار سادست کافیه دستور زیر رو بزنید :

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

این دستور براتون Meteor رو دانلود و نصب میکنه.

پروژه نمونه

شما باید از طریق کامند به Meteor دسترسی پیدا کنید. کافیه meteor رو تایپ کنید و لیستی از کامندهای موجود رو براتون میاره. حالا با استفاده از دستور زیر یک پروژه ساده بسازید :

meteor create myApp

وقتی تمام شد, به فولدر myApp برید و meteor رو تایپ کنید. شما باید صفحه ای شبیه زیر ببینید :

در مرورگر آدرس localhost:3000 رو باز کنید تا اپلیکیشن رو مشاهده کنید :

درک کدها

در هر پروژه Node.js, نقطه شروع کدنویسی فایل سرور هست, سپس مسیرها و اینکه روی مسیرها چه چیزی اعمال بشه و درنهایت تحویل فایل های ساتاتیک به کلاینت. 

Meteor هم از رویکرد مشابهی استفاده میکنه اما در یک مسیر فشرده تر. 

Meteor سه فایل برای این پروژه ساده میسازه :


//myApp.js

if (Meteor.isClient) {

  // counter starts at 0

  Session.setDefault('counter', 0);



  Template.hello.helpers({

    counter: function () {

      return Session.get('counter');

    }

  });



  Template.hello.events({

    'click button': function () {

      // increment the counter when button is clicked

      Session.set('counter', Session.get('counter') + 1);

    }

  });

}



if (Meteor.isServer) {

  Meteor.startup(function () {

    // code to run on server at startup

  });

}

این رو بعنوان فایل سرور برای اپلیکیشن node.js در نظر بگیرید. بلاک کد isClient و isServer تمایز بین کلاینت و سرور هست. کد قالب ها بشکل زیر هست :


//myApp.html

<head>

  <title>myApp</title>

</head>



<body>

  <h1>Welcome to Meteor!</h1>



  {{> hello}}

</body>



<template name="hello">

  <button>Click Me</button>

  <p>You've pressed the button {{counter}} times.</p>

</template>

Meteor قالب هایی رو تعریف میکنه که میتونند توسط کلاینت یا سرور قابل دسترس باشند. در سمت کلاینت <template> تگ هست و در سرور شما میتونید از Template.template_name استفاده کنید. در سمت کلاینت شما میتونید قالب ها رو به BODY بخش html توسط تگ زیر استفاده کنید :

{{> template name}}

Helper ها بسیار شبیه Angular $scope هست و میتونند با استفاده از تگ {{ helper name }} در سمت کلاینت استفاده بشوند و برای سرور هم Template.templatename.helper.

منبع

برچسب :
این مطلب را با دیگران به اشتراک بگذارید :

مقالات پیشنهادی

۱۵ مورد از بهترین فریمورک‌های پایتون برای توسعه‌دهندگان وب

پایتون یکی از قویترین زبان‌های برنامه‌نویسی در جهان به شمار می‌آید و به سرعت نیز رشد کرد، این زبان سطح بالا، تعداد بسیار زیادی کتابخانه دارد که باعث ش...

10 مورد از کوچک‌ ترین و سریع‌ ترین فریمورک‌ های Front-End

اگر یک جستجوی ساده در گوگل داشته باشید می‌توانید با ابزارهای مختلفی که می‌توانند کارایی وبسایت‌تان را بهبود دهند آشنایی پیدا کنید. موارد مختلفی وجود د...

مقدمه ای بر ساخت API با فریمورک hapi.js

در این آموزش قصد داریم علاوه بر شرح مقدمه ای در باب فریمورک hapi.js که بر پایه ی Node.js هست, یک پروژه ساده API هم بسازیم و شما میتونید از طریق این لی...

دییسبا فریمورکی بر پایه css و javascript

دییسبا یک سیستم طراحی وب است برای برنامه نویسی آسان و راحت برای کسانی که کمترین آشنایی با وب را دارند، یا حتی برای افراد حرفه ای دییسبا بر پایه سی اس...