পলিমার হল ওয়েব কম্পোনেন্টের আশ্চর্যজনক ভবিষ্যতের একটি প্রবেশদ্বার। আমরা কাস্টম উপাদানগুলি ব্যবহার এবং তৈরি করা সহজ করতে চাই। গত এক বছর ধরে, দলটি বিবর্তিত স্পেসিফিকেশনের জন্য পলিফিলের সেটে কঠোর পরিশ্রম করছে। তার উপরে, ওয়েব কম্পোনেন্ট তৈরি করা সহজ করতে আমরা একটি সুবিধাজনক সুগারিং লাইব্রেরি তৈরি করেছি। অবশেষে, আমরা আপনার অ্যাপে পুনরায় ব্যবহার করার জন্য UI এবং ইউটিলিটি উপাদানগুলির একটি সেট তৈরি করছি। 2013 সালের ক্রোম ডেভ সামিট-এ, আমি পলিমারের বিভিন্ন অংশ এবং আমাদের "সবকিছুই একটি উপাদান" মন্ত্রের পিছনের দর্শনে প্রবেশ করেছি।
স্লাইড : http://html5-demos.appspot.com/static/cds2013/index.html
"সবকিছুই একটি উপাদান" ( <select> থেকে কাস্টম উপাদান পর্যন্ত)
স্লাইড : http://html5-demos.appspot.com/static/cds2013/index.html#6
1990 এর দশকে ওয়েব পেজ তৈরি করা সীমিত, কিন্তু শক্তিশালী ছিল। আমাদের হাতে মাত্র কয়েকটি উপাদান ছিল। শক্তিশালী অংশ?... সবকিছুই ঘোষণামূলক ছিল । জাভাস্ক্রিপ্টের গবস না লিখে একটি পৃষ্ঠা তৈরি করা, ফর্ম নিয়ন্ত্রণ যোগ করা এবং একটি "অ্যাপ" তৈরি করা অসাধারণভাবে সহজ ছিল।
নম্র <select> উপাদান নিন। উপাদানটিতে একটি টন কার্যকারিতা তৈরি করা হয়েছে, কেবল এটি ঘোষণা করে:
- HTML এট্রিবিউটের মাধ্যমে কাস্টমাইজ করা যায়
- একটি ডিফল্ট UI সহ বাচ্চাদের (যেমন
<option>) রেন্ডার করে, কিন্তু বৈশিষ্ট্যের মাধ্যমে কনফিগার করা যায়। -
<form>মত অন্যান্য প্রসঙ্গে দরকারী - একটি DOM API আছে: বৈশিষ্ট্য এবং পদ্ধতি
- আকর্ষণীয় ঘটনা ঘটলে ঘটনাগুলিকে আগুন দেয়
ওয়েব কম্পোনেন্টগুলি ওয়েব ডেভেলপমেন্টের এই উত্তম দিনে ফিরে আসার জন্য টুল প্রদান করে। যেখানে আমরা নতুন উপাদান তৈরি করতে পারি, <select> এর কথা মনে করিয়ে দেয়, কিন্তু 2014 সালের ব্যবহারের ক্ষেত্রে ডিজাইন করা হয়েছে। উদাহরণস্বরূপ, যদি আজ AJAX উদ্ভাবিত হয় তবে এটি সম্ভবত একটি HTML ট্যাগ হবে ( উদাহরণ ):
<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json"}'></polymer-ajax>
অথবা প্রতিক্রিয়াশীল উপাদান যা একটি queryMatches বৈশিষ্ট্যের সাথে ডেটা-বাইন্ড করে:
<polymer-media-query query="max-width:640px" queryMatches="">
পলিমারে আমরা ঠিক এই পদ্ধতিটি গ্রহণ করছি। একচেটিয়া জাভাস্ক্রিপ্ট-ভিত্তিক ওয়েব অ্যাপ তৈরি করার পরিবর্তে, আসুন পুনরায় ব্যবহারযোগ্য উপাদান তৈরি করি। সময়ের সাথে সাথে, একটি সম্পূর্ণ অ্যাপ ছোট ছোট উপাদানগুলিকে একসাথে রচনা করার ফলে বৃদ্ধি পায়। হেক, এবং পুরো অ্যাপটি একটি উপাদান হতে পারে:
<my-app></my-app>
পলিমারের বিশেষ সস দিয়ে ওয়েব উপাদান তৈরি করা
স্লাইড : http://html5-demos.appspot.com/static/cds2013/index.html#37
পলিমারে ওয়েব কম্পোনেন্ট ভিত্তিক অ্যাপ্লিকেশন তৈরির জন্য অনেক সুবিধা রয়েছে:
- ঘোষণামূলক উপাদান নিবন্ধন:
<polymer-element> - ঘোষণামূলক উত্তরাধিকার:
<polymer-element extends="..."> - ঘোষণামূলক দ্বি-মুখী ডেটা-বাইন্ডিং:
<input id="input" value=""> - ঘোষণামূলক ইভেন্ট হ্যান্ডলার:
<button on-click="" - প্রকাশিত বৈশিষ্ট্য:
xFoo.bar = 5<-><x-foo bar="5"> - সম্পত্তি পর্যবেক্ষণ:
barChanged: function() {...} - ডিফল্টরূপে পয়েন্টার ইভেন্টস / পয়েন্টার জেসচার
গল্পের নৈতিকতা হল যে পলিমার উপাদানগুলি লেখার সমস্তটাই ঘোষণামূলক। আপনাকে যত কম কোড লিখতে হবে, তত ভাল ;)
ওয়েব উপাদান: ওয়েব বিকাশের ভবিষ্যত
স্লাইড : http://html5-demos.appspot.com/static/cds2013/index.html#26
আমি যদি ওয়েব কম্পোনেন্টগুলির পিছনের মানগুলির জন্য চিৎকার না করি তবে আমাকে বাদ দেওয়া হবে। সর্বোপরি, পলিমার এই বিকাশমান ভিত্তিগত API-এর উপর ভিত্তি করে।
আমরা ওয়েব ডেভেলপমেন্টে একটি খুব উত্তেজনাপূর্ণ সময়ের দ্বারপ্রান্তে আছি। ওয়েব প্ল্যাটফর্মে যোগ করা অন্যান্য নতুন বৈশিষ্ট্যগুলির বিপরীতে, ওয়েব উপাদানগুলি তৈরি করে এমন APIগুলি চকচকে বা ব্যবহারকারীর মুখোমুখি নয়৷ এগুলি সম্পূর্ণরূপে বিকাশকারীর উত্পাদনশীলতার জন্য। চারটি প্রধান API-এর প্রত্যেকটিই নিজেদের কাজে লাগে, কিন্তু একসঙ্গে, যাদুকরী কিছু ঘটে!
- ছায়া DOM - শৈলী এবং DOM encapsulation
- কাস্টম উপাদান - নতুন HTML উপাদান সংজ্ঞায়িত করুন। তাদের বৈশিষ্ট্য এবং পদ্ধতি সহ একটি API দিন।
- HTML আমদানি হল CSS, JS এবং HTML এর প্যাকেজের জন্য বিতরণ মডেল।
- টেমপ্লেট - মার্কআপের নিষ্ক্রিয় অংশগুলিকে পরে স্ট্যাম্প আউট করার জন্য সঠিক DOM টেমপ্লেটিং
আপনি যদি API-এর মৌলিক বিষয়গুলো সম্পর্কে আরও জানতে চান, তাহলে webcomponents.org দেখুন।