Ways of Using Vue
আমরা বিশ্বাস করি যে ওয়েবের জন্য "একটি মাপ সমস্ত মাপসই" গল্প নেই৷ এই কারণেই Vue কে নমনীয় এবং ক্রমবর্ধমানভাবে গ্রহণযোগ্য করার জন্য ডিজাইন করা হয়েছে। আপনার ব্যবহারের ক্ষেত্রে নির্ভর করে, স্ট্যাক জটিলতা, ডেভেলপমেন্টকারীর অভিজ্ঞতা এবং শেষ কর্মক্ষমতার মধ্যে সর্বোত্তম ভারসাম্য বজায় রাখতে Vue বিভিন্ন উপায়ে ব্যবহার করা যেতে পারে।
Standalone Script
Vue একটি স্বতন্ত্র স্ক্রিপ্ট ফাইল হিসাবে ব্যবহার করা যেতে পারে - কোন বিল্ড পদক্ষেপের প্রয়োজন নেই! আপনার যদি একটি ব্যাকএন্ড ফ্রেমওয়ার্ক থাকে যা ইতিমধ্যেই বেশিরভাগ এইচটিএমএল রেন্ডার করছে, বা আপনার ফ্রন্টএন্ড লজিকটি একটি বিল্ড স্টেপকে ন্যায্যতা দেওয়ার জন্য যথেষ্ট জটিল নয়, এটি আপনার স্ট্যাকের মধ্যে Vue সংহত করার সবচেয়ে সহজ উপায়। আপনি এই ধরনের ক্ষেত্রে jQuery-এর আরও ডিক্লেয়ার প্রতিস্থাপন হিসাবে Vue কে ভাবতে পারেন।
Vue petite-vue নামে একটি বিকল্প বন্টনও প্রদান করে যা বিদ্যমান HTML ক্রমবর্ধমানভাবে উন্নত করার জন্য বিশেষভাবে অপ্টিমাইজ করা হয়। এটির একটি ছোট বৈশিষ্ট্য সেট রয়েছে, তবে এটি অত্যন্ত হালকা এবং একটি বাস্তবায়ন ব্যবহার করে যা নো-বিল্ড-স্টেপ পরিস্থিতিতে আরও দক্ষ।
Embedded Web Components
আপনি Vue ব্যবহার করতে পারেন বিল্ড স্ট্যান্ডার্ড ওয়েব কম্পোনেন্ট যেগুলো যেকোন HTML পেজে এম্বেড করা যেতে পারে, সেগুলি যেভাবে রেন্ডার করা হোক না কেন। এই বিকল্পটি আপনাকে সম্পূর্ণরূপে ভোক্তা-অজ্ঞেয়বাদী ফ্যাশনে Vue লাভ করতে দেয়: ফলস্বরূপ ওয়েব কম্পোনেন্টগুলি লিগ্যাসি অ্যাপ্লিকেশন, স্ট্যাটিক এইচটিএমএল বা এমনকি অন্যান্য ফ্রেমওয়ার্কের সাথে নির্মিত অ্যাপ্লিকেশনগুলিতে এম্বেড করা যেতে পারে।
Single-Page Application (SPA)
কিছু অ্যাপ্লিকেশনের জন্য সমৃদ্ধ ইন্টারঅ্যাক্টিভিটি, গভীর সেশনের গভীরতা এবং ফ্রন্টএন্ডে অ-তুচ্ছ রাষ্ট্রীয় যুক্তি প্রয়োজন। এই ধরনের অ্যাপ্লিকেশনগুলি তৈরি করার সর্বোত্তম উপায় হল একটি আর্কিটেকচার ব্যবহার করা যেখানে Vue শুধুমাত্র পুরো পৃষ্ঠাটিকেই নিয়ন্ত্রণ করে না, কিন্তু পৃষ্ঠাটি পুনরায় লোড না করেই ডেটা আপডেট এবং নেভিগেশন পরিচালনা করে। এই ধরনের অ্যাপ্লিকেশন সাধারণত একটি একক-পৃষ্ঠা অ্যাপ্লিকেশন (SPA) হিসাবে উল্লেখ করা হয়।
Vue কোর লাইব্রেরি এবং comprehensive tooling support আধুনিক SPA তৈরির জন্য আশ্চর্যজনক ডেভেলপমেন্টকারী অভিজ্ঞতা প্রদান করে, যার মধ্যে রয়েছে:
- ক্লায়েন্ট-সাইড রাউটার
- জ্বলন্ত দ্রুত বিল্ড টুল চেইন
- IDE সমর্থন
- ব্রাউজার devtools
- টাইপস্ক্রিপ্ট ইন্টিগ্রেশন
- পরীক্ষার ইউটিলিটি
এপিআই এন্ডপয়েন্ট প্রকাশ করার জন্য SPA-এর সাধারণত ব্যাকএন্ডের প্রয়োজন হয় - কিন্তু আপনি একটি সার্ভার-কেন্দ্রিক ডেভেলপমেন্ট মডেল ধরে রেখে SPA সুবিধা পেতে Inertia.js এর মতো সমাধানগুলির সাথে Vue যুক্ত করতে পারেন।
Fullstack / SSR
বিশুদ্ধ ক্লায়েন্ট-সাইড এসপিএ সমস্যাযুক্ত হয় যখন অ্যাপটি এসইও এবং টাইম-টু-কন্টেন্টের প্রতি সংবেদনশীল হয়। এর কারণ হল ব্রাউজারটি অনেকাংশে খালি HTML পৃষ্ঠা পাবে, এবং কিছু রেন্ডার করার আগে জাভাস্ক্রিপ্ট লোড হওয়া পর্যন্ত অপেক্ষা করতে হবে।
Vue সার্ভারে HTML স্ট্রিংগুলিতে একটি Vue অ্যাপকে "রেন্ডার" করার জন্য প্রথম-শ্রেণীর API প্রদান করে। এটি সার্ভারটিকে ইতিমধ্যেই রেন্ডার করা HTML ফেরত পাঠাতে দেয়, যা জাভাস্ক্রিপ্ট ডাউনলোড করার সময় শেষ ব্যবহারকারীদের অবিলম্বে সামগ্রী দেখতে দেয়। Vue তারপর ক্লায়েন্ট সাইডে অ্যাপ্লিকেশনটিকে "হাইড্রেট" করবে যাতে এটি ইন্টারেক্টিভ হয়। এটিকে সার্ভার-সাইড রেন্ডারিং (SSR) বলা হয় এবং এটি কোর ওয়েব ভাইটাল মেট্রিক্স যেমন Largest Contentful Paint (LCP) কে ব্যাপকভাবে উন্নত করে। /)।
এই দৃষ্টান্তের উপরে নির্মিত উচ্চ-স্তরের Vue-ভিত্তিক ফ্রেমওয়ার্ক রয়েছে, যেমন Nuxt, যা আপনাকে Vue এবং JavaScript ব্যবহার করে একটি ফুলস্ট্যাক অ্যাপ্লিকেশন ডেভেলপমেন্ট করতে দেয়।
JAMStack / SSG
প্রয়োজনীয় ডেটা স্ট্যাটিক থাকলে সার্ভার-সাইড রেন্ডারিং সময়ের আগে করা যেতে পারে। এর মানে হল আমরা একটি সম্পূর্ণ অ্যাপ্লিকেশনকে HTML-এ প্রি-রেন্ডার করতে পারি এবং স্ট্যাটিক ফাইল হিসাবে সেগুলি পরিবেশন করতে পারি। এটি সাইটের কার্যকারিতা উন্নত করে এবং স্থাপনাকে অনেক সহজ করে তোলে কারণ প্রতিটি রিকোয়েস্ট ে আমাদের আর গতিশীলভাবে পৃষ্ঠাগুলি রেন্ডার করার প্রয়োজন নেই৷ Vue এখনও ক্লায়েন্টে সমৃদ্ধ ইন্টারঅ্যাক্টিভিটি প্রদান করতে এই জাতীয় অ্যাপ্লিকেশনগুলিকে হাইড্রেট করতে পারে। এই কৌশলটিকে সাধারণত স্ট্যাটিক-সাইট জেনারেশন (SSG) বলা হয়, JAMStack নামেও পরিচিত।
এসএসজির দুটি স্বাদ রয়েছে: একক-পৃষ্ঠা এবং বহু-পৃষ্ঠা। উভয় ফ্লেভারই সাইটটিকে স্ট্যাটিক HTML-এ প্রি-রেন্ডার করে, পার্থক্য হল:
প্রাথমিক পৃষ্ঠা লোড হওয়ার পরে, একটি একক-পৃষ্ঠা SSG পৃষ্ঠাটিকে একটি SPA-তে "হাইড্রেট" করে৷ এটির জন্য আরও আপফ্রন্ট জেএস পেলোড এবং হাইড্রেশন ব্যয় প্রয়োজন, কিন্তু পরবর্তী নেভিগেশনগুলি দ্রুততর হবে, কারণ পুরো পৃষ্ঠাটি পুনরায় লোড করার পরিবর্তে এটি শুধুমাত্র আংশিকভাবে পৃষ্ঠার সামগ্রী আপডেট করতে হবে৷
একটি বহু-পৃষ্ঠা SSG প্রতিটি নেভিগেশনে একটি নতুন পৃষ্ঠা লোড করে। উল্টো দিকটি হল এটি ন্যূনতম JS পাঠাতে পারে - অথবা পৃষ্ঠাটির কোনো ইন্টারঅ্যাকশনের প্রয়োজন না হলে মোটেও কোনো JS পাঠাতে পারে না! কিছু মাল্টি-পেজ SSG ফ্রেমওয়ার্ক যেমন Astro এছাড়াও "আংশিক হাইড্রেশন" সমর্থন করে - যা আপনাকে স্ট্যাটিক HTML এর মধ্যে ইন্টারেক্টিভ "দ্বীপ" তৈরি করতে Vue কম্পোনেন্ট ব্যবহার করতে দেয়।
আপনি যদি নন-তুচ্ছ ইন্টারঅ্যাক্টিভিটি, গভীর সেশনের দৈর্ঘ্য, বা নেভিগেশন জুড়ে স্থায়ী কম্পোনেন্ট / অবস্থা আশা করেন তবে একক-পৃষ্ঠার SSGগুলি আরও উপযুক্ত। অন্যথায়, মাল্টি-পেজ এসএসজি ভাল পছন্দ হবে।
Vue টিম VitePress নামে একটি স্ট্যাটিক-সাইট জেনারেটরও রক্ষণাবেক্ষণ করে, যা এই ওয়েবসাইটটিকে আপনি এখনই পড়ছেন! VitePress SSG এর উভয় স্বাদ সমর্থন করে। Nuxt এছাড়াও SSG সমর্থন করে। এমনকি আপনি একই Nuxt অ্যাপে বিভিন্ন রুটের জন্য SSR এবং SSG মিশ্রিত করতে পারেন।
Beyond the Web
যদিও Vue প্রাথমিকভাবে ওয়েব অ্যাপ্লিকেশন তৈরির জন্য ডিজাইন করা হয়েছে, এটি কোনোভাবেই শুধু ব্রাউজারে সীমাবদ্ধ নয়। আপনি করতে পারেন: