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

আরও ভালো ওয়েবের দিকে কাজ করার জন্য Chrome ওপেন সোর্স ফ্রেমওয়ার্কের সাথে সহযোগিতা করছে

Houssein Djirdeh

Chrome হল ওয়েব ফ্রেমওয়ার্ক ইকোসিস্টেমের একটি সক্রিয় অবদানকারী এবং Chrome Dev Summit 2019-এ আমাদের আলোচনা আমরা গত বছরে কী কাজ করেছি তা কভার করে।

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

আমরা কীভাবে ওয়েবকে আরও ভালো করতে পারি?

Chrome টিমের প্রত্যেকের লক্ষ্য হল ওয়েবকে আরও ভালো করা। আমরা ব্রাউজার API এবং V8-- মূল JavaScript এবং WebAssembly ইঞ্জিন যা Chrome-কে শক্তি দেয়--কে উন্নত করার জন্য কাজ করি যাতে বিকাশকারীরা এমন বৈশিষ্ট্যগুলি দিয়ে সজ্জিত থাকে যা তাদের দুর্দান্ত ওয়েব পৃষ্ঠাগুলি তৈরি করতে সহায়তা করে৷ আমরা বিভিন্ন উপায়ে ওপেন-সোর্স টুলিং-এ অবদান রেখে আজ ইতিমধ্যেই তৈরি করা ওয়েবসাইটগুলিকে উন্নত করার চেষ্টা করি।

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

• MDN-এর প্রথম বার্ষিক ওয়েব ডেভেলপার এবং ডিজাইনার সমীক্ষায় অংশগ্রহণকারীদের 72% এই ফ্রেমওয়ার্ক এবং লাইব্রেরিগুলির মধ্যে অন্তত একটি ব্যবহার করে৷
• HTTP আর্কাইভ দ্বারা বিশ্লেষিত শীর্ষ 5 মিলিয়ন ইউআরএল-এর মধ্যে 320,000-এর বেশি সাইট এই ফ্রেমওয়ার্ক এবং লাইব্রেরিগুলির মধ্যে অন্তত একটি ব্যবহার করে।
• সময় কাটানো অনুসারে গোষ্ঠীবদ্ধ হলে, শীর্ষ 100টি URL এর মধ্যে 30টি এই ফ্রেমওয়ার্ক এবং লাইব্রেরিগুলির মধ্যে অন্তত একটি ব্যবহার করে৷ (গবেষণা অভ্যন্তরীণ ডেটাতে করা হয়েছিল।)

এর মানে হল যে আরও ভাল ওপেন-সোর্স টুলিং সরাসরি একটি ভাল ওয়েবে পরিণত হতে পারে এবং সেই কারণেই ক্রোম ইঞ্জিনিয়াররা সরাসরি বহিরাগত কাঠামো এবং লাইব্রেরি লেখকদের সাথে কাজ শুরু করেছে৷

ওয়েব ফ্রেমওয়ার্ক অবদান

ওয়েব পৃষ্ঠাগুলি তৈরি এবং গঠন করতে সাধারণত ব্যবহৃত ফ্রেমওয়ার্ক দুটি বিভাগে পড়ে:

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

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

এই পোস্টের বাকি অংশটি Chrome টিমের অবদান সহ বিভিন্ন ফ্রেমওয়ার্ক এবং সরঞ্জামগুলিতে সম্প্রতি অবতরণ করা অনেক উন্নতি হাইলাইট করে৷

কৌণিক

কৌণিক দল ফ্রেমওয়ার্কের 8 সংস্করণে বেশ কয়েকটি উন্নতি প্রেরণ করেছে:

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

ডিফারেনশিয়াল বিল্ড সহ angular.io-এর জন্য বান্ডিলের আকার হ্রাস ( কৌণিকের সংস্করণ 8 থেকে)

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

আপনি "কৌণিকের সংস্করণ 8" -এ এই উন্নতিগুলি সম্পর্কে আরও জানতে পারবেন এবং Chrome টিম আগামী বছরে তাদের সাথে ঘনিষ্ঠভাবে কাজ করার জন্য অপেক্ষা করছে কারণ আরও বৈশিষ্ট্যগুলি উপস্থিত হবে৷

পরবর্তী.js

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

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

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

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

Barnebys.com , প্রাচীন জিনিসপত্র এবং সংগ্রহযোগ্য জিনিসের জন্য একটি বড় সার্চ ইঞ্জিন, দানাদার খণ্ডন সক্ষম করার পরে মোট জাভাস্ক্রিপ্টে 23% হ্রাস পেয়েছে

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

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

Next.js (প্রোটোটাইপ) এ কনফর্মেন্স বিল্ড ত্রুটির একটি উদাহরণ

Nuxt.js

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

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

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

দ্রষ্টব্য: কাঠামো তহবিল তাদের কর্মক্ষমতা উন্নত করার লক্ষ্যে বিভিন্ন কাঠামো এবং গ্রন্থাগারের প্রচেষ্টাকে ত্বরান্বিত করে। আপনি যদি একটি ওপেন-সোর্স টুলে কাজ করেন এবং সমর্থনের প্রয়োজন হয়, অনুগ্রহ করে আবেদন করুন !

বাবেল

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

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

দ্রষ্টব্য: যে ব্রাউজারগুলিতে তাদের প্রয়োজন নেই সেগুলিতে পাঠানো পলিফিল কোডগুলিকে ন্যূনতম করার জন্য কীভাবে ES মডিউলগুলি ব্যবহার করতে হয় সে সম্পর্কে আরও জানতে, দ্রুত পৃষ্ঠা লোডের জন্য আধুনিক ব্রাউজারগুলিতে আধুনিক কোড পরিবেশন করুন।

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

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

এরপর কি?

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

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