ওয়েব কম্পোনেন্টগুলি ক্রস-ব্রাউজার সমর্থন লাভ করছে, সম্প্রদায়টি লাফিয়ে বাড়ছে এবং আপনার প্রয়োজনীয় উপাদানটি খুঁজে পেতে একটি একেবারে নতুন ওয়েব কম্পোনেন্ট ক্যাটালগ রয়েছে৷
কখনও আপনার নিজস্ব স্বয়ংসম্পূর্ণ জাভাস্ক্রিপ্ট উপাদান তৈরি করতে চেয়েছিলেন, যা আপনি সহজেই একাধিক প্রকল্প জুড়ে ব্যবহার করতে পারেন বা অন্য ডেভেলপারদের সাথে ভাগ করতে পারেন নির্বিশেষে তারা কোন জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক ব্যবহার করে? ওয়েব উপাদান আপনার জন্য হতে পারে.
ওয়েব উপাদানগুলি হল নতুন ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্যগুলির একটি সেট যা আপনাকে আপনার নিজস্ব HTML উপাদানগুলি তৈরি করতে দেয়৷ প্রতিটি নতুন কাস্টম উপাদানে <my-button> এর মতো একটি কাস্টম ট্যাগ থাকতে পারে এবং অন্তর্নির্মিত উপাদানগুলির সমস্ত ভালতা থাকতে পারে - কাস্টম উপাদানগুলির বৈশিষ্ট্য এবং পদ্ধতি থাকতে পারে, ইভেন্টগুলিতে আগুন এবং প্রতিক্রিয়া, এমনকি একটি এনক্যাপসুলেটেড শৈলী এবং DOM গাছ থাকতে পারে তাদের নিজস্ব চেহারা এবং অনুভূতি সঙ্গে আনতে.
একটি প্ল্যাটফর্ম-ভিত্তিক, নিম্ন-স্তরের কম্পোনেন্ট মডেল প্রদান করে, ওয়েব কম্পোনেন্টগুলি আপনাকে বিশেষ বোতাম থেকে শুরু করে ডেটপিকারের মতো জটিল দৃশ্য পর্যন্ত সবকিছুর জন্য পুনঃব্যবহারযোগ্য উপাদান তৈরি এবং ভাগ করতে দেয়। যেহেতু ওয়েব কম্পোনেন্ট প্ল্যাটফর্ম API এর সাথে তৈরি করা হয়েছে যার মধ্যে শক্তিশালী এনক্যাপসুলেশন প্রিমিটিভ রয়েছে, আপনি এমনকি এই উপাদানগুলিকে অন্যান্য জাভাস্ক্রিপ্ট লাইব্রেরি বা ফ্রেমওয়ার্কের মধ্যে ব্যবহার করতে পারেন যেন সেগুলি স্ট্যান্ডার্ড DOM উপাদান।
আপনি আগে ওয়েব কম্পোনেন্টের কথা শুনে থাকতে পারেন - ওয়েব কম্পোনেন্ট স্পেকের একটি প্রাথমিক সংস্করণ - v0 - Chrome 33 এ পাঠানো হয়েছিল।
আজ, ব্রাউজার বিক্রেতাদের মধ্যে বিস্তৃত সহযোগিতার জন্য ধন্যবাদ, ওয়েব কম্পোনেন্ট স্পেকের পরবর্তী প্রজন্ম - v1 - ব্যাপক সমর্থন লাভ করছে। ক্রোম যথাক্রমে ক্রোম 53 এবং ক্রোম 54- এর মতো ওয়েব কম্পোনেন্ট - শ্যাডো ডম এবং কাস্টম এলিমেন্ট - দুটি প্রধান বৈশিষ্ট্যকে সমর্থন করে। Safari Safari 10-এ Shadow DOM v1-এর জন্য সমর্থন পাঠিয়েছে, এবং WebKit-এ কাস্টম এলিমেন্ট v1- এর বাস্তবায়ন সম্পন্ন করেছে। Firefox বর্তমানে Shadow DOM এবং Custom Elements v1 তৈরি করছে এবং Shadow DOM এবং Custom Elements উভয়ই Edge-এর জন্য রোডম্যাপে রয়েছে।
v1 বাস্তবায়ন ব্যবহার করে একটি নতুন কাস্টম উপাদান সংজ্ঞায়িত করতে, আপনি কেবল একটি নতুন ক্লাস তৈরি করুন যা ES6 সিনট্যাক্স ব্যবহার করে HTMLElement প্রসারিত করে এবং ব্রাউজারে নিবন্ধন করুন:
class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);
নতুন v1 স্পেসগুলি অত্যন্ত শক্তিশালী - আমরা আপনাকে শুরু করতে সাহায্য করার জন্য কাস্টম উপাদান v1 এবং Shadow DOM v1 ব্যবহার করার টিউটোরিয়ালগুলি একসাথে রেখেছি।
webcomponents.org
ওয়েব কম্পোনেন্ট সম্প্রদায়ও লাফিয়ে লাফিয়ে বাড়ছে। আমরা একটি আপডেট করা webcomponents.org সাইট - ওয়েব কম্পোনেন্ট সম্প্রদায়ের কেন্দ্রবিন্দু - বিকাশকারীদের তাদের উপাদানগুলি ভাগ করার জন্য একটি সমন্বিত ক্যাটালগ সহ লঞ্চ করতে দেখে আনন্দিত৷
webcomponents.org সাইটটিতে ওয়েব কম্পোনেন্টস স্পেক্স , ওয়েব কম্পোনেন্ট সম্প্রদায়ের আপডেট এবং বিষয়বস্তু সম্পর্কে তথ্য রয়েছে এবং ওপেন-সোর্স উপাদানের জন্য ডকুমেন্টেশন এবং অন্যান্য ডেভেলপারদের দ্বারা নির্মিত উপাদানগুলির সংগ্রহ প্রদর্শন করে৷
আপনি Google এর পলিমারের মতো একটি লাইব্রেরি ব্যবহার করে আপনার প্রথম উপাদান তৈরি করা শুরু করতে পারেন, অথবা সরাসরি নিম্ন-স্তরের ওয়েব কম্পোনেন্ট API ব্যবহার করতে পারেন। তারপর webcomponents.org এ আপনার উপাদান প্রকাশ করুন ।
সুখী কম্পোনেন্টাইজিং!