I/O 2019-এ ওয়েব কম্পোনেন্ট
প্রকাশিত: ১৮ জুন, ২০১৯
Google I/O 2019-এ, Polymer Project-এর কেভিন শাফ এবং Salesforce-এর ক্যারিডি প্যাটিনো ওয়েব কম্পোনেন্টের অবস্থা সম্পর্কে কথা বলেছেন।
ওয়েব কম্পোনেন্ট কতটা জনপ্রিয়?
আপনি আজ ওয়েব ব্যবহার করে থাকলে, সম্ভবত ওয়েব কম্পোনেন্ট ব্যবহার করেছেন। আমাদের হিসেব অনুযায়ী, আজ লোড হওয়া সমস্ত পৃষ্ঠার ৫% থেকে ৮% এক বা একাধিক ওয়েব কম্পোনেন্ট ব্যবহার করে। এর ফলে, গত পাঁচ বছরে শিপ করা সবচেয়ে সফল নতুন ওয়েব প্ল্যাটফর্ম ফিচারের মধ্যে ওয়েব কম্পোনেন্ট অন্যতম হয়ে উঠেছে।
আপনি সম্ভবত প্রতিদিন ব্যবহার করেন এমন সাইটে ওয়েব কম্পোনেন্ট খুঁজে পেতে পারেন, যেমন YouTube এবং GitHub। এছাড়াও, এএমপি দিয়ে তৈরি অনেক খবর ও প্রকাশনা সাইটে এগুলি ব্যবহার করা হয়—এএমপি কম্পোনেন্টও হল ওয়েব কম্পোনেন্ট। এছাড়াও, অনেক এন্টারপ্রাইজ ওয়েব কম্পোনেন্ট গ্রহণ করছে।
ওয়েব কম্পোনেন্ট কী?
তাহলে ওয়েব কম্পোনেন্ট কী? ওয়েব কম্পোনেন্ট স্পেসিফিকেশন API-এর একটি লো-লেভেল সেট প্রদান করে যা আপনাকে ব্রাউজারের বিল্ট-ইন HTML ট্যাগের সেট এক্সটেন্ড করতে দেয়। ওয়েব কম্পোনেন্ট এগুলি প্রদান করে:
- কম্পোনেন্ট তৈরি করার সাধারণ পদ্ধতি (স্ট্যান্ডার্ড DOM API ব্যবহার করে)।
- ডেটা গ্রহণ ও পাঠানোর একটি সাধারণ পদ্ধতি (প্রপার্টি/ইভেন্ট ব্যবহার করে)।
সেই স্ট্যান্ডার্ড ইন্টারফেসের বাইরে, স্ট্যান্ডার্ডগুলি কোনও কম্পোনেন্ট আসলে কীভাবে প্রয়োগ করা হয় সে সম্পর্কে কিছু বলে না:
- DOM তৈরি করতে এটি কোন রেন্ডারিং ইঞ্জিন ব্যবহার করে।
- এর প্রপার্টি বা অ্যাট্রিবিউটে হওয়া পরিবর্তনের উপর ভিত্তি করে এটি নিজেকে কীভাবে আপডেট করে।
অন্যভাবে বলতে গেলে, ওয়েব কম্পোনেন্ট ব্রাউজারকে বলে দেয় যে কখন এবং কোথায় কম্পোনেন্ট তৈরি করতে হবে, কিন্তু কীভাবে তৈরি করতে হবে তা বলে না।
লেখক তাদের ওয়েব কম্পোনেন্ট তৈরি করার জন্য React-এর মতো ফাংশনাল রেন্ডারিং প্যাটার্ন বেছে নিতে পারেন অথবা তারা Angular বা Vue-তে আপনি যেমনটি দেখতে পাবেন তেমন ডিক্লারেটিভ টেমপ্লেট ব্যবহার করতে পারেন। লেখক হিসেবে, ইন্টারঅপারেবিলিটি বজায় রেখেও কম্পোনেন্টের মধ্যে কোন প্রযুক্তি ব্যবহার করবেন তা বেছে নেওয়ার সম্পূর্ণ স্বাধীনতা আপনার আছে।
ওয়েব কম্পোনেন্ট কীসের জন্য ভালো?
ওয়েব কম্পোনেন্ট ও মালিকানাধীন কম্পোনেন্ট সিস্টেমের মধ্যে মূল পার্থক্য হল ইন্টারঅপারেবিলিটি। স্ট্যান্ডার্ড ইন্টারফেসের কারণে, আপনি <input> বা <video>-এর মতো বিল্ট-ইন এলিমেন্ট যেখানে ব্যবহার করেন, সেখানে ওয়েব কম্পোনেন্ট ব্যবহার করতে পারবেন।
যেহেতু এগুলি আসল HTML হিসেবে প্রকাশ করা যায়, তাই সব জনপ্রিয় ফ্রেমওয়ার্কের মাধ্যমে এগুলি রেন্ডার করা যায়। তাই আপনার কম্পোনেন্ট আরও ব্যাপকভাবে, আরও বিভিন্ন ধরনের অ্যাপ্লিকেশনে ব্যবহার করা যেতে পারে, ব্যবহারকারীদের কোনও একটি ফ্রেমওয়ার্কে লক না করেই।
এবং কম্পোনেন্ট ইন্টারফেস স্ট্যান্ডার্ড হওয়ার কারণে, বিভিন্ন লাইব্রেরি ব্যবহার করে তৈরি করা ওয়েব কম্পোনেন্ট একই পৃষ্ঠায় একসাথে ব্যবহার করা যেতে পারে। আপনি টেক স্ট্যাক আপডেট করার সময় এই তথ্য আপনার অ্যাপ্লিকেশনকে ফিউচার-প্রুফ করতে সাহায্য করে। একটি ফ্রেমওয়ার্ক থেকে অন্য ফ্রেমওয়ার্কে পরিবর্তন করার সময় সব কম্পোনেন্ট একসাথে পরিবর্তন করার পরিবর্তে, আপনি এক এক করে কম্পোনেন্ট আপডেট করতে পারবেন।
ওয়েব কম্পোনেন্ট কারা ব্যবহার করছেন?
তাই এইসব কারণে, বিভিন্ন ধরনের ব্যবহারের ক্ষেত্রে ওয়েব কম্পোনেন্ট আসলে বিপুল সাফল্য পাচ্ছে। তিনটি ব্যবহারিক ক্ষেত্র বিশেষভাবে জনপ্রিয় হয়েছে: কন্টেন্ট সাইট, ডিজাইন সিস্টেম এবং এন্টারপ্রাইজ অ্যাপ্লিকেশন।
কন্টেন্ট সাইট
কন্টেন্ট প্রোগ্রেসিভ এনহ্যান্সমেন্ট করার জন্য ওয়েব কম্পোনেন্ট হল আদর্শ প্রযুক্তি, কারণ অসংখ্য CMS সিস্টেমের মাধ্যমে এগুলি স্ট্যান্ডার্ড HTML হিসেবে আউটপুট করা যায়।
কন্টেন্ট পরিবেশন করার জন্য প্রকাশনা শিল্পের পরিকাঠামোতে ওয়েব কম্পোনেন্ট কত দ্রুত এবং সহজে স্লট করা হয়েছে তার একটি দুর্দান্ত উদাহরণ হল এএমপি।
ডিজাইন সিস্টেম
আরও বেশি সংখ্যক কোম্পানি ডিজাইন সিস্টেম ব্যবহার করে নিজেদের উপস্থাপন করার পদ্ধতিকে একত্রিত করছে—কম্পোনেন্ট এবং নির্দেশিকাগুলির একটি সেট যা কোনও সংস্থার সাইট এবং অ্যাপ্লিকেশনগুলির জন্য সাধারণ লুক এবং ফিলকে সংজ্ঞায়িত করে। ওয়েব কম্পোনেন্ট এখানেও খুব ভালভাবে ফিট করে।
প্রায়ই ডিজাইনারদের এমন অনেক টিমের সাথে প্রতিযোগিতা করতে হয় যারা React, Angular এবং অন্যান্য ফ্রেমওয়ার্কের উপরে ডিজাইন সিস্টেম কম্পোনেন্টের নিজস্ব ভার্সন তৈরি করে, যেখানে তাদের কাছে ক্যানোনিকাল কম্পোনেন্টের একটি সেট থাকে না।
ওয়েব কম্পোনেন্ট হল এর উত্তর—একবার লিখুন, সব জায়গায় চালান কম্পোনেন্ট সিস্টেম যা অ্যাপ টিমকে তাদের পছন্দের ফ্রেমওয়ার্ক ব্যবহার করার স্বাধীনতা দেয়
ING, EA এবং Google-এর মতো কোম্পানিগুলি ওয়েব কম্পোনেন্টে তাদের কোম্পানির ডিজাইন ল্যাঙ্গুয়েজ প্রয়োগ করছে।
এন্টারপ্রাইজ: Salesforce-এ ওয়েব কম্পোনেন্ট
নিরাপদ, ভবিষ্যতের জন্য উপযুক্ত প্রযুক্তি হিসেবে স্ট্যান্ডার্ডাইজ করার জন্য ওয়েব কম্পোনেন্টও এন্টারপ্রাইজের মধ্যে উল্লেখযোগ্য অগ্রগতি করছে। Salesforce-এর UI প্ল্যাটফর্মের আর্কিটেক্ট, ক্যারিডি প্যাটিনো ব্যাখ্যা করেছেন যে কেন তারা ওয়েব কম্পোনেন্ট ব্যবহার করে তাদের UI প্ল্যাটফর্ম তৈরি করেছেন।
Salesforce হল অ্যাপ্লিকেশনের একটি সংগ্রহ—যার মধ্যে অনেকগুলি অধিগ্রহণ থেকে এসেছে। এর মধ্যে প্রতিটি নিজস্ব প্রযুক্তি স্ট্যাকে রান করতে পারে। যেহেতু এগুলি আলাদা আলাদা স্ট্যাকের উপর তৈরি করা হয়েছে, তাই সবকটিকে একই রকম লুক ও ফিল দেওয়া কঠিন। এছাড়াও, Salesforce প্ল্যাটফর্ম ব্যবহার করে Salesforce গ্রাহকদের নিজস্ব কাস্টম অ্যাপ্লিকেশন তৈরি করার সুবিধা দেয়। তাই, আদর্শগতভাবে, কম্পোনেন্টগুলি বাইরের ডেভেলপারদেরও ব্যবহারযোগ্য হতে হবে।
Salesforce তাদের প্ল্যাটফর্মের গ্রাহকদের থেকে এক সেট প্রয়োজনীয়তা চিহ্নিত করেছে:
- প্রোপ্রাইটরি সমাধানের পরিবর্তে স্ট্যান্ডার্ড সমাধান—তাই অভিজ্ঞ ডেভেলপারদের খুঁজে পাওয়া সহজ এবং নতুন ডেভেলপারদের দ্রুত কাজে লাগানো যায়।
- একটি সাধারণ কম্পোনেন্ট মডেল—তাই যেকোনও Salesforce অ্যাপ্লিকেশন কাস্টমাইজ করা একই উপায়ে কাজ করে।
এছাড়াও, তারা এমন কিছু জিনিস শনাক্ত করেছেন যা গ্রাহকরা চাননি:
- তাদের কম্পোনেন্ট ও অ্যাপে ব্রেকিং পরিবর্তন। অন্যভাবে বলতে গেলে, ব্যাকওয়ার্ড কম্প্যাটিবিলিটি থাকা আবশ্যক ছিল।
- পুরনো প্রযুক্তির সাথে আটকে থাকা এবং বিকশিত হতে না পারা।
- একটি প্রাচীর ঘেরা বাগানের ভিতরে আটকে থাকা।
নতুন UI প্ল্যাটফর্মের ভিত্তি হিসেবে ওয়েব কম্পোনেন্ট ব্যবহার করার ফলে এইসব প্রয়োজনীয়তা পূরণ করা সম্ভব হয়েছে এবং এর ফল হল নতুন Lightning Web Components।
ওয়েব কম্পোনেন্ট ব্যবহার করা শুরু করুন
ওয়েব কম্পোনেন্ট নিয়ে কাজ শুরু করার অনেক ভালো উপায় আছে।
আপনি কোনও ওয়েব অ্যাপ তৈরি করলে, উপলভ্য অনেক স্ট্যান্ডার্ড ওয়েব কম্পোনেন্টের মধ্যে কিছু ব্যবহার করার কথা বিবেচনা করুন। এখানে কয়েকটি উদাহরণ দেওয়া হল:
- Google তার নিজস্ব মেটেরিয়াল ডিজাইন সিস্টেমকে ওয়েব কম্পোনেন্ট হিসেবে বিক্রি করে: মেটেরিয়াল ওয়েব কম্পোনেন্ট।
- Wired Elements হল ওয়েব কম্পোনেন্টের একটি দারুণ সেট যাতে স্কেচ করা, হাতে আঁকা লুক ফিচার করা হয়।
<model-viewer>-এর মতো বিশেষ উদ্দেশ্যে তৈরি করা দারুণ ওয়েব কম্পোনেন্ট আছে, যা আপনি যেকোনও অ্যাপে ড্রপ করে 3D কন্টেন্ট যোগ করতে পারবেন।
আপনি যদি নিজের কোম্পানির জন্য কোনও ডিজাইন সিস্টেম ডেভেলপ করেন অথবা কোনও একটি কম্পোনেন্ট বা লাইব্রেরি বিক্রি করেন যা আপনি যেকোনও পরিবেশে ব্যবহারযোগ্য করতে চান, তাহলে ওয়েব কম্পোনেন্ট ব্যবহার করে আপনার কম্পোনেন্ট তৈরি করার কথা বিবেচনা করুন। আপনি বিল্ট-ইন ওয়েব কম্পোনেন্ট API ব্যবহার করতে পারেন, তবে সেগুলি বেশ লো-লেভেল, তাই প্রসেসটি সহজ করার জন্য বেশ কয়েকটি লাইব্রেরি উপলভ্য আছে।
আপনার নিজস্ব কম্পোনেন্ট তৈরি করা শুরু করতে, আপনি LitElement চেক করতে পারেন, এটি Google-এর তৈরি করা একটি ওয়েব কম্পোনেন্ট বেস ক্লাস যার React-এর মতো একটি দুর্দান্ত ফাংশনাল রেন্ডারিং অভিজ্ঞতা রয়েছে।
অন্যান্য টুল ও লাইব্রেরি যা বিবেচনা করতে পারেন:
- Stencil হল ওয়েব-কম্পোনেন্ট-ফার্স্ট ফ্রেমওয়ার্ক। এতে JSX এবং TypeScript-এর মতো বেশ কিছু জনপ্রিয় ফ্রেমওয়ার্ক ফিচার অন্তর্ভুক্ত আছে
- Angular Elements, Angular কম্পোনেন্টকে ওয়েব কম্পোনেন্ট হিসেবে র্যাপ করার সুবিধা প্রদান করে।
- Vue.js ওয়েব কম্পোনেন্ট র্যাপার Vue কম্পোনেন্টকে ওয়েব কম্পোনেন্ট হিসেবে প্যাকেজ করার উপায় প্রদান করে।
আরও রিসোর্স:
- open-wc.org-এ শুরু করার জন্য দারুণ তথ্য, সেইসাথে বিল্ড এবং ডেভেলপমেন্ট টুলিংয়ের জন্য পরামর্শ এবং ডিফল্ট কনফিগারেশন রয়েছে।
- ওয়েবের মূল নীতি বেসিক ওয়েব কম্পোনেন্ট API-এর প্রাইমার এবং ওয়েব কম্পোনেন্ট ডিজাইন করার পেশাদার পদ্ধতি প্রদান করে।
- MDN ওয়েব কম্পোনেন্ট API-এর জন্য রেফারেন্স ডকুমেন্ট এবং কিছু টিউটোরিয়াল প্রদান করে।