ওয়েব ফ্রেমওয়ার্ক ইকোসিস্টেমের অগ্রগতি

আরও উন্নত ওয়েব অভিজ্ঞতা তৈরির লক্ষ্যে ক্রোম ওপেন-সোর্স ফ্রেমওয়ার্কগুলোর সাথে যৌথভাবে কাজ করছে।

Houssein Djirdeh

ওয়েব ফ্রেমওয়ার্ক ইকোসিস্টেমে ক্রোম একটি সক্রিয় অবদানকারী এবং ক্রোম ডেভ সামিট ২০১৯-এ আমাদের আলোচনায় আমরা বিগত এক বছরে কী কী কাজ করেছি তা তুলে ধরেছি।

আলোচনাটির বিস্তারিত সারসংক্ষেপ, অতিরিক্ত বিবরণ এবং তথ্যসূত্রের জন্য পড়তে থাকুন।

আমরা কীভাবে ওয়েবকে আরও উন্নত করতে পারি?

ক্রোম টিমের সকলের লক্ষ্য হলো ওয়েবকে আরও উন্নত করা। আমরা ব্রাউজার এপিআই এবং ভি৮—ক্রোমের মূল চালিকাশক্তি জাভাস্ক্রিপ্ট ও ওয়েবঅ্যাসেম্বলি ইঞ্জিন—এর উন্নতির জন্য কাজ করি, যাতে ডেভেলপাররা চমৎকার ওয়েব পেজ তৈরির জন্য প্রয়োজনীয় ফিচারগুলো পান। এছাড়াও, আমরা বিভিন্ন উপায়ে ওপেন-সোর্স টুলিং-এ অবদান রেখে বর্তমানে ব্যবহৃত ওয়েবসাইটগুলোর উন্নতি করার চেষ্টা করি।

বেশিরভাগ ওয়েব ডেভেলপার যথাসম্ভব ওপেন সোর্স টুলের উপর নির্ভর করেন এবং তারা সম্পূর্ণ নিজস্ব পরিকাঠামো তৈরি করতে পছন্দ করেন না। ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক এবং UI লাইব্রেরিগুলো ওপেন-সোর্স ব্যবহারের একটি ক্রমবর্ধমান অংশ তৈরি করে। তিনটি সবচেয়ে জনপ্রিয় ক্লায়েন্ট-সাইড ফ্রেমওয়ার্ক ও লাইব্রেরি— React , Angular এবং Vue— এর তথ্য থেকে দেখা যায় যে:

• MDN-এর প্রথম বার্ষিক ওয়েব ডেভেলপার ও ডিজাইনার সমীক্ষায় অংশগ্রহণকারীদের ৭২% এই ফ্রেমওয়ার্ক ও লাইব্রেরিগুলোর মধ্যে অন্তত একটি ব্যবহার করেন।
• HTTP Archive দ্বারা বিশ্লেষিত শীর্ষ ৫০ লক্ষ URL-এর মধ্যে ৩ লক্ষ ২০ হাজারেরও বেশি সাইট এই ফ্রেমওয়ার্ক ও লাইব্রেরিগুলোর মধ্যে অন্তত একটি ব্যবহার করে।
• ব্যয়িত সময়ের ভিত্তিতে ভাগ করলে, শীর্ষ ১০০টি ইউআরএল-এর মধ্যে ৩০টিই এই ফ্রেমওয়ার্ক ও লাইব্রেরিগুলোর অন্তত একটি ব্যবহার করে। (গবেষণাটি অভ্যন্তরীণ তথ্যের ওপর ভিত্তি করে করা হয়েছে।)

এর মানে হলো, উন্নততর ওপেন-সোর্স টুলিং সরাসরি একটি উন্নততর ওয়েবের জন্ম দিতে পারে এবং একারণেই ক্রোম ইঞ্জিনিয়াররা বাইরের ফ্রেমওয়ার্ক ও লাইব্রেরি নির্মাতাদের সাথে সরাসরি কাজ করা শুরু করেছেন।

ওয়েব ফ্রেমওয়ার্কগুলিতে অবদান

ওয়েব পেজ তৈরি ও কাঠামোবদ্ধ করতে সাধারণত ব্যবহৃত ফ্রেমওয়ার্কগুলো দুটি শ্রেণীতে বিভক্ত:

• UI ফ্রেমওয়ার্ক (বা লাইব্রেরি), যেমন Preact, React, বা Vue, যা একটি অ্যাপ্লিকেশনের ভিউ লেয়ারের উপর নিয়ন্ত্রণ প্রদান করে (উদাহরণস্বরূপ একটি কম্পোনেন্ট মডেলের মাধ্যমে)।
• Next.js, Nuxt.js, এবং Gatsby-এর মতো ওয়েব ফ্রেমওয়ার্কগুলো সার্ভার-সাইড রেন্ডারিং-এর মতো সুনির্দিষ্ট অন্তর্নির্মিত বৈশিষ্ট্যসহ একটি এন্ড-টু-এন্ড সিস্টেম প্রদান করে। এই ফ্রেমওয়ার্কগুলো সাধারণত ভিউ লেয়ারের জন্য একটি UI ফ্রেমওয়ার্ক বা লাইব্রেরি ব্যবহার করে থাকে।

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

এই পোস্টের বাকি অংশে বিভিন্ন ফ্রেমওয়ার্ক ও টুলে সম্প্রতি যুক্ত হওয়া নানা উন্নতি তুলে ধরা হয়েছে, যার মধ্যে ক্রোম টিমের অবদানও রয়েছে।

কৌণিক

অ্যাঙ্গুলার টিম ফ্রেমওয়ার্কটির ভার্সন ৮-এ বেশ কিছু উন্নতি এনেছে:

• নতুন ব্রাউজারগুলোর জন্য অপ্রয়োজনীয় পলিফিল কমাতে ডিফল্টভাবে ডিফারেনশিয়াল লোডিং চালু থাকে ।

• রাউট লেজি-লোডিংয়ের জন্য স্ট্যান্ডার্ড ডাইনামিক ইম্পোর্ট সিনট্যাক্সের সমর্থন।
• ওয়েব ওয়ার্কার মেইন থ্রেড থেকে আলাদা একটি ব্যাকগ্রাউন্ড থ্রেডে অপারেশন চালানোর সুবিধা দেয় ।
• অ্যাঙ্গুলারের নতুন রেন্ডারিং ইঞ্জিন আইভি , যা উন্নততর রি-কম্পাইলেশন পারফরম্যান্স এবং বান্ডেল সাইজ হ্রাস করে, বিদ্যমান প্রজেক্টগুলোর জন্য প্রিভিউ মোডে উপলব্ধ।

আপনি 'অ্যাঙ্গুলারের ভার্সন ৮'- এ এই উন্নতিগুলো সম্পর্কে আরও জানতে পারবেন এবং আগামী বছর আরও ফিচার যুক্ত হওয়ার সাথে সাথে ক্রোম টিম তাদের সাথে ঘনিষ্ঠভাবে কাজ করার জন্য উন্মুখ হয়ে আছে।

নেক্সট.জেএস

Next.js হলো একটি ওয়েব ফ্রেমওয়ার্ক যা ভিউ লেয়ার হিসেবে React ব্যবহার করে। ক্লায়েন্ট-সাইড ফ্রেমওয়ার্ক থেকে অনেক ডেভেলপারের প্রত্যাশিত UI কম্পোনেন্ট মডেল ছাড়াও, Next.js বেশ কিছু বিল্ট-ইন ডিফল্ট ফিচার প্রদান করে:

• ডিফল্ট কোড-স্প্লিটিং সহ রাউটিং
• কম্পাইলেশন এবং বান্ডলিং ( Babel এবং webpack ব্যবহার করে)
• সার্ভার-সাইড রেন্ডারিং
• পৃষ্ঠা-ভিত্তিক ডেটা আনার প্রক্রিয়া
• এনক্যাপসুলেটেড স্টাইলিং ( styled-jsx সহ)

Next.js বান্ডেল সাইজ কমানোর জন্য অপ্টিমাইজ করে, এবং Chrome টিম এমন ক্ষেত্রগুলো শনাক্ত করতে সাহায্য করেছে যেখানে আমরা পারফরম্যান্স আরও উন্নত করতে পারি। আপনি তাদের প্রত্যেকের রিকোয়েস্ট ফর কমেন্টস (RFCs) এবং পুল রিকোয়েস্ট (PRs) দেখে তাদের সম্পর্কে আরও জানতে পারেন:

1. একটি উন্নত ওয়েবপ্যাক চাংকিং কৌশল যা আরও সূক্ষ্ম বান্ডেল তৈরি করে, ফলে একাধিক রুটের মাধ্যমে ফেচ করা ডুপ্লিকেট কোডের পরিমাণ কমে যায় ( RFC , PR )।
2. মডিউল/নোমডিউল প্যাটার্নের মাধ্যমে ডিফারেনশিয়াল লোডিং ব্যবহার করে কোনো কোড পরিবর্তন ছাড়াই Next.js অ্যাপে মোট জাভাস্ক্রিপ্টের পরিমাণ ২০% পর্যন্ত কমানো যায় ( RFC , PR )।
3. ইউজার টাইমিং এপিআই ব্যবহার করে উন্নত পারফরম্যান্স মেট্রিক ট্র্যাকিং ( পিআর )।

আমরা Next.js ব্যবহারের ব্যবহারকারী এবং ডেভেলপার উভয়ের অভিজ্ঞতা উন্নত করার জন্য অন্যান্য বৈশিষ্ট্যগুলোও খতিয়ে দেখছি, যেমন:

• উপাদানগুলির পর্যায়ক্রমিক বা আংশিক হাইড্রেশন আনলক করতে কনকারেন্ট মোড সক্রিয় করা।
• একটি ওয়েবপ্যাক ভিত্তিক কনফরমেন্স সিস্টেম যা আরও ভালো ত্রুটি এবং সতর্কতা তুলে ধরার জন্য সমস্ত সোর্স ফাইল এবং জেনারেটেড অ্যাসেট বিশ্লেষণ করে ( RFC )।

Nuxt.js

Nuxt.js হলো একটি ওয়েব ফ্রেমওয়ার্ক যা Vue.js-কে বিভিন্ন লাইব্রেরির সাথে একত্রিত করে একটি স্বতন্ত্র কাঠামো প্রদান করে। Next.js-এর মতোই, এতে আগে থেকেই অনেক ফিচার অন্তর্ভুক্ত থাকে:

• ডিফল্ট কোড-স্প্লিটিং সহ রাউটিং
• কম্পাইলেশন এবং বান্ডলিং ( Babel এবং webpack ব্যবহার করে)
• সার্ভার-সাইড রেন্ডারিং
• প্রতিটি পৃষ্ঠার জন্য অ্যাসিঙ্ক্রোনাস ডেটা ফেচিং
• ডিফল্ট ডেটা স্টোর ( Vuex )

বিভিন্ন টুলের পারফরম্যান্স উন্নত করার জন্য সরাসরি কাজ করার পাশাপাশি, আমরা আরও ওপেন-সোর্স ফ্রেমওয়ার্ক ও লাইব্রেরিকে আর্থিক সহায়তা দেওয়ার জন্য ফ্রেমওয়ার্ক ফান্ডকে প্রসারিত করেছি। Nuxt.js-কে আমাদের সাম্প্রতিক সমর্থনের ফলে, অদূর ভবিষ্যতে আরও উন্নত সার্ভার-রেন্ডারিং এবং ইমেজ অপটিমাইজেশন সহ কয়েকটি ফিচার যুক্ত হওয়ার কথা রয়েছে।

বাবেল

আমরা উল্লিখিত প্রায় সকল ফ্রেমওয়ার্কের একটি গুরুত্বপূর্ণ অন্তর্নিহিত টুল— Babel-এর —পারফরম্যান্স উন্নত করার ক্ষেত্রেও অগ্রগতি করেছি।

Babel নতুন সিনট্যাক্সযুক্ত কোডকে এমন কোডে কম্পাইল করে যা বিভিন্ন ব্রাউজার বুঝতে পারে। আধুনিক ব্রাউজারগুলোকে টার্গেট করার জন্য @babel/preset-env ব্যবহার করা এখন সাধারণ হয়ে উঠেছে, যেখানে নির্বাচিত সমস্ত এনভায়রনমেন্টের জন্য প্রয়োজনীয় পলিফিলিং নিশ্চিত করতে বিভিন্ন ব্রাউজার টার্গেট নির্দিষ্ট করা যায়। টার্গেট নির্দিষ্ট করার একটি উপায় হলো <script type="module"> ব্যবহার করে ES মডিউল সমর্থনকারী সমস্ত ব্রাউজারকে টার্গেট করা।

এই বিশেষ পরিস্থিতিটির জন্য অপ্টিমাইজ করতে, আমরা একটি একেবারে নতুন প্রিসেট চালু করেছি; @babel/preset-modules । ব্রাউজারের বাগ এড়ানোর জন্য আধুনিক সিনট্যাক্সকে পুরোনো সিনট্যাক্সে রূপান্তর করার পরিবর্তে, preset-modules প্রতিটি নির্দিষ্ট বাগকে তার নিকটতম ত্রুটিহীন আধুনিক সিনট্যাক্সে রূপান্তরিত করে সমাধান করে। এর ফলে এমন আধুনিক কোড তৈরি হয় যা প্রায় অপরিবর্তিতভাবে বেশিরভাগ ব্রাউজারে সরবরাহ করা যায়।

যেসব ডেভেলপার ইতিমধ্যেই preset-env ব্যবহার করেন, তারাও কোনো কিছু না করেই এই অপটিমাইজেশনগুলোর সুবিধা পাবেন, কারণ এগুলো শীঘ্রই preset-env মধ্যেও অন্তর্ভুক্ত করা হবে।

এরপর কী?

উন্নততর অভিজ্ঞতা প্রদানের জন্য ওপেন-সোর্স ফ্রেমওয়ার্ক ও লাইব্রেরির সাথে ঘনিষ্ঠভাবে কাজ করা ক্রোম টিমকে এটা বুঝতে সাহায্য করে যে ব্যবহারকারী এবং ডেভেলপার উভয়ের কাছে মৌলিকভাবে কী গুরুত্বপূর্ণ।

আপনি যদি কোনো ওয়েব ফ্রেমওয়ার্ক, ইউআই লাইব্রেরি, বা যেকোনো ধরনের ওয়েব টুলিং (বান্ডলার, কম্পাইলার, লিন্টার) নিয়ে কাজ করে থাকেন, তাহলে ফ্রেমওয়ার্ক ফান্ডের জন্য আবেদন করুন !