Chrome টিমে, আমরা ব্যবহারকারীর অভিজ্ঞতা এবং একটি সমৃদ্ধিশীল ওয়েব ইকোসিস্টেম সম্পর্কে যত্নশীল। আমরা চাই যে ব্যবহারকারীরা ওয়েবে সর্বোত্তম সম্ভাব্য অভিজ্ঞতা লাভ করুক, শুধুমাত্র স্ট্যাটিক নথির সাথে নয়, তারা যখন সমৃদ্ধ, উচ্চ-ইন্টারেক্টিভ অ্যাপ্লিকেশন ব্যবহার করে তখনও।
ওপেন-সোর্স টুলস এবং ফ্রেমওয়ার্কগুলি ডেভেলপারদের ওয়েবের জন্য আধুনিক অ্যাপ তৈরি করতে সক্ষম করার ক্ষেত্রে একটি বড় ভূমিকা পালন করে, পাশাপাশি ভাল ডেভেলপার অভিজ্ঞতাগুলিকে সমর্থন করে৷ এই ফ্রেমওয়ার্ক এবং সরঞ্জামগুলি সমস্ত আকারের সংস্থাগুলিকে ক্ষমতায়ন করে, সেইসাথে ওয়েবের জন্য ব্যক্তিদের তৈরি করে৷
আমরা বিশ্বাস করি যে কার্যক্ষমতা, অ্যাক্সেসযোগ্যতা, নিরাপত্তা, মোবাইল প্রস্তুতির মতো গুরুত্বপূর্ণ গুণগত দিকগুলির সাথে বিকাশকারীদের সাহায্য করার ক্ষেত্রে কাঠামোগুলি একটি বড় ভূমিকা পালন করতে পারে। প্রতিটি বিকাশকারী এবং সাইটের মালিককে এই ক্ষেত্রে বিশেষজ্ঞ হতে এবং ক্রমাগত পরিবর্তিত সর্বোত্তম অনুশীলনের সাথে তাল মিলিয়ে চলতে বলার পরিবর্তে, ফ্রেমওয়ার্ক বেকড-ইন সমাধানগুলির সাথে এগুলিকে সমর্থন করতে পারে। এটি বিকাশকারীদের ক্ষমতায়ন করে এবং তাদের পণ্যের বৈশিষ্ট্যগুলি তৈরিতে ফোকাস করতে সক্ষম করে৷
সংক্ষেপে, আমাদের দৃষ্টিভঙ্গি হল যে UX মানের একটি উচ্চ বার ওয়েব তৈরির একটি পার্শ্ব প্রতিক্রিয়া হয়ে ওঠে।
অরোরা: ক্রোম এবং ওপেন সোর্স ওয়েব ফ্রেমওয়ার্ক এবং টুলের মধ্যে একটি সহযোগিতা
প্রায় দুই বছর ধরে, আমরা কিছু জনপ্রিয় ফ্রেমওয়ার্ক যেমন Next.js, Nuxt এবং Angular এর সাথে কাজ করেছি, ওয়েব পারফরম্যান্স উন্নত করার জন্য কাজ করছি। আমরা জনপ্রিয় টুলস এবং লাইব্রেরি যেমন Vue, ESLint, ওয়েবপ্যাকের জন্য অর্থায়ন করেছি। আজ, আমরা এই প্রচেষ্টার একটি নাম দিচ্ছি - অরোরা ।
একটি অরোরা হল একটি প্রাকৃতিক আলোর প্রদর্শন যা আকাশে জ্বলজ্বল করে। যেহেতু আমরা ফ্রেমওয়ার্কের সাহায্যে তৈরি ব্যবহারকারীর অভিজ্ঞতাকে ঝকঝকে এবং উজ্জ্বল করার চেষ্টা করছি, আমরা ভেবেছিলাম এই নামটি একটি উপযুক্ত পছন্দ।
আগামী মাসগুলিতে, আমরা অরোরা সম্পর্কে আরও অনেক বিশদ ভাগ করব৷ এটি ক্রোম ইঞ্জিনিয়ারদের একটি ছোট দল (অভ্যন্তরীণ কোডনাম ওয়েবএসডিকে) এবং ফ্রেমওয়ার্ক লেখকদের মধ্যে একটি সহযোগিতা। আমাদের লক্ষ্য হল আপনি যে ব্রাউজারে রেন্ডার করছেন তা নির্বিশেষে প্রোডাকশন অ্যাপের জন্য সম্ভাব্য সর্বোত্তম ব্যবহারকারীর অভিজ্ঞতা প্রদান করা।
আমাদের কৌশল কি?
Google-এ, Google অনুসন্ধান, মানচিত্র, চিত্র অনুসন্ধান, Google ফটো ইত্যাদির মতো বড় আকারের ওয়েব অ্যাপ্লিকেশন তৈরি এবং বজায় রাখার জন্য ফ্রেমওয়ার্ক এবং সরঞ্জামগুলি ব্যবহার করার সময় আমরা অনেক কিছু শিখেছি৷ আমরা আবিষ্কার করেছি কীভাবে ফ্রেমওয়ার্কগুলি অনুমানযোগ্য অ্যাপের গুণমানে গুরুত্বপূর্ণ ভূমিকা পালন করতে পারে শক্তিশালী ডিফল্ট এবং মতামতযুক্ত টুলিং প্রদান করে।
DX এবং UX উভয়কেই প্রভাবিত করার জন্য ফ্রেমওয়ার্কগুলির একটি অনন্য সুবিধা রয়েছে কারণ তারা পুরো সিস্টেমকে বিস্তৃত করে: ক্লায়েন্ট এবং সার্ভার, উন্নয়ন এবং উত্পাদন পরিবেশ, এবং তারা কম্পাইলার, বান্ডলার, লিন্টার ইত্যাদির মতো সরঞ্জামগুলিকে একীভূত করে।
যখন সমাধানগুলি ফ্রেমওয়ার্কের মধ্যে বেক করা হয়, তখন বিকাশকারীদের দলগুলি এই সমাধানগুলি ব্যবহার করতে পারে এবং পণ্যের জন্য সবচেয়ে গুরুত্বপূর্ণ বিষয়গুলির উপর তাদের সময় ফোকাস করতে পারে -- ব্যবহারকারীদের জন্য দুর্দান্ত বৈশিষ্ট্যগুলি শিপিং৷
যখন আমরা স্ট্যাকের প্রতিটি স্তরে থাকা সরঞ্জামগুলিকে উন্নত করতে কাজ করি, ফ্রেমওয়ার্ক যেমন Next.js, Nuxt এবং Angular CLI, একটি অ্যাপ্লিকেশনের জীবনচক্রের প্রতিটি ধাপ পরিচালনা করে। এই কারণে, এবং আসল UI ফ্রেমওয়ার্ক ইকোসিস্টেমের মধ্যে প্রতিক্রিয়া গ্রহণ করা সবচেয়ে বড়, আমাদের বেশিরভাগ অপ্টিমাইজেশান বাকি ইকোসিস্টেমে প্রসারিত হওয়ার আগে Next.js-এ প্রমাণ করার মাধ্যমে শুরু হয়েছে।
Aurora জনপ্রিয় প্রযুক্তির স্ট্যাকের সঠিক স্তরে সমাধান এনে স্কেলে সাফল্যকে সমর্থন করে। ব্রাউজার এবং ফ্রেমওয়ার্কের মধ্যে ব্যবধান পূরণ করে, এটি ওয়েব প্ল্যাটফর্ম উন্নত করার জন্য একটি প্রতিক্রিয়া লুপ হিসাবে কাজ করার সময় ওয়েবের জন্য তৈরির একটি পার্শ্ব-প্রতিক্রিয়া হতে উচ্চ-মানের সক্ষম করে।
আমাদের কাজের প্রক্রিয়া কি?
অরোরা ব্রাউজার এবং ডেভেলপার ইকোসিস্টেমকে কীভাবে ব্রিজ করে তার জন্য আমাদের নীতিগুলি হল: নম্রতা, কৌতূহল, বৈজ্ঞানিক অনুসন্ধান এবং বাস্তববাদ। আমরা উন্নতির বিষয়ে কাঠামো লেখকদের সাথে কাজ করি, সম্প্রদায়ের সাথে সহযোগিতা করি এবং কোনো পরিবর্তন আনার আগে আমাদের যথাযথ পরিশ্রম করি।
যে কোনো নতুন বৈশিষ্ট্যের জন্য আমরা যে পদক্ষেপগুলি নিয়ে কাজ করি তার সংক্ষিপ্ত বিবরণ দিতে:
- প্রতিনিধি অ্যাপ ব্যবহার করে একটি জনপ্রিয় স্ট্যাকে ব্যবহারকারীর অভিজ্ঞতার ব্যথা শনাক্ত করুন।
- প্রোটোটাইপ সমাধান যা "শক্তিশালী ডিফল্ট" এর উপর জোর দিয়ে এটির সমাধান করে।
- এটি অভিযোজনযোগ্য কিনা তা নিশ্চিত করতে অন্য ফ্রেমওয়ার্ক স্ট্যাকের সাথে বৈশিষ্ট্যটি যাচাই করুন।
- কিছু প্রোডাকশন অ্যাপে পরীক্ষা-নিরীক্ষা করে বৈশিষ্ট্যটি যাচাই করুন, বিশেষত কর্মক্ষমতার জন্য ল্যাব টেস্টিংয়ের মাধ্যমে।
- সম্প্রদায়ের প্রতিক্রিয়া সম্বোধন করে RFC প্রক্রিয়া ব্যবহার করে ড্রাইভ ডিজাইন।
- বৈশিষ্ট্যটিকে একটি জনপ্রিয় স্ট্যাকের মধ্যে ল্যান্ড করুন, সাধারণত একটি পতাকার পিছনে৷
- গুণমান এবং ডেভেলপার ওয়ার্কফ্লো ইন্টিগ্রেশন মূল্যায়ন করার জন্য একটি প্রতিনিধি উৎপাদন অ্যাপে বৈশিষ্ট্যটি সক্ষম করুন।
- বৈশিষ্ট্য গৃহীত বা আপগ্রেড করা প্রতিনিধি উৎপাদন অ্যাপে মেট্রিক্স ট্র্যাক করে কর্মক্ষমতা উন্নতি পরিমাপ করুন।
- স্ট্যাকের ডিফল্ট হিসাবে বৈশিষ্ট্যটি সক্ষম করুন, যাতে সমস্ত আপগ্রেড ব্যবহারকারী উপকৃত হয়।
- একবার প্রমাণিত হলে, বৈশিষ্ট্যটি অবতরণ করতে অতিরিক্ত কাঠামোর সাথে কাজ করুন।
- ফিডব্যাক লুপের সাহায্যে ওয়েব প্ল্যাটফর্মের ফাঁক শনাক্ত করুন।
- পরবর্তী সমস্যার দিকে যান।
অন্তর্নিহিত সরঞ্জাম এবং প্লাগইনগুলি (ওয়েবপ্যাক, ব্যাবেল, ইএসলিন্ট, টাইপস্ক্রিপ্ট, ইত্যাদি...) অনেকগুলি ফ্রেমওয়ার্ক জুড়ে ভাগ করা হয়৷ এটি লহরী প্রভাব তৈরি করতে সাহায্য করে, এমনকি যখন একটি একক ফ্রেমওয়ার্ক স্ট্যাকে অবদান রাখে।
উপরন্তু, ক্রোম ফ্রেমওয়ার্ক ফান্ড ওপেন সোর্স টুলস এবং লাইব্রেরিগুলিকে ফান্ডিং সহ সমর্থন করে। যদিও আমরা আশা করি যে অন্যান্য ফ্রেমওয়ার্ক এবং সরঞ্জামগুলিতে অনুবাদ করার জন্য উপরের আমাদের প্রচেষ্টাগুলির সমস্যা এবং সমাধান স্তরগুলিতে যথেষ্ট ওভারল্যাপ রয়েছে, আমরা জানি আমরা আরও কিছু করতে পারি। সেই লক্ষ্যে, ডেভেলপারদের সফল হতে সাহায্য করে লাইব্রেরি এবং ফ্রেমওয়ার্কগুলি নিশ্চিত করতে আমরা আমাদের অংশটি করতে চাই। এটি একটি কারণ আমরা ক্রোম ফ্রেমওয়ার্ক ফান্ডে বিনিয়োগ অব্যাহত রাখব৷ আজ অবধি, এটি Webpack 5, Nuxt এবং ESLint-এর কর্মক্ষমতা এবং উন্নতির দিকে কাজকে সমর্থন করেছে।
আমাদের কাজ এখন পর্যন্ত কি আনলক করা হয়েছে?
আমাদের কাজটি ছবি, জেএস, সিএসএস, ফন্টের মতো সংস্থানগুলির জন্য ভিত্তিগত অপ্টিমাইজেশনের উপর দৃষ্টি নিবদ্ধ করা হয়েছে। আমরা একাধিক ফ্রেমওয়ার্কের ডিফল্টগুলিকে উন্নত করতে অনেকগুলি অপ্টিমাইজেশন পাঠিয়েছি, যার মধ্যে রয়েছে:
- Next.js- এ একটি ইমেজ কম্পোনেন্ট যা ইমেজ লোড করার জন্য সর্বোত্তম প্র্যাকটিসকে এনক্যাপসুলেট করে, এর পরে Nuxt- এর সাথে একটি সহযোগিতা। এই উপাদানটির ব্যবহারের ফলে পেইন্টের সময় এবং লেআউট শিফটে উল্লেখযোগ্য উন্নতি হয়েছে (উদাহরণ: সবচেয়ে বড় বিষয়বস্তুর পেইন্টে 57% হ্রাস এবং nextjs.org/give- এ ক্রমবর্ধমান লেআউট শিফটে 100% হ্রাস)।
- বিল্ড টাইমে ওয়েব ফন্ট ঘোষণার জন্য CSS-এর স্বয়ংক্রিয় ইনলাইনিং। এই বৈশিষ্ট্যটি Angular (Google Fonts) এবং Next.js (Google Fonts & Adobe Fonts) তে অবতরণ করেছে যার ফলে Largest Contentful Paint এবং First Contentful Paint ( উদাহরণ ) এ উল্লেখযোগ্য উন্নতি হয়েছে।
- পেইন্টের সময় কমাতে Angular এবং Next.js উভয় ক্ষেত্রেই Critters ব্যবহার করে সমালোচনামূলক CSS ইনলাইন করা। একটি সাধারণ, বড় আকারের কৌণিক অ্যাপে লাইটহাউস পারফরম্যান্স স্কোরে 20-30 পয়েন্টের উন্নতি হয়েছে যখন এটি ফন্ট CSS ইনলাইনিং বৈশিষ্ট্যের সাথে একত্রিত হয়েছিল।
- Next.js-এ আউট-অফ-দ্য-বক্স ESLint সমর্থন যা বিল্ড-টাইমে সাধারণ ফ্রেমওয়ার্ক-নির্দিষ্ট সমস্যাগুলিকে সহজে ধরার জন্য একটি কাস্টম প্লাগইন এবং শেয়ারযোগ্য কনফিগারেশন অন্তর্ভুক্ত করে, যার ফলে আরও অনুমানযোগ্য লোডিং কর্মক্ষমতা।
- ওয়েব ভাইটাল এবং অন্যান্য কাস্টম মেট্রিক্সের মাধ্যমে পৃষ্ঠার পারফরম্যান্সে সহজতর অন্তর্দৃষ্টি দেওয়ার জন্য Create React অ্যাপ এবং Next.js- এ একটি বিল্ট-ইন পারফরম্যান্স রিলেয়ারের একটি ভূমিকা।
- দানাদার চঙ্কিং Next.js এবং Gatsby-এ পাঠানো হয়েছে, যার ফলে ক্যাশিং কর্মক্ষমতা উন্নত করার সময় বান্ডেলের আকার 30 থেকে 70 শতাংশ হ্রাস পেয়েছে। এটি Webpack 5 এ ডিফল্ট হয়ে গেছে।
- আধুনিক ব্রাউজারগুলিতে বান্ডেলের আকার উন্নত করতে Next.js টিমের সহযোগিতায় পুরানো ব্রাউজারগুলির জন্য একটি পৃথক পলিফিল খণ্ড ।
এই বৈশিষ্ট্যগুলির প্রত্যেকটি হয় ডিফল্টরূপে সক্ষম করার জন্য স্বয়ংক্রিয় করা হয়েছে বা শুধুমাত্র একটি সাধারণ অপ্ট-ইন প্রয়োজন৷ এটি নিশ্চিত করার জন্য প্রয়োজনীয় যে বিকাশকারীরা তাদের কর্মপ্রবাহে জটিলতা যোগ না করে সহজেই তাদের সুবিধাগুলি কাটাতে পারে।
আমরা 2021 এর জন্য কী পরিকল্পনা করছি?
এই বছরের বাকি সময়ে, আমরা ফ্রেমওয়ার্ক স্ট্যাকগুলিকে ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে এবং কোর ওয়েব ভাইটালগুলির মতো মেট্রিক্সে তারা কতটা ভাল পারফর্ম করতে সাহায্য করার দিকে মনোনিবেশ করব৷ এই কাজের অন্তর্ভুক্ত হবে:
- সর্বোত্তম অনুশীলন প্রয়োগের জন্য সামঞ্জস্য। আরো জানতে ব্লগ পোস্ট দেখুন.
- ইমেজ , ফন্ট এবং ক্রিটিক্যাল সিএসএস অপ্টিমাইজ করার জন্য আমাদের সহযোগিতার ভিত্তিতে প্রাথমিক লোড কর্মক্ষমতা অপ্টিমাইজ করা।
- একটি স্ক্রিপ্ট উপাদানের উপর আমাদের কাজের ভিত্তি তৈরি করে এবং 3Ps কীভাবে সর্বোত্তম অর্ডার এবং সিকোয়েন্স করা যায় সে সম্পর্কে গভীর গবেষণা করে ন্যূনতম পারফ প্রভাব সহ তৃতীয় পক্ষের স্ক্রিপ্টগুলি (3Ps) লোড করা হচ্ছে।
- স্কেলে জাভাস্ক্রিপ্ট কর্মক্ষমতা (যেমন Next.js-এ প্রতিক্রিয়া সার্ভার উপাদান সমর্থন করে)।
আমাদের টিমের লক্ষ্য থাকবে RFC-এর উপর আরও নিয়মিত তথ্য পোস্ট করা এবং এই ধারনাগুলির জন্য ডক্স ডিজাইন করা যাতে যে কোনও ফ্রেমওয়ার্ক বা বিকাশকারী যা অনুসরণ করতে চায় তা করতে পারে।
উপসংহার
অরোরা দল ( শুবি , হোসেইন , অ্যালেক্স , জেরাল্ড , রাল্ফ , অ্যাডি , কারা , কিন , কেটি ) Next.js, Nuxt এবং Angular-এ ব্যবহারকারীর অভিজ্ঞতার ডিফল্ট উন্নত করার জন্য ওপেন-সোর্স ফ্রেমওয়ার্ক সম্প্রদায়ের সাথে ঘনিষ্ঠভাবে কাজ চালিয়ে যাওয়ার জন্য উন্মুখ৷ সময়ের সাথে সাথে আরও বেশি ফ্রেমওয়ার্ক এবং সরঞ্জামগুলি কভার করার জন্য আমরা আমাদের ব্যস্ততা বৃদ্ধি করব৷ আগামী বছরে আমাদের দলের আরও ব্লগ পোস্ট, আলোচনা এবং RFC-এর জন্য এই স্থানটি দেখুন :)