نگاهی به فریمورک‌های Backbone ،Angular و Ember

زمانی که پای نوشتن وب اپلیکیشن‌هایی به میان می‌آید که بر پایهٔ جاوااسکریپت هستند، این سؤال برای دولوپرها به وجود می‌آید که از چه ابزار یا بهتر بگوییم از چه فریمورکی باید استفاده کنیم. آنچه مسلم است اینکه در مباحثی اینچنین، اصلاً بحث خوب بودن یا بد بودن یک فریمورک در میان نیست بلکه باید ببینیم که کدام فریمورک به بهترین شکل ممکن پاسخگوی نیازهای ما خواهد بود. 

فریمورک‌هایی همچون Angular ،Backbone و Ember اپن‌سورس بوده لذا این انتظار را می‌توان داشت که توسط دولوپرهای زیادی بیش از پیش توسعه یابند و این در حالی است که استفاده از این فریمورک‌ها سرعت توسعهٔ اپلیکیشن را نیز ارتقاء می‌بخشند اما مشکل اصلی از زمانی شروع می‌شود که بخواهیم مابین یکی از این فریمورک‌ها مناسب‌ترین گزینه را انتخاب کنیم.

به طور کلی، انتخاب یک فریم‌ورک یا زبان برنامه‌نویسی با انتخاب یک کلای مصرفی بسیار فرق می‌کند زیرا اگر فریمورک مناسب خود را نتوانیم به درستی انتخاب کنیم، در آینده‌ای نه چندان دور باید به عقب بازگشته و راه طی شده را مجدد بپیماییم! انتخاب یک فریمورک بیشتر به انتخاب نوع یک لباس می‌ماند. به طور مثال، برای مجلس عروسی هرگز نمی‌توان یک مایو پوشید یا برای آفتاب گرفتن در سواحل جزیرهٔ کیش، کسی را نمی‌توان یافت که کت‌و‌شلوار بپوشد و به همین صورت، هر فریمورکی مناسب تَسک خاصی است و از همین روی اول باید ماهیت وب اپلیکیشن یا سایتی که قرار است راه بیندازیم را مشخص ساخته، سپس اقدام به انتخاب نوع فریمورک مد نظر خود نماییم.

فریمورک Angular JS
Angular.js از میان سه فریمورکی که در این مقاله قصد داریم بررسی کنیم، قدیمی‌ترین آ‌ن‌ها است و عرضهٔ آن به سال ۲۰۰۹ باز می‌گردد و از همین روی جامعهٔ توسعه‌دهندگان آن نیز نسبت به رقبایش ممکن است بیشتر باشد (البته توسعهٔ‌ این فریمورک توسط غول نرم‌افزاری دنیا،‌ گوگل، هم بی‌تأثیر نیست.) به عنوان نمونه سورس‌کد نوشته شده با این فریمورک داریم:

angular.module('todoApp', [])
  .controller('TodoListController', function() {
    var todoList = this;
    todoList.todos = [
      {text:'learn AngularJS', done:true},
      {text:'build an AngularJS app', done:false}];
 
    todoList.addTodo = function() {
      todoList.todos.push({text:todoList.todoText, done:false});
      todoList.todoText = '';
    };
 
    todoList.remaining = function() {
      var count = 0;
      angular.forEach(todoList.todos, function(todo) {
        count += todo.done ? 0 : 1;
      });
      return count;
    };
 
    todoList.archive = function() {
      var oldTodos = todoList.todos;
      todoList.todos = [];
      angular.forEach(oldTodos, function(todo) {
        if (!todo.done) todoList.todos.push(todo);
      });
    };
  });

به گفتهٔ برخی دولوپرها، آنگولار از قابلیت‌هایی برخوردار است که در هیچ فریمورک دیگری نمی‌توان آن‌ها را یافت.

فریمورک Backbone.js
Backbone.js در سال ۲۰۱۰ به دنیا عرضه شد و جامعهٔ دولوپرهای این فریمورک هم دست کمی از آنگولار ندارد و وب اپلیکیشن‌های معروفی همچون لینکداین، اوبر،‌ رددیت از این فریمورک استفاده می‌کنند. به عنوان نمونه کد این فریمورک داریم:

var Sidebar = Backbone.Model.extend({
  promptColor: function() {
    var cssColor = prompt("Please enter a CSS color:");
    this.set({color: cssColor});
  }
});

window.sidebar = new Sidebar;

sidebar.on('change:color', function(model, color) {
  $('#sidebar').css({background: color});
});

sidebar.set({color: 'white'});

sidebar.promptColor();

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

فریمورک Ember.js
Ember.js جدیدترین فریمورک در میان این سه گزینه است که در سال ۲۰۱۱ به بازار عرضه شده است و از جمله شرکت‌هایی که از این فریمورک استفاده می‌کنند می‌توان به مایکروسافت، لینکداین و نت‌فلیکس اشاره کرد.

به گفتهٔ توسعه‌دهندگان اصلی این فریمورک، زمانی که شما سایتی را مشاهده می‌کنید، به راحتی می‌توانید تشخیص دهید که آیا از امبر استفاده کرده است یا خیر زیرا سایت‌هایی که از فریمروک Ember استفاده می‌کنند، خیلی سریع لود می‌شوند و دلیل این مسأله هم آن است که تمامی فرایند رندرینگ در مرورگر کاربر اتفاق می‌افتد. به عنوان نمونه کد نوشته‌شده با این فریمورک داریم:

import Controller from '@ember/controller';

export default Controller.extend({
  isExpanded: false,

  actions: {
    toggleBody() {
      this.toggleProperty('isExpanded');
    }
  }
});

یکی از دلایلی که فریمورک امبر سایز بیشتری نسبت به رقبا دارد این است که این فریمورک دارای یکسری خصوصیات از پیش تعریف شده است و همین مسأله منجر شده تا حجم آن افزایش یابد اما اگر قصد طراحی یک ویجت کوچک و یا وب اپلیکیشن تک صفحه‌ای (SPA) را در ذهن می‌پرورانید، امبر گزینه مناسبی برای شما نخواهد بود اما اگر روی یک پروژهٔ چند صفحه‌ای نسبتاً بزرگ کار می‌کنید، امبر گزینه مناسبی است.

حال نوبت به نظرات شما می‌رسد. آیا تجربهٔ کار با این سه فریمورک و یا سایر فریمورک‌های جاوااسکریپتی را داشته‌اید و به نظر شما هر کدام از فریمورک‌ها و لایبرری‌های زبان جاوااسکریپت برای چه نوع پروژه‌هایی مناسب هستند؟ نظرات، دیدگاه‌ها و تجربیات خود را با سایر کاربران سکان آکادمی به اشتراک بگذارید.