ওয়েব উপাদান: গোপন উপাদান যা ওয়েবকে শক্তিশালী করতে সহায়তা করে

I/O 2019 এ ওয়েব উপাদান

Google I/O 2019-এ, পলিমার প্রকল্পের কেভিন শ্যাফ এবং সেলসফোর্সের ক্যারিডি প্যাটিনো ওয়েব উপাদানগুলির অবস্থা সম্পর্কে কথা বলেছেন।

ওয়েব উপাদান কতটা জনপ্রিয়?

আপনি যদি আজ ওয়েব ব্যবহার করে থাকেন, আপনি সম্ভবত ওয়েব উপাদান ব্যবহার করেছেন। আমাদের গণনা অনুসারে, বর্তমানে সমস্ত পৃষ্ঠা লোডের 5% থেকে 8% এর মধ্যে এক বা একাধিক ওয়েব উপাদান ব্যবহার করে৷ এটি ওয়েব উপাদানগুলিকে গত পাঁচ বছরে পাঠানো সবচেয়ে সফল নতুন ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্যগুলির মধ্যে একটি করে তোলে৷

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

ওয়েব উপাদান কি?

তাই ওয়েব উপাদান কি? ওয়েব কম্পোনেন্ট স্পেসিফিকেশন এপিআই-এর একটি নিম্ন-স্তরের সেট প্রদান করে যা আপনাকে ব্রাউজারের অন্তর্নির্মিত HTML ট্যাগের সেট প্রসারিত করতে দেয়। ওয়েব উপাদান প্রদান করে:

• একটি উপাদান তৈরি করার জন্য একটি সাধারণ পদ্ধতি (স্ট্যান্ডার্ড DOM API ব্যবহার করে)।
• ডেটা গ্রহণ এবং পাঠানোর একটি সাধারণ উপায় (প্রপার্টি/ইভেন্ট ব্যবহার করে)।

সেই স্ট্যান্ডার্ড ইন্টারফেসের বাইরে, মানগুলি কীভাবে একটি উপাদান বাস্তবে বাস্তবায়িত হয় সে সম্পর্কে কিছু বলে না:

• এটি তার DOM তৈরি করতে কোন রেন্ডারিং ইঞ্জিন ব্যবহার করে।
• কীভাবে এটি তার বৈশিষ্ট্য বা বৈশিষ্ট্যের পরিবর্তনের উপর ভিত্তি করে নিজেকে আপডেট করে।

অন্য কথায়, ওয়েব কম্পোনেন্ট ব্রাউজারকে বলে কখন এবং কোথায় একটি কম্পোনেন্ট তৈরি করতে হবে, কিন্তু কিভাবে তা নয়।

লেখকরা তাদের ওয়েব উপাদানগুলি তৈরি করতে প্রতিক্রিয়ার মতো কার্যকরী রেন্ডারিং প্যাটার্ন বেছে নিতে পারেন, অথবা তারা ঘোষণামূলক টেমপ্লেটগুলি ব্যবহার করতে পারেন যেমন আপনি কৌণিক বা Vue-তে খুঁজে পেতে পারেন। একজন লেখক হিসাবে আপনি কম্পোনেন্টের অভ্যন্তরে যে প্রযুক্তিটি ব্যবহার করেন তা বেছে নেওয়ার সম্পূর্ণ স্বাধীনতা রয়েছে, এখনও আন্তঃঅপারেবিলিটি বজায় রেখে।

ওয়েব উপাদান কি জন্য ভাল?

ওয়েব কম্পোনেন্ট এবং মালিকানাধীন কম্পোনেন্ট সিস্টেমের মধ্যে মূল পার্থক্য হল ইন্টারঅপারেবিলিটি । তাদের স্ট্যান্ডার্ড ইন্টারফেসের কারণে, আপনি <input> বা <video> এর মত একটি অন্তর্নির্মিত উপাদান ব্যবহার করতে চান এমন যেকোনো জায়গায় আপনি ওয়েব উপাদান ব্যবহার করতে পারেন।

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

এবং কম্পোনেন্ট ইন্টারফেস স্ট্যান্ডার্ড হওয়ায় বিভিন্ন লাইব্রেরি ব্যবহার করে বাস্তবায়িত ওয়েব কম্পোনেন্ট একই পৃষ্ঠায় মিশ্রিত করা যেতে পারে। আপনি যখন আপনার প্রযুক্তি স্ট্যাক আপডেট করেন তখন এই তথ্যটি আপনার অ্যাপ্লিকেশনগুলিকে ভবিষ্যত প্রমাণ করতে সহায়তা করে৷ একটি ফ্রেমওয়ার্ক এবং অন্য ফ্রেমওয়ার্কের মধ্যে একটি বিশাল ধাপ পরিবর্তনের পরিবর্তে, যেখানে আপনি আপনার সমস্ত উপাদান প্রতিস্থাপন করেন, আপনি একবারে আপনার উপাদানগুলি আপডেট করতে পারেন।

কে ওয়েব উপাদান ব্যবহার করছে?

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

বিষয়বস্তু সাইট

ওয়েব কম্পোনেন্ট হল ক্রমান্বয়ে কন্টেন্ট বাড়ানোর জন্য নিখুঁত প্রযুক্তি, কারণ সেগুলি ইতিমধ্যেই অনেক সিএমএস সিস্টেমের দ্বারা স্ট্যান্ডার্ড HTML হিসাবে আউটপুট হতে পারে।

কন্টেন্ট পরিবেশনের জন্য প্রকাশনা শিল্পের পরিকাঠামোতে কত দ্রুত এবং সহজে ওয়েব কম্পোনেন্ট স্লট হয়ে যায় তার একটি চমৎকার উদাহরণ হল এএমপি।

ডিজাইন সিস্টেম

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

প্রায়শই, ডিজাইনারদের অনেক দলের সাথে বিতর্ক করতে হয় যে তাদের ডিজাইন সিস্টেম উপাদানগুলির নিজস্ব সংস্করণ তৈরি করে বিক্রিয়া, কৌণিক, এবং অন্যান্য সমস্ত কাঠামোর উপরে, ক্যানোনিকাল উপাদানগুলির একক সেট না রেখে।

ওয়েব কম্পোনেন্ট হল উত্তর—সত্যিই একবার লিখুন, সর্বত্র কম্পোনেন্ট সিস্টেম চালান যা এখনও অ্যাপ টিমকে তাদের পছন্দের ফ্রেমওয়ার্ক ব্যবহার করার স্বাধীনতা দেয়

ING, EA, এবং Google এর মতো কোম্পানিগুলি ওয়েব উপাদানগুলিতে তাদের কোম্পানির নকশা ভাষা প্রয়োগ করছে৷

এন্টারপ্রাইজ: সেলসফোর্সে ওয়েব উপাদান

ওয়েব কম্পোনেন্টগুলিও এন্টারপ্রাইজের অভ্যন্তরে একটি নিরাপদ, ভবিষ্যত-প্রমাণ প্রযুক্তি হিসাবে প্রমিতকরণের জন্য একটি উল্লেখযোগ্য অগ্রগতি অর্জন করছে। Salesforce এর UI প্ল্যাটফর্মের স্থপতি, Caridy Patiño ব্যাখ্যা করেছেন কেন তারা ওয়েব উপাদান ব্যবহার করে তাদের UI প্ল্যাটফর্ম তৈরি করেছে।

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

সেলসফোর্স তাদের প্ল্যাটফর্মের গ্রাহকদের কাছ থেকে চাহিদার একটি সেট চিহ্নিত করেছে:

• মালিকানা সমাধানের পরিবর্তে স্ট্যান্ডার্ড—তাই অভিজ্ঞ ডেভেলপারদের খুঁজে পাওয়া সহজ এবং নতুন ডেভেলপারদের র‌্যাম্প করা আরও দ্রুত।
• একটি সাধারণ উপাদান মডেল—তাই যেকোনো Salesforce অ্যাপ্লিকেশনকে কাস্টমাইজ করা একইভাবে কাজ করে।

তারা এমন কিছু জিনিসও চিহ্নিত করেছে যা গ্রাহকরা চায় না :

• তাদের কম্পোনেন্ট এবং অ্যাপে ব্রেকিং পরিবর্তন। অন্য কথায়, পিছনের সামঞ্জস্য থাকা আবশ্যক।
• পুরানো প্রযুক্তির সাথে আটকে থাকা, এবং বিকশিত হতে অক্ষম।
• দেয়াল ঘেরা বাগানের ভিতর আটকে থাকা।

নতুন UI প্ল্যাটফর্মের ভিত্তি হিসাবে ওয়েব উপাদানগুলি ব্যবহার করা এই সমস্ত চাহিদা পূরণ করেছে, এবং ফলাফল হল নতুন লাইটনিং ওয়েব উপাদান ।

ওয়েব উপাদান দিয়ে শুরু করুন

ওয়েব উপাদানগুলির সাথে শুরু করার জন্য অনেকগুলি দুর্দান্ত উপায় রয়েছে৷

আপনি যদি একটি ওয়েব অ্যাপ তৈরি করছেন, তাহলে উপলব্ধ অনেকগুলি অফ-দ্য-শেল্ফ ওয়েব উপাদানগুলির মধ্যে কিছু ব্যবহার করার কথা বিবেচনা করুন৷ এখানে কিছু উদাহরণ:

• Google তার নিজস্ব মেটেরিয়াল ডিজাইন সিস্টেমকে ওয়েব কম্পোনেন্ট হিসেবে বিক্রি করে: ম্যাটেরিয়াল ওয়েব কম্পোনেন্টস ।
• ওয়্যার্ড এলিমেন্ট হল ওয়েব উপাদানগুলির একটি দুর্দান্ত সেট যা একটি স্কেচি, হাতে আঁকা চেহারা বৈশিষ্ট্যযুক্ত।
• <model-viewer> -এর মতো দুর্দান্ত বিশেষ-উদ্দেশ্যযুক্ত ওয়েব উপাদান রয়েছে, যেগুলি আপনি 3D সামগ্রী যোগ করতে যেকোনো অ্যাপে ড্রপ করতে পারেন।

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

আপনার নিজস্ব উপাদান তৈরি করা শুরু করতে, আপনি LitElement চেক করতে পারেন, Google দ্বারা তৈরি একটি ওয়েব কম্পোনেন্ট বেস ক্লাস যা প্রতিক্রিয়ার মতো একটি দুর্দান্ত কার্যকরী রেন্ডারিং অভিজ্ঞতা রয়েছে৷

বিবেচনা করার জন্য অন্যান্য সরঞ্জাম এবং লাইব্রেরি:

• স্টেনসিল হল একটি ওয়েব-কম্পোনেন্ট-প্রথম ফ্রেমওয়ার্ক। এতে JSX এবং TypeScript এর মত বেশ কিছু জনপ্রিয় ফ্রেমওয়ার্ক বৈশিষ্ট্য রয়েছে
• কৌণিক উপাদানগুলি কৌণিক উপাদানগুলিকে ওয়েব উপাদান হিসাবে মোড়ানোর একটি উপায় সরবরাহ করে।
• Vue.js ওয়েব কম্পোনেন্ট র‍্যাপার Vue কম্পোনেন্টকে ওয়েব কম্পোনেন্ট হিসেবে প্যাকেজ করার একটি উপায় প্রদান করে।

আরও সম্পদ:

• open-wc.org-এ দুর্দান্ত শুরু করার তথ্য, সেইসাথে বিল্ড এবং ডেভেলপমেন্ট টুলিংয়ের জন্য টিপস এবং ডিফল্ট কনফিগারেশনের বৈশিষ্ট্য রয়েছে।
• ওয়েব ফান্ডামেন্টাল বেসিক ওয়েব কম্পোনেন্ট এপিআই-এ প্রাইমার এবং ওয়েব কম্পোনেন্ট ডিজাইন করার জন্য সর্বোত্তম অনুশীলন প্রদান করে।
• MDN ওয়েব কম্পোনেন্ট এপিআই, এবং কিছু টিউটোরিয়ালের জন্য রেফারেন্স ডক্স প্রদান করে। \

আনস্প্ল্যাশে জেসন টুইনস্ট্রা দ্বারা হিরো ছবি।

সম্পাদকের দ্রষ্টব্য: chromestatus.com- এ রিপোর্ট করা হিসাবে, সম্পূর্ণ মাসিক ব্যবহারের ডেটা দেখানোর জন্য কাস্টম উপাদান ব্যবহারের চার্ট আপডেট করা হয়েছে। এই পোস্টের পূর্ববর্তী সংস্করণে সাম্প্রতিক মাসগুলি ছাড়াই 6-মাসের গ্রানুলারিটিতে একটি গ্রাফ অন্তর্ভুক্ত করা হয়েছে। মূল চার্টে V0 এবং V1 সিরিজ স্ট্যাক করা হয়েছিল; অস্পষ্টতা অপসারণের জন্য সেগুলিকে এখন মোট লাইনের সাথে আনস্ট্যাক করা দেখানো হয়েছে। 2017 সালের শেষের দিকে আকস্মিক উল্লম্ফন chromestatus.com-এর ডেটা সংগ্রহ পদ্ধতিতে পরিবর্তনের কারণে। এই পরিবর্তনটি সমস্ত ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্যের পরিসংখ্যানকে প্রভাবিত করেছে এবং এর ফলে আরও সঠিক পরিমাপ এগিয়ে যাচ্ছে।