عنوان مقاله :

مقدمه ای بر فریمورک 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.

منبع

برچسب :

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

۶ دلیل برای استفاده از کتابخانه و فریمورک های جاوا اسکریپت

هر روزه در فضای اینترنت شاهد آموزش ها و منابعی از جاوا اسکریپت هستم که پافشاری می کنند که بجای استفاده از فریمورک هایی مانند MooToo، Jquery، Prototype...

10 پروژه سه بعدی الهام بخش وب که با css و javascript ساخته شده اند

وب، راه طولانی را از اینترنت dial-up تا کنون طی کرده است. وب سایت ها امروزه تماما واکنش گرا شده اند و بر روی دستگاه های لمسی در دسترس هستند. اما مرورگ...

ساخت یک اپلیکیشن با لاراول و AngularJS – قسمت دوم

در قسمت قبل این سری آموزش‌ها درمورد کلیات پروژه ای که میخوایم انجام بدیم, نحوه پیاده‌سازی پروژه لاراول و نحوه ایجاد جداول توسط migration ها صحبت کردیم...

مقدمه‌ای بر استفاده از Vue.js در لاراول

در این مقاله میخوایم یک پروژه تستی بسازیم و در اون بتونیم یکسری اطلاعات رو به دیتابیس بفرستیم یا از دیتابیس حذف کنیم. این کار معمولی هست اما ما میخوای...

دیدگاه های ارزشمند شما

برای ارسال نظر لازم است ابتدا وارد سایت شوید
هیچ دیدگاهی تا به این لحظه برای این موضوع ثبت نشده است