আমি পল কিনলান , এবং আমি ক্রোমের জন্য বিকাশকারী সম্পর্কের নেতৃত্ব দিই৷ আমার কাজের অংশ হিসাবে, আমি উত্সাহী ওয়েব অ্যাডভোকেটদের একটি দলের সাথে কাজ করতে পারি যাদেরকে আমাদের পণ্য এবং প্রকৌশল দলগুলিতে বাস্তব বিশ্বের বিকাশকারীদের দৃষ্টিভঙ্গি নিয়ে আসার দায়িত্ব দেওয়া হয়েছে, বিকাশকারীর সন্তুষ্টি উন্নত করতে উত্তর তারকা মেট্রিক সহ।
আমরা স্বীকার করি যে "সন্তুষ্টি" হল ট্র্যাক এবং উন্নতির জন্য একটি উচ্চাভিলাষী এবং বিষয়ভিত্তিক মেট্রিক, তাই আমরা ক্রমাগত পুনরাবৃত্তি করি কিভাবে আমরা বিকাশকারীর চাহিদার উপর ফোকাস করার সময় প্রভাব ফেলতে পারি৷ একটি নির্দেশিকা নীতি যা আমরা অনুসরণ করতে উপযোগী পেয়েছি তা হল—" ডেভেলপারদের সাথে দেখা করুন তারা যেখানে আছেন "। একটি সাম্প্রতিক স্ট্যাক ওভারফ্লো সমীক্ষায় দেখা গেছে যে 75% ডেভেলপাররা ফ্রেমওয়ার্ক বা কোনও ধরণের বিমূর্ততা ব্যবহার করে রিপোর্ট করে । তাই আমরা নিজেদেরকে জিজ্ঞাসা করছি যে আমরা কীভাবে ডেভেলপারদের সর্বোত্তম পরিষেবা দিই যারা ইতিমধ্যেই তাদের টেক স্ট্যাক সম্পর্কে সিদ্ধান্ত নিয়েছে বা তাদের নিয়ন্ত্রণ নেই? কিভাবে আমরা আরো ওভারহেড যোগ না করে তাদের আরো উত্পাদনশীল করতে পারি?
এখানে Chrome-এ একটি ছোট দল Aurora নামক একটি প্রকল্পে কাজ করছে, যার লক্ষ্য ওয়েব প্ল্যাটফর্মের তৃতীয় পক্ষের বিমূর্ততা যেমন ফ্রেমওয়ার্ক এবং লাইব্রেরির সাথে কাজ করা। তাদের লক্ষ্য হল তাদের গ্রাহকদের-ওয়েব ডেভেলপারদের উপর বোঝা পড়ার পরিবর্তে সরাসরি এই বিমূর্ততায় পারফরম্যান্স লাভ আনতে সাহায্য করা।
ক্রোম ডেভ ইনসাইডারের তৃতীয় সংস্করণের জন্য, আমি প্রজেক্ট অরোরা টিমের অ্যাডি ওসমানী , কারা এরিকসন এবং হোসেইন ডিজিরদেহ- এর সাথে কথা বলেছি তারা কীভাবে এই প্রকল্পের কাছে যাচ্ছে এবং তাদের সামনে কী রয়েছে সে সম্পর্কে আরও জানতে।
ইনসাইডার স্কুপ: তৃতীয় পক্ষের কাঠামোর সাথে কাজ করা
আসুন এই প্রকল্পের উৎপত্তি দিয়ে শুরু করা যাক। কিভাবে এটা সম্পর্কে আসা?
অ্যাডি: অরোরা একটি সাধারণ ধারণা দিয়ে শুরু করেছিলেন: আসুন ডেভেলপারদের সাথে দেখা করি যেখানে তারা আছেন এবং তাদের যেখানে যেতে হবে সেখানে যেতে সহায়তা করুন। উদাহরণ স্বরূপ, পারফরম্যান্স উন্নত করতে তারা যে জনপ্রিয় টেক স্ট্যাক বেছে নিয়েছে তাকে সাহায্য করুন। অনেক অ্যাপ ডেভেলপার আজকাল রিঅ্যাক্ট, ভিউ বা অ্যাঙ্গুলার ব্যবহার করে তৈরি করছে--বা মেটা-ফ্রেমওয়ার্ক* যেমন Next.js এবং Nuxt -- (এবং অবশ্যই অন্য অনেক... Svelte, Lit, Preact, Astro। তালিকাটি চলছে! ) এই বিকাশকারীরা গভীর-বিশেষজ্ঞ হয়ে উঠবে বলে আশা করার পরিবর্তে (উদাহরণস্বরূপ, পারফরম্যান্সে), আমরা নিশ্চিত করতে পারি যে তারা এই স্ট্যাকগুলিতে ডিফল্টভাবে আরও সেরা-অভ্যাসগুলি বেক করে সাফল্যের গর্তে পড়েছে। এইভাবে, ভাল মানের সাইটগুলি শুধুমাত্র ওয়েবের জন্য তৈরির একটি পার্শ্ব-প্রতিক্রিয়া৷
অরোরা অংশীদারিত্বের জন্য কিছু বহুল ব্যবহৃত ফ্রেমওয়ার্ক এবং মেটা-ফ্রেমওয়ার্ক বেছে নেয়, আমরা আমাদের শেখার নথিভুক্ত করি (যেমন কিভাবে একটি ভালো ইমেজ কম্পোনেন্ট তৈরি করতে হয়), যাতে অন্যরা দ্রুত অনুসরণ করতে পারে এবং Chrome এর মাধ্যমে অন্যান্য ফ্রেমওয়ার্ক এবং টুলের মাধ্যমে স্কেল করার চেষ্টা করতে পারে। ফ্রেমওয়ার্ক ফান্ড। যদিও ব্রাউজারের মাধ্যমে ওয়েব অভিজ্ঞতার গুণমান উন্নত করা সম্ভব, আমরা বিশ্বাস করি যে এই লক্ষ্যটি (কিছু ক্ষেত্রে) ফ্রেমওয়ার্কের মাধ্যমেও সম্পন্ন করা যেতে পারে। আমরা আশা করি এটি আমাদের সবার জন্য একটি উচ্চ মানের ওয়েবের লক্ষ্যে আমাদের সাহায্য করবে৷
কারা: এটিকে প্রসারিত করতে, ধারণাটি হল বিকাশকারীর অভিজ্ঞতা উন্নত করে ওয়েবে কর্মক্ষমতা উন্নত করা। পারফরম্যান্সের সর্বোত্তম অনুশীলনগুলি প্রচার করা যথেষ্ট নয়, কারণ সেগুলি প্রায়শই পরিবর্তিত হয় এবং কোম্পানিগুলির পক্ষে তা বজায় রাখা কঠিন। তাদের নিজস্ব ব্যবসায়িক অগ্রাধিকার রয়েছে যা সম্ভবত কর্মক্ষমতার আগে আসবে।
তাই আমাদের চিন্তা হচ্ছে যদি ডেভেলপারদের পারফরম্যান্সের জন্য সীমিত সময় থাকে, তাহলে আসুন তাদের জন্য একটি পারফরম্যান্স অ্যাপ তৈরি করা সহজ (এবং দ্রুত) করা যাক। যদি আমরা জনপ্রিয় ওয়েব ফ্রেমওয়ার্কগুলির সাথে অংশীদারি করি, তাহলে আমরা উচ্চ-স্তরের উপাদান, কনফর্মেন্স সতর্কতা ইত্যাদির মাধ্যমে বিকাশকারীর অভিজ্ঞতা উন্নত করতে বিমূর্ততার সঠিক স্তরে আছি৷ যে কেউ এই জনপ্রিয় সরঞ্জামগুলি ব্যবহার করে তাদের এই সুবিধাগুলিতে অ্যাক্সেস থাকবে৷ এবং তাত্ত্বিকভাবে যদি প্রস্তাবিত পরামর্শ পরিবর্তিত হয়, আমরা হুডের নীচে আমাদের উপাদানগুলি আপডেট করতে পারি এবং বিকাশকারীদের বর্তমান থাকার বিষয়ে চিন্তা করতে হবে না।
হোসেইন: কয়েক বছর পরে সফ্টওয়্যার ইঞ্জিনিয়ারিংয়ে স্যুইচ করার আগে আমি একজন ডেভেলপার অ্যাডভোকেট হিসেবে গুগলে যোগ দিয়েছিলাম। আমার পূর্ববর্তী কাজের বেশিরভাগ ক্ষেত্রেই ওয়েব ডেভেলপারদের দুর্দান্ত ব্যবহারকারীর অভিজ্ঞতা তৈরি করার বিভিন্ন উপায় শেখানো জড়িত। ডেভেলপারদের সাধারণ সমস্যাগুলির বিষয়ে সতর্ক করার জন্য একই নির্দেশিকাগুলির বিভিন্নতাগুলি বারবার প্রদান করা হয়েছিল যা সম্ভবত তাদের সাইটের কার্যকারিতা এবং ব্যবহারযোগ্যতাকে প্রভাবিত করবে৷ যখন আমরা অরোরা প্রকল্পের কথা ভাবতে শুরু করি, তখন আমরা নিজেদেরকে জিজ্ঞাসা করি: আমরা কি এমন একটি দিকে যেতে পারি যেখানে আমাদের কখনই ডেভেলপারদের বলতে হবে না কী করতে হবে কারণ তাদের টুলচেইন তাদের জন্য সবকিছুর যত্ন নেয়?
আমি যদি সঠিকভাবে বুঝতে পারি, আপনি কি ছয় ইঞ্জিনিয়ারদের একটি দল? আমি বাজি ধরছি আপনি প্রতিটি সম্ভাব্য কাঠামো বা লাইব্রেরির সাথে কাজ করতে পারবেন না। তাহলে আপনি কিভাবে বাছাই করবেন কার সাথে কাজ করবেন? এবং তারা কারা?
Addy: ওয়েব অনেক উপায়ে বন্য বন্য পশ্চিম মত. আপনি যা চান তা ফ্রেমওয়ার্ক, বান্ডলার, লাইব্রেরি এবং তৃতীয় পক্ষ বেছে নিতে পারেন। এটি জটিলতার বেশ কয়েকটি স্তর প্রবর্তন করে যা ভাল বা খারাপ পারফরম্যান্সে অবদান রাখতে পারে। পারফরম্যান্সের উপর সুই সরানোর সেরা উপায়গুলির মধ্যে একটি হল সেই স্তরগুলিকে মতামত দেওয়া এবং সেগুলিতে আরও মতামত যুক্ত করা আরামদায়ক খুঁজে পাওয়া।
উদাহরণ স্বরূপ, ওয়েব ফ্রেমওয়ার্ক (Next.js, Nuxt.js, এবং একটি পরিমাণে Angular) একটি হ্যান্ড-রোলড সমাধানের চেয়ে বেশি মতামত এবং ডিফল্ট তৈরি করার চেষ্টা করে। এই একটি কারণ আমরা তাদের সাথে কাজ করতে ভালোবাসি! আরও ভাল কোর ওয়েব ভাইটালগুলির জন্য ছবি, ফন্ট এবং স্ক্রিপ্টগুলি কীভাবে লোড করা যায় তার জন্য শক্তিশালী ডিফল্ট থাকা এই মডেলগুলিতে অর্থপূর্ণ।
আধুনিক সর্বোত্তম-অভ্যাসগুলি কোথায় কাজ করে বা একটি পুনর্বিবেচনার প্রয়োজন হতে পারে তা নিশ্চিত করার জন্য এটি একটি চমৎকার উপায় হিসাবে কাজ করে এবং অপ্টিমাইজেশান সমস্যাগুলি সমাধান করার উপায় সম্পর্কে সমগ্র বাস্তুতন্ত্রকে অবহিত করতে সহায়তা করতে পারে।
কারা: বাস্তবসম্মতভাবে, আমাদের জনপ্রিয়তাও বিবেচনা করতে হবে। আমরা যদি ওয়েবে সবচেয়ে বেশি সম্ভাব্য প্রভাব ফেলতে চাই, তাহলে এমন ফ্রেমওয়ার্ক এবং লাইব্রেরির সাথে কাজ করা যেখানে ডেভেলপারদের একটি বৃহৎ বিদ্যমান সম্প্রদায় রয়েছে আদর্শ। আমরা এইভাবে আরও বিকাশকারী এবং আরও অ্যাপের কাছে পৌঁছতে পারি। কিন্তু এটা শুধু জনপ্রিয়তা হতে পারে না। শেষ পর্যন্ত, এটি জনপ্রিয়তার একটি ছেদ, একটি লাইব্রেরি কতটা মতামতপূর্ণ, এবং উপলব্ধ বৈশিষ্ট্য সেটের সাথে আমরা কাজ করতে পারি।
উদাহরণস্বরূপ, যদি আমরা শুধুমাত্র জনপ্রিয়তার দিকে তাকাই, তাহলে React, Vue এবং Angular হল "বিগ থ্রি" বিবেচনা করা। কিন্তু আমরা Next.js, Nuxt, এবং Angular এর সাথে সবচেয়ে বেশি কাজ করি। এর কারণ হল React এবং Vue-এর মতো ভিউ লাইব্রেরিগুলি বেশিরভাগই রেন্ডারিংয়ের উপর ফোকাস করে, তাই আমরা সরাসরি তাদের মধ্যে যে সমস্ত বৈশিষ্ট্য চাই তা তৈরি করা অসম্ভব। তাই আমরা তাদের উপরে নির্মিত মতামতযুক্ত মেটা-ফ্রেমওয়ার্কগুলির সাথে আরও ঘনিষ্ঠভাবে কাজ করি: Next.js এবং Nuxt। বিমূর্ততার এই স্তরে, আমরা অন্তর্নির্মিত উপাদানগুলি তৈরি করতে পারি। তাদের বিল্ট-ইন সার্ভারও রয়েছে, তাই আমরা সার্ভার-সাইড অপ্টিমাইজেশন অন্তর্ভুক্ত করতে পারি।
আপনি লক্ষ্য করতে পারেন যে কৌণিক গভীর অংশীদারিত্বের তালিকায় ছিল, কিন্তু এটি একটি মেটা-ফ্রেমওয়ার্ক নয়। কৌণিক কিছুটা বিশেষ ক্ষেত্রে কারণ এটি বেশ জনপ্রিয়, কিন্তু প্রতিক্রিয়া এবং Vue এর মতো পরিপূরক মেটা-ফ্রেমওয়ার্ক নেই। তাই আমরা সরাসরি তাদের সাথে কাজ করি এবং যেখানে সম্ভব তাদের CLI এর মাধ্যমে বৈশিষ্ট্যগুলি অবদান রাখি।
এবং এটি লক্ষণীয় যে গ্যাটসবির মতো অন্যান্য প্রকল্পগুলির সাথে আমাদের বেশ কয়েকটি চলমান সম্পর্ক রয়েছে যেখানে আমরা ডিজাইনে কিছুটা নিয়মিত সিঙ্ক করি কিন্তু সক্রিয়ভাবে কোডে অবদান রাখি না।
তাই এই অনুশীলনের মত চেহারা কি? এই সমস্যা সমাধানের জন্য আপনার পদ্ধতি কি ছিল?
কারা: অনুশীলনে, আমাদের কাছে কয়েকটি কাঠামো রয়েছে যা আমরা ঘনিষ্ঠভাবে সহযোগিতা করি। আমরা সেই ফ্রেমওয়ার্ক ব্যবহার করে অ্যাপগুলি প্রোফাইল করতে কিছু সময় নেব এবং সাধারণ কর্মক্ষমতা ব্যথার পয়েন্টগুলি বের করব। তারপরে আমরা সেই ব্যথার পয়েন্টগুলি সমাধান করার জন্য পরীক্ষামূলক বৈশিষ্ট্যগুলি ডিজাইন করতে ফ্রেমওয়ার্ক টিমের সাথে কাজ করি এবং সেগুলি বাস্তবায়নের জন্য সরাসরি OSS রেপোতে কোড অবদান করি।
কার্যক্ষমতার প্রভাব আমরা যা ভবিষ্যদ্বাণী করেছি তা যাচাই করা আমাদের জন্য সত্যিই গুরুত্বপূর্ণ, তাই আমরা উৎপাদনে পারফরম্যান্স পরীক্ষা পরিচালনা করার জন্য বহিরাগত সংস্থাগুলির সাথেও কাজ করি। যদি ফলাফলগুলি উত্সাহজনক হয়, আমরা বৈশিষ্ট্যটিকে "স্থিতিশীল" হতে সাহায্য করব এবং সম্ভাব্যভাবে এটিকে একটি ডিফল্ট করে তুলব৷
এই সব আপনি এটি শব্দ করছেন হিসাবে সহজ হতে পারে না. আপনি এ পর্যন্ত কিছু চ্যালেঞ্জ বা শেখার কী ছিল?
হোসেইন: একটি গুরুত্বপূর্ণ জিনিস যা আমরা আমাদের সর্বোত্তম ক্ষমতায় নেভিগেট করার চেষ্টা করি তা হল জনপ্রিয় ওপেন-সোর্স রিপোজিটরিগুলিতে অবদান রাখা যার অনেকগুলি প্রতিযোগিতামূলক অগ্রাধিকার রয়েছে। শুধুমাত্র আমরা Google টিম হওয়ার অর্থ এই নয় যে আমাদের বৈশিষ্ট্যগুলিকে অগ্রাধিকার দেওয়া হবে, তাই আমরা কারও পায়ের আঙুলে না গিয়ে নতুন বৈশিষ্ট্যগুলি প্রস্তাব এবং শিপিংয়ের সাধারণ প্রক্রিয়ার সাথে সারিবদ্ধ করার জন্য যথাসাধ্য চেষ্টা করি৷ Next.js, Nuxt, এবং কৌণিক ইকোসিস্টেমগুলিতে গ্রহণযোগ্য রক্ষণাবেক্ষণকারীদের সাথে কাজ করার জন্য আমরা খুব ভাগ্যবান। আমরা কৃতজ্ঞ যে তারা ওয়েব ইকোসিস্টেম সম্পর্কে আমাদের উদ্বেগগুলি শোনার জন্য উন্মুক্ত এবং একাধিক উপায়ে আমাদের সাথে সহযোগিতা করতে ইচ্ছুক।
আমরা যে অনেক ফ্রেমওয়ার্ক নিয়ে কাজ করি, আমাদের সামগ্রিক মিশন একই; কীভাবে বিকাশকারীরা একটি দুর্দান্ত বিকাশকারী অভিজ্ঞতা উপভোগ করার পাশাপাশি বাক্সের বাইরে একটি উন্নত ব্যবহারকারীর অভিজ্ঞতা পেতে পারে? আমরা সচেতন এবং সম্মান করি যে শত শত, যদি হাজার হাজার নয়, সম্প্রদায়ের অবদানকারী এবং ফ্রেমওয়ার্ক রক্ষণাবেক্ষণকারী প্রত্যেকে একে অপরের সাথে ছেদ করে এমন বিভিন্ন প্রকল্পে কাজ করে।
কারা: উপরন্তু, যেহেতু আমরা পারফরম্যান্সের প্রভাব যাচাই করা এবং ডেটার উপর ভিত্তি করে কাজ করার বিষয়ে চিন্তা করি, প্রক্রিয়াটি একটু বেশি সময় নেয়। আমরা অজানা অঞ্চলে আছি, তাই কখনও কখনও আমরা এমন একটি অপ্টিমাইজেশন নিয়ে পরীক্ষা করব যা প্যান আউট হয় না এবং আমরা একটি পরিকল্পিত বৈশিষ্ট্য তৈরি করতে পারি না। এমনকি যখন একটি বৈশিষ্ট্য প্যান আউট হয়ে যায়, ভেট পারফরম্যান্সের জন্য সেই কয়েকটি অতিরিক্ত পদক্ষেপগুলি সময় নেয় এবং সময়সীমা প্রসারিত করে।
আমাদের বৈশিষ্ট্যগুলি পরীক্ষা করার জন্য উত্পাদন অংশীদারদের সন্ধান করাও চ্যালেঞ্জিং হতে পারে। পূর্বে উল্লিখিত হিসাবে, তারা ব্যবসা এবং তাদের নিজস্ব অগ্রাধিকার আছে, তাই তাদের জন্য নতুন উদ্যোগে মাপসই করা চ্যালেঞ্জ হতে পারে যদি তারা বিদ্যমান প্রকল্পগুলির সাথে ভালভাবে সারিবদ্ধ না হয় যা প্রথমে আসতে হবে। উপরন্তু, সাহায্য করতে আগ্রহী কোম্পানিগুলি ইতিমধ্যেই কার্য সম্পাদনে বিনিয়োগ করার জন্য সময় নিচ্ছে, তাই তারা সত্যিই আমাদের লক্ষ্য দর্শক নয়। আমরা সম্প্রদায়ের বৃহৎ গোষ্ঠীর কাছ থেকে প্রতিক্রিয়া সংগ্রহ করার চেষ্টা করছি যারা পারফরম্যান্সে বিনিয়োগ করতে পারে না , তবে তারা আমাদের কাছে পৌঁছানোর সম্ভাবনা কম।
এগিয়ে চলুন, আপনি কি ধরনের অপ্টিমাইজেশানের উপর ফোকাস করছেন?
Houssein: হাজার হাজার অ্যাপ্লিকেশন বিশ্লেষণ করার পরে, আমরা দেখতে পেয়েছি যে সবচেয়ে বড় পারফরম্যান্স সমস্যাগুলি সাধারণত ফ্রেমওয়ার্কের পরিবর্তে অ্যাপ্লিকেশন কোডের অ্যান্টি-প্যাটার্নের কারণে হয়। উদাহরণস্বরূপ, অপ্রয়োজনীয়ভাবে বড় ছবি পাঠানো, কাস্টম ফন্টগুলি খুব দেরিতে লোড করা, অনেকগুলি তৃতীয় পক্ষের অনুরোধ আনা যা মূল থ্রেডকে ব্লক করে, এবং কীভাবে অ্যাসিঙ্ক্রোনাস বিষয়বস্তু পৃষ্ঠায় অন্য জিনিসগুলিকে পরিবর্তন করতে পারে তা পরিচালনা না করা। এগুলি এমন সমস্ত সমস্যা যা আপনি যে সরঞ্জামটি ব্যবহার করেন তা নির্বিশেষে উঠতে পারে, তাই আমরা ভেবেছিলাম- আমরা কি কিছু ডিফল্ট অপ্টিমাইজেশানে বেক করতে পারি যা সেগুলিকে ভালভাবে পরিচালনা করে তবে একটি ঝরঝরে বিকাশকারী অভিজ্ঞতার সাথে যা তাদের কাঠামোর টুলিংয়ে সুন্দরভাবে ফিট করে?
এই চিন্তার সাথে, আমরা প্রেরণ করেছি:
- Next.js ইমেজ কম্পোনেন্ট ।
- Next.js স্ক্রিপ্ট উপাদান ।
- Next.js এর বিল্ড প্রক্রিয়ায় স্বয়ংক্রিয় ফন্ট ইনলাইনিং ।
- কৌণিক চিত্র নির্দেশিকা ।
- ডেভেলপারদের কর্মযোগ্য নির্দেশিকা প্রদান করতে Next.js কনফর্মেন্স ESLint প্লাগইন ।
আমাদের কাজ অনুরূপ অপ্টিমাইজেশান বাস্তবায়নের জন্য অন্যান্য কাঠামো এবং সরঞ্জামগুলিকে অনুপ্রাণিত করেছে৷ এটি অন্তর্ভুক্ত, কিন্তু সীমাবদ্ধ নয়:
- Nuxt ইমেজ মডিউল
- Nuxt ফন্ট মেট্রিক ওভাররাইড করে
- Nuxt স্ক্রিপ্ট উপাদান ( প্রগতিতে )
- গ্যাটসবি স্ক্রিপ্ট উপাদান
আপনি এই খেলোয়াড়দের কিছু সঙ্গে আপনার কাজের কিছু ইতিবাচক ফলাফল শেয়ার করতে পারেন?
Houssein: আমাদের পাঠানো অপ্টিমাইজেশনের কারণে অনেক সাইট পারফরম্যান্সের উন্নতি দেখেছে। আমার প্রিয় উদাহরণগুলির মধ্যে একটি হল Leboncoin , যারা Next.js ইমেজ কম্পোনেন্টে স্যুইচ করার পরে তাদের LCP 2.4s থেকে 1.7s এ কমিয়েছে । বর্তমানে আরও অনেকগুলি পরীক্ষা-নিরীক্ষা এবং পরীক্ষার পর্যায়ে রয়েছে এবং আমরা এখানে তাদের কাছ থেকে শেখা এবং জয়গুলি ভাগ করে নেওয়া চালিয়ে যাব৷
ঠিক আছে, আমি বুঝতে পেরেছি যে আপনার ফোকাস সেইগুলির দিকেই রয়েছে যেগুলির সর্বাধিক জনপ্রিয়তা রয়েছে, তবে এমন উপায় আছে যা অন্য ফ্রেমওয়ার্ক বা লাইব্রেরিগুলি যাদের সাথে আপনি সক্রিয়ভাবে কাজ করছেন না তারাও উপকৃত হবে?
Addy: অরোরা যে পারফরম্যান্স অপ্টিমাইজেশানগুলিকে সহযোগিতা করে তার অনেকগুলি যে কোনও কাঠামোর দ্বারা প্রতিলিপি করা যেতে পারে৷ উদাহরণস্বরূপ, আমাদের চিত্র বা স্ক্রিপ্ট উপাদান প্রচেষ্টার পিছনে একবার দেখুন, তারা প্রায়শই বিদ্যমান সেরা অনুশীলনগুলির একটি সেট কোড করে। আমরা এই ধরনের উপাদান নির্মাণের "কীভাবে" নথিভুক্ত করার চেষ্টা করি এবং প্রতিটি কাঠামোতে সেগুলি কেমন দেখায়। আশা করি ধারণাটি অনুলিপি করার জন্য এটি একটি ভাল শুরু।
আমরা একটি ইকোসিস্টেম (উদাহরণস্বরূপ, প্রতিক্রিয়া এবং Next.js) থেকে শিক্ষা নেওয়া এবং সেগুলিকে অন্যদের কাছে নিয়ে আসার কিছু ভাল সাফল্য দেখেছি। উদাহরণস্বরূপ, নতুন কৌণিক চিত্র নির্দেশিকা (আমাদের শিক্ষার উপর নির্মিত Next.js ইমেজ কম্পোনেন্ট তৈরি করা হয়েছে) বা গ্যাটসবি দানাদার জাভাস্ক্রিপ্ট খণ্ডে আমাদের পদ্ধতির শিপিং।
একই সময়ে, আমরা বুঝি যে প্রত্যেক ফ্রেমওয়ার্কের ব্যান্ডউইথ বা অনুরূপ কর্মক্ষমতা বৈশিষ্ট্য তৈরি করার জন্য অবদানকারীদের জন্য তহবিল থাকবে না বা অন্য অপ্টিমাইজেশানগুলিতে বিনিয়োগ করবে যা তারা তাদের ব্যবহারকারীদের জন্য গুরুত্বপূর্ণ বলে মনে করে। ক্রোম ওয়েব ফ্রেমওয়ার্কস ফান্ড হল আমাদের জাভাস্ক্রিপ্ট ইকোসিস্টেমে পারফরম্যান্সের কাজ স্পনসর করার একটি উপায় যাতে প্রকল্পগুলিকে তাদের অবদানকারীদের অর্থ প্রদান করতে এবং ইকোসিস্টেমে আরও স্কেল করতে পারফরম্যান্স কাজকে সক্ষম করতে সক্ষম হয়৷
তাহলে আপনার দলের জন্য রোডম্যাপে কী আছে?
কারা: আমাদের কাছে অনেক উত্তেজনাপূর্ণ প্রকল্প আসছে! কিছু হাইলাইট:
- ফন্ট-সম্পর্কিত CLS হ্রাস করা: যখন একটি ওয়েব ফন্ট লোড করা হয় এবং ফলব্যাক ফন্ট প্রতিস্থাপন করা হয় তখন লেআউট পরিবর্তন দেখা মোটামুটি সাধারণ। আমরা Next.js-এ ডিফল্টরূপে ফন্ট-সম্পর্কিত CLS কমাতে ফন্ট মেট্রিক ওভাররাইড এবং "সাইজ-অ্যাডজাস্ট" প্রপার্টি ব্যবহার করে অন্বেষণ করছি। আমরা এই বিষয়ে Nuxt টিমের সাথেও পরামর্শ করছি এবং আগামী বছর এই ধারণাটিকে আরও কাঠামোতে প্রসারিত করার পরিকল্পনা করছি।
- ডিবাগিং INP: এখন যেহেতু ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) মেট্রিক প্রকাশ করা হয়েছে, আমরা তাদের সম্প্রদায়ের জন্য INP সমস্যার সবচেয়ে সাধারণ মূল কারণগুলি তদন্ত করতে এবং সমাধানের পরামর্শ দেওয়ার জন্য ফ্রেমওয়ার্কের সাথে কাজ করছি৷ আমরা এই বিষয়ে অ্যাঙ্গুলারের সাথে ঘনিষ্ঠভাবে অংশীদারিত্ব করছি এবং শীঘ্রই ভাগ করার জন্য কিছু ফলাফল আশা করছি!
- সাধারণ 3P স্ক্রিপ্ট অপ্টিমাইজ করা: ভুল সময়ে তৃতীয় পক্ষের স্ক্রিপ্ট লোড করা কর্মক্ষমতার উপর যথেষ্ট নেতিবাচক প্রভাব ফেলতে পারে। যেহেতু কিছু 3Ps রয়েছে যেগুলি খুব সাধারণ, তাই আমরা এইগুলির জন্য কিছু মোড়ক অফার করতে পারি কিনা তা নিশ্চিত করার জন্য সেগুলি ফ্রেমওয়ার্কের সাথে সর্বোত্তমভাবে লোড করা হয়েছে এবং মূল থ্রেডটিকে ব্লক না করে তা নিশ্চিত করার জন্য আমরা তা দেখছি। আমরা এই তদন্তের জন্য একটি সূচনা পয়েন্ট হিসাবে তৈরি করা Next.js স্ক্রিপ্ট উপাদানটি ব্যবহার করছি।
বিকাশকারীরা এই সাইটে আমাদের অগ্রগতি অনুসরণ করতে পারেন।
খবরে
আমি সাইন অফ করার আগে, আমি আপনাকে Google-এর মধ্যে ঘটছে এমন ফ্রেমওয়ার্কের জগতের কিছু আকর্ষণীয় আপডেট দিয়ে যেতে চাই।
জুলাই মাসে, Chrome টিম ফ্রেমওয়ার্কস এবং টুলস ফান্ডের জন্য $500K এর সর্বশেষ রাউন্ডের তহবিল ঘোষণা করেছে যা ওয়েবে কর্মক্ষমতা, ব্যবহারকারী-অভিজ্ঞতা এবং বিকাশকারী-অভিজ্ঞতা উন্নত করতে সাহায্য করার লক্ষ্যে অর্থায়ন প্রকল্পগুলিতে ফোকাস করে৷ ভবিষ্যতের তহবিল নতুন প্রকল্প বিবেচনা করবে তাই আপনার অনুরোধ জমা দিতে মনে রাখবেন।
এবং, অবশ্যই, সম্প্রদায়ে প্রচুর আশ্চর্যজনক ঘটনা ঘটছে। ইকোসিস্টেমটি Deno's Fresh এর মত নতুন ফ্রেমওয়ার্ক এবং Svelte-এর অনবোর্ডিং টিউটোরিয়ালের মত অসাধারণ অভিজ্ঞতার সাথে পরিপক্ক যেটি শুধুমাত্র একটি ইন-ব্রাউজার ডেমোই নয় বরং ব্রাউজারে নেটিভভাবে Node.js চালানোর জন্য ওয়েব কন্টেইনার API ব্যবহার করে। এত ভালো জিনিস!
আমি ইকোসিস্টেমকে একত্রিত হতে দেখে, ব্রাউজারে যা সম্ভব তা ঠেলে দিতে এবং ডেভেলপারদের সকলের জন্য কাজ করে এমন পণ্য তৈরি করতে সাহায্য করে দেখে আমি সত্যিকারের উত্তেজিত হয়েছি। ওয়েব ডেভেলপার হওয়ার জন্য এটি একটি উত্তেজনাপূর্ণ সময়।
পরবর্তী ইনসাইডার পর্যন্ত, Hwyl fawr.
ক্রোম ডেভ ইনসাইডারের এই সংস্করণটি সম্পর্কে আপনি কী ভেবেছিলেন? আপনার মতামত শেয়ার করুন .