Vue.js কী?

Vue (উচ্চারণ /vjuː/, ভিউ এর মতো ) হলোইউজার ইন্টারফেস তৈরির জন্য একটি জাভাস্ক্রিপ্ট
ফ্রেমওয়ার্ক। এটি স্ট্যান্ডার্ড এইচটিএমএল (HTML), সিএসএস (CSS) এবং জাভাস্ক্রিপ্টের
(JavaScript) উপরে তৈরি করা হয় যা একটি ঘোষণামূলক (declarative) এবং উপাদান-ভিত্তিক (component-
based) প্রোগ্রামিং মডেল সরবরাহ করে। আপনাকে দক্ষতার সাথে ইউজার ইন্টারফেস ডেভেলপ করতে
সহায়তা করে, হোক সেগুলো সহজ কিংবা জটিল।
একটি উদাহরণঃ
জেএস (js)
import { createApp } from 'vue'
createApp({
data() {
return {
count: 0
}
}
}).mount('#app')
টেমপ্লেট (Template)
<div id="app">
<button @click="count++">
Count is: {{ count }}
</button>
</div>
উপরের উদাহরণটি Vue এর দুটি মূল বৈশিষ্ট্য প্রদর্শন করে:
ঘোষণামূলক রেন্ডারিং (Declarative Rendering) Vue একটি টেমপ্লেট সিনট্যাক্স সহ স্ট্যান্ডার্ড
HTML প্রসারিত করে যা আমাদের জাভাস্ক্রিপ্ট অবস্থার উপর ভিত্তি করে HTML আউটপুটকে গঠন বর্ণনা
করতে দেয়।
প্রতিক্রিয়াশীলঃ Vue স্বয়ংক্রিয়ভাবে জাভাস্ক্রিপ্টের অবস্থার পরিবর্তনগুলো ট্র্যাক করে এবং পরিবর্তনগুলো
ঘটলে দক্ষতার সাথে DOM আপডেট করে৷

প্রগতিশীল ফ্রেমওয়ার্ক
Vue হলো এমন একটি ফ্রেমওয়ার্ক এবং ইকোসিস্টেম যেখানে ফ্রন্টএন্ড ডেভেলপমেন্টে প্রয়োজনীয় সকল
সাধারণ বৈশিষ্ট্যগুলো রয়েছে। কিন্তু ওয়েব অত্যন্ত বৈচিত্র্যময় ও বিস্তৃত। আমরা ওয়েবে যে জিনিসগুলি
তৈরি করি তার আকার এবং স্কেলেও ব্যাপক যা প্রতিনিয়ত পরিবর্তিত হচ্ছে। এই কথা মাথায় রেখে, Vue
নমনীয় এবং ক্রমবর্ধমানভাবে গ্রহণযোগ্য হওয়ার জন্য ডিজাইন করা হয়েছে। আপনার ব্যবহারের ক্ষেত্রে
নির্ভর করে, Vue বিভিন্ন উপায়ে ব্যবহার করা যেতে পারেঃ
বিল্ড স্টেপ (build step) ছাড়াই স্ট্যাটিক এইচটিএমএল (HTML) উন্নত করা-
● যেকোনো পৃষ্ঠায় ওয়েব উপাদান হিসেবে এম্বেড (Embed) বা যুক্ত করা
● একক-পৃষ্ঠা (Single-Page) অ্যাপ্লিকেশন (SPA)
● ফুলস্ট্যাক / সার্ভার-সাইড রেন্ডারিং (SSR)
● জ্যামস্ট্যাক (Jamstack) / স্ট্যাটিক সাইট জেনারেশন (SSG)
● ডেস্কটপ, মোবাইল, ওয়েবজিএল (WebGL) এবং আরও এমন টার্মিনালকে লক্ষ্য করে

একক ফাইল উপাদান (Single-File Components)
বেশিরভাগ বিল্ড-টুল-সক্ষম Vue প্রোজেক্টে, আমরা সিঙ্গল-ফাইল কম্পোনেন্ট নামে একটি HTML-এর
মতো ফাইল ফরম্যাট ব্যবহার করে Vue উপাদানগুলো লিখি (এটি *.vue ফাইল হিসাবেও পরিচিত, সংক্ষেপে
SFC )। একটি Vue SFC, নাম অনুসারে, একটি একক ফাইলে উপাদানের যুক্তি (জাভাস্ক্রিপ্ট), টেমপ্লেট
(এইচটিএমএল) এবং শৈলী (সিএসএস) অন্তর্ভুক্ত করে। পূর্ববর্তী উদাহরণটি যা SFC বিন্যাসে লেখা:

<script>
export default {
data() {
return {
count: 0
}
}
}
</script>
<template>
<button @click="count++">Count is: {{ count }}</button>
</template>
<style scoped>

button {
font-weight: bold;
}
</style>
SFC হলো Vue-এর একটি সংজ্ঞায়িত বৈশিষ্ট্য এবং যা আপনার ব্যবহারের ক্ষেত্রে একটি বিল্ড সেটআপের
নিশ্চয়তা দেয় । Vue আপনার জন্য সমস্ত বিল্ড টুল সেটআপ পরিচালনা করে থাকে ।
API স্টাইল
Vue উপাদান দুটি ভিন্ন API স্টাইলে রচিত হতে পারে: Options API এবং Composition API ।
অপশন এপিআই (Options API)
অপশন এপিআই-এর সাহায্যে, আমরা ডেটা (data), পদ্ধতি (methods) এবং মাউন্টেডের (mounted) এর
মাধ্যমে একটি উপাদানের যুক্তি সংজ্ঞায়িত করি। এর একটি উদাহরণঃ

<script>
export default {
// Properties returned from data() become reactive state
// and will be exposed on this.
data() {
return {
count: 0
}
},
// Methods are functions that mutate state and trigger updates.
// They can be bound as event listeners in templates.
methods: {
increment() {
this.count++
}
},
// Lifecycle hooks are called at different stages
// of a component's lifecycle.
// This function will be called when the component is mounted.
mounted() {
console.log(The initial count is ${this.count}.)
}
}
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>

</template>

কম্পোসিশন API (Composition API)
Composition API-এর সাহায্যে, আমরা ইমপোর্ট করা API ফাংশন ব্যবহার করে একটি উপাদানের যুক্তি
সংজ্ঞায়িত করে থাকি। SFC-তে, কম্পোজিশন API সাধারণত এর সাথে ব্যবহার করা হয় <script setup> এ।
অ্যাট্রিবিউট setup, Vue তে কম্পাইল-টাইম ট্রান্সফর্ম করে যা আমাদের কম বয়লারপ্লেটের সাথে
Composition API ব্যবহার করতে দেয়। উদাহরণস্বরূপ, ইমপোর্ট এবং শীর্ষ-স্তরের ভেরিয়েবল/ফাংশনে এই
<script setup> টেমপ্লেটে সরাসরি ব্যবহার করা যায়।
এখানে একই উপাদান এবং একই টেমপ্লেট ব্যবহার করে একটি উদাহরণ দেয়া হলো, কিন্তু এখানে
কম্পোজিশন API ব্যবহার করা হয়েছে <script setup> এর পরিবর্তেঃ

<script setup>
import { ref, onMounted } from 'vue'
// reactive state
const count = ref(0)
// functions that mutate state and trigger updates
function increment() {
count.value++
}
// lifecycle hooks
onMounted(() => {
console.log(The initial count is ${count.value}.)
})
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>

আপনি কোনটি বেছে নেবেন?
উভয় API স্টাইল সাধারণ ব্যবহারের ক্ষেত্রে আপনার সম্পূর্ণ চাহিদা কভার করতে সক্ষম। এগুলো ঠিক
একই অন্তর্নিহিত সিস্টেম দ্বারা চালিত বিভিন্ন ইন্টারফেস। আসলে, Options API কম্পোজিশন API এর
উপরে প্রয়োগ করা হয়! Vue সম্পর্কে মৌলিক ধারণা এবং জ্ঞান দুটি স্টাইলে ভাগ করা হয়েছে।

অপশন এপিআই একটি "কম্পোনেন্ট ইন্সট্যান্স" এর ধারণাকে কেন্দ্র করে তৈরি(উদাহরণে দেখে বুঝতে
পারবেন), যা সাধারণত OOP ভাষার ব্যাকগ্রাউন্ড থেকে আগত ব্যবহারকারীদের জন্য একটি শ্রেণি-ভিত্তিক
মানসিক মডেলের (mental model) সাথে বেশি মানানসই।
কম্পোজিশন এপিআই একটি ফাংশন স্কোপে সরাসরি এবং প্রতিক্রিয়াশীল স্টেট ভেরিয়েবল (state variables)
এবং জটিলতা সামলাতে একসাথে একাধিক ফাংশন থেকে কম্পোজ করে থাকে । এটি আরও ফ্রি-ফর্ম এবং
কার্যকরভাবে ব্যবহার করার জন্য Vue-তে প্রতিক্রিয়া কীভাবে কাজ করে সেটা বোঝা প্রয়োজন।
Vue.js নিয়ে আজকের এই ব্লগটি আপনার কেমন লাগলো জানাতে ভুলবেন না। পরবর্তী ব্লগ পড়ার আমন্ত্রণ
রইলো।