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