একটা জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক নির্বাচন করা অনেক কনফিউজিং কাজ। আমরা এই গাইডে আপনাকে এই নির্বাচন করতে সাহায্য করব। এর সাহায্যে আপনার কাজের জন্য বেষ্ট ফ্রেমওয়ার্ক কিভাবে বেছে নিতে হবে, তা আপনি জানতে পারবেন।

জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক কি?

ফ্রেমওয়ার্ক আসলে কি? ফ্রেমওয়ার্ক হচ্ছে একটি নির্বাচিত লাইব্রেরি। যা ডাটা রেন্ডারিং এ সাহায্য করে। এবং প্রজেক্টের কাজ ত্বরান্বিত করে।

আসুন জনপ্রিয় কিছু ফ্রেমওয়ার্ক খতিয়ে দেখি।

জনপ্রিয় জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক সমূহ

বর্তমানে একেক কাজের জন্য অনেক ভিন্ন ভিন্ন  ফ্রেমওয়ার্ক জনপ্রিয় হয়ে উঠেছে। যেমন রিয়্যাক্ট, ভু, অ্যাঙ্গুলার ইত্যাদি।

Vue

First Commit July 27, 2013
File Size: 27.5KB minified

Vue একটি প্রগ্রেসিভ ফ্রেমওয়ার্ক। এটি ব্যবহার শুরু করতে HTML, CSS, JS এর বেসিক জ্ঞান থাকতে হবে।

এটা শিখতে বেশি সময় লাগেনা। এটা সিঙ্গেল পেজ অ্যাপ্লিকেশন বানানোর কাজে বেশি ব্যবহৃত হয় কারণ এতে মডার্ন টুলিং, সাপোর্ট লাইব্রেরি ও বিস্তারিত ডকুমেন্টেশন সুবিধা রয়েছে।

ভু ফ্রেমওয়ার্ক এর সিনট্যাক্স বোঝার জন্য এটি ব্যবহার করে একটি “Hello World” ডেমোঃ

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

এই এক্সপ্রেসিভ লাইব্রেরি আরও ভালোভাবে ব্যবহার করতে “attribute values” ব্যবহার করা যায় এর মার্কআপের সাথে। যেটার সিনট্যাক্স দেখতে এমনঃ

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>

Vue.js দিয়ে component templates তৈরি করা যায়। এতে ডেক্লেরেটিং রেন্ডারিং সুবিধা রয়েছে যা Web Components Spec এর সাথে সামঞ্জস্যপূর্ন সিনট্যাক্স থাকার দ্বারা সম্ভব হয়েছে।

লার্নিং রিসোর্সঃ

• Learn Vue 2: Step By Step on Laracasts
• Build a Bookmark Manager With Rails and Vue on Tuts+
• Vue.js Fundamentals by DevMarketer
• Vue Guide on vuejs.org
  

React

First Commit May 29, 2013
File Size: 7.3KB minified w/Add-ons: 11.3KB minified

React ইন্টারফেস বিল্ডিং এবং ডাটা ড্রিভেন কাজের একটি জাভাস্ক্রিপ্ট লাইব্রেরি। এটা ফেসবুকের দ্বারা তৈরি এবং এটি ওপেন সোর্স। এটার গিটহাবে হোস্ট করা আছে। একটা সমস্যা হচ্ছে HTMLকোড React কোডের ভিতরে অথর করতে হয়, কিন্তু React এ এভাবেই কাজ করতে হয়।

React এর সিনট্যাক্স এর উদাহরণ। এখানে React এর একটি কম্পোনেন্ট সাব ক্লাস এর উদাহরণ দেয়া হয়েছে।  নিচে কোডে দেখুনঃ

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

<ShoppingList name="Mark" />

React এর সাথে ব্যবহার করার জন্য অনেক রকম অ্যাড অন ও মডিউল রয়েছে, যা দিয়ে এর ফাংশনালিটি এক্সটেন্ড করা যায়। React এর সাথে সহজেই Babel ব্যবহার করা যায়। তাই, এর সাথে ES6 এবং JSX কোড ব্যবহার করতে পারবেন। আর Chrome বা Firefox এর Devtools দিয়ে React এর কম্পোনেন্ট ট্রি ন্যাভিগেট করা সহজ।

লার্নিং রিসোর্সঃ

• React For Beginners by Wes Bos
• Getting Started With React.js on Tuts+
• Tutorial: Intro To React

Angular

First Commit September 18, 2014 (GitHub reported)
Initial Release (According to Wikipedia) October 20, 2010
File Size: CLI Tool. No Longer a standalone JS file.

Angular গুগলের ডেভেলাপ করা একটা ফ্রেমওয়ার্ক। অ্যাঙ্গুলার declarative bindings থেকে ইভেন্টস সহ ডায়নামিক ডাটা বেসড ইন্টার‍্যাকশন নিয়ে কাজ করে। এটা এত জনপ্রিয় কারন এতে অনেক লার্জ ডাটা রিকোওয়ারমেন্ট নিয়ে কাজ করা যায়।

“Learn one way to build applications with Angular and reuse your code and abilities to build apps for any deployment target. For web, mobile web, native mobile and native desktop.”

এই ফ্রেমওয়ার্কের সিনট্যাক্সও অনেক সহজঃ

<input type="text" ng-model="yourName" placeholder="Enter a name here">
<h1>Hello {{yourName}}!</h1>

Angular এর কোড আসলে HTML টেমপ্লেট এবং কিছু কম্পোনেন্ট ক্লাসের সমন্বয় ছাড়া কিছুই না।

// src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }

<!-- index.html -->
<my-app>Loading AppComponent content here ...</my-app>

এর ফাইলগুলো ts এক্সটেনশনে থাকে। Angular জাভাস্ক্রিপ্টের একটি সুপারসেট।

লার্নিং রিসোর্সঃ

• Get Started With Angular 2 on Tuts+
  
• Modern Web Apps With Angular 2 on Tuts+
  
• Learning Angular on angular.io
• Angular Resources angular.io
• Angular2 on egghead.io

Ember

First Commit Apr 30, 2011
File Size: ?

Ember এ Handlebars টেমপ্লেটিং ইঞ্জিন ইন্টিগ্রেট করা। যা দিয়ে স্ট্যাটিক পেজ জেনারেট করা যায়।

“Ember is a JavaScript application framework for creating single-page client-side web applications, which uses Model-View-Controller (MVC) pattern.”

Ember একটি নোড হিসেবে তৈরি করা যা Node.js এর উপর কাজ করে। এই ফ্রেমওয়ার্কটি কমান্ড লাইন থেকে ব্যবহারের সুবিধা রয়েছে।

Ember এর সিনট্যাক্সও অনেক সহজ। এতে নতুন কোন রকমের সিনট্যাক্স নেই।

import Ember from 'ember';

export default Ember.Controller.extend({
  firstName: 'Trek',
  lastName: 'Glowacki'
});

Hello, <strong>{{firstName}} {{lastName}}</strong>

উপরের উদাহরণে Ember এর একটি স্যাম্পল কোড দেয়া হল।

Ember এর কিছু রাউটার কেপেবিলিটি আছে, যা ব্রোকেন URL প্রতিরোধ করে, এবং এর API দিয়ে সার্ভার সাইডের সাথে ফ্রন্ট ইন্টার‍্যাকশন সব সময় আপটুডেট থাকে। Ember.js ফ্রি এবং ওপেন সোর্স।

লার্নিং রিসোর্সঃ

• EmberJS Framework Basics on Tuts+
  
• Getting Into EmberJS on Tuts+
• EmberJS Guides on emberjs.com
  

পরিশেষ

ফ্রেমওয়ার্ক চয়েস আসলে ব্যক্তিগত সিদ্ধান্তের উপর ডিপেন্ড করে। কোনটাই অন্যটার চেয়ে বেশি বা কম কাজের না। কম্পেয়ার করে দেখলে বুঝতে পারবেন যে একেকটা একেক কাজ লাগে। এই কুইজটিতে অংশগ্রহণ করে দেখতে পারেন। যেটা আপনার কেমন ফ্রেমওয়ার্ক দরকার তা নির্ধারণে সহায়তা করবে!

• 

  Quiz: Choose the Right Front-End JavaScript Framework for Your Project

  Need help deciding which JavaScript framework you should use for your next exciting project? Find out which front-end framework you should learn in our quiz!