Polymer হল ওয়েব কম্পোনেন্টের অসাধারণ ভবিষ্যতের একটি গেটওয়ে। আমরা কাস্টম এলিমেন্ট ব্যবহার ও তৈরি করার প্রসেস সহজ করতে চাই। গত এক বছর ধরে, টিমটি বিকশিত স্পেসিফিকেশনের জন্য পলিফিলের একটি সেটে কঠোর পরিশ্রম করছে। তার উপরে, ওয়েব কম্পোনেন্ট তৈরি করা আরও সহজ করতে আমরা একটি সুবিধাজনক সুগারিং লাইব্রেরি তৈরি করেছি। সবশেষে, আপনার অ্যাপে আবার ব্যবহার করার জন্য আমরা UI ও ইউটিলিটি এলিমেন্টের একটি সেট তৈরি করছি। ২০১৩ Chrome Dev Summit-এ, আমি Polymer-এর বিভিন্ন অংশ এবং আমাদের "সবকিছুই একটি এলিমেন্ট" মন্ত্রের পিছনে থাকা দর্শন সম্পর্কে বিস্তারিত আলোচনা করেছি।
Slides: http://html5-demos.appspot.com/static/cds2013/index.html
"সবকিছুই একটি এলিমেন্ট" (<select> থেকে কাস্টম এলিমেন্ট পর্যন্ত)
Slides: http://html5-demos.appspot.com/static/cds2013/index.html#6
১৯৯০-এর দশকে ওয়েব পেজ তৈরি করার ক্ষেত্রে সীমাবদ্ধতা থাকলেও তা ছিল শক্তিশালী। আমাদের কাছে মাত্র কয়েকটি এলিমেন্ট ছিল। সবচেয়ে শক্তিশালী অংশ?...সবকিছুই ছিল ডিক্লেরেটিভ। অনেক জাভাস্ক্রিপ্ট না লিখেই একটি পৃষ্ঠা তৈরি করা, ফর্ম কন্ট্রোল যোগ করা এবং একটি "অ্যাপ" তৈরি করা অত্যন্ত সহজ ছিল।
<select> এলিমেন্টটি নিন। এলিমেন্টে অনেক কার্যকারিতা বিল্ট-ইন থাকে, শুধু এটি ঘোষণা করলেই হয়:
- HTML অ্যাট্রিবিউটের মাধ্যমে কাস্টমাইজ করা যায়
- ডিফল্ট UI সহ চাইল্ড (যেমন,
<option>) রেন্ডার করে, তবে অ্যাট্রিবিউটের মাধ্যমে কনফিগার করা যায়। <form>-এর মতো অন্যান্য প্রসঙ্গে উপযোগী- DOM API আছে: প্রপার্টি ও পদ্ধতি
- আকর্ষণীয় কিছু ঘটলে ইভেন্ট ফায়ার করে
ওয়েব কম্পোনেন্ট, ওয়েব ডেভেলপমেন্টের এই সুবর্ণ যুগে ফিরে যাওয়ার জন্য টুল প্রদান করে। এমন একটি যেখানে আমরা নতুন এলিমেন্ট তৈরি করতে পারি, যা <select>-এর কথা মনে করিয়ে দেয়, কিন্তু ২০১৪-এর ব্যবহারের জন্য ডিজাইন করা হয়েছে। যেমন, 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="">
Polymer-এ আমরা ঠিক এই পদ্ধতিই অনুসরণ করছি। মনোলিথিক জাভাস্ক্রিপ্ট-ভিত্তিক ওয়েব অ্যাপ তৈরি করার পরিবর্তে, আসুন আমরা পুনর্ব্যবহারযোগ্য এলিমেন্ট তৈরি করি। সময়ের সাথে সাথে, ছোট ছোট এলিমেন্ট একসাথে কম্পোজ করার মাধ্যমে একটি সম্পূর্ণ অ্যাপ তৈরি হয়। এমনকি, সম্পূর্ণ অ্যাপও একটি এলিমেন্ট হতে পারে:
<my-app></my-app>
Polymer-এর স্পেশাল টাচ দিয়ে ওয়েব কম্পোনেন্ট তৈরি করা
Slides: http://html5-demos.appspot.com/static/cds2013/index.html#37
ওয়েব কম্পোনেন্ট ভিত্তিক অ্যাপ্লিকেশন তৈরি করার জন্য Polymer-এ একাধিক সুবিধা আছে:
- ডিক্লারেটিভ এলিমেন্ট রেজিস্ট্রেশন:
<polymer-element> - ডিক্লারেটিভ ইনহেরিটেন্স:
<polymer-element extends="..."> - অনুজ্ঞাসূচক টু-ওয়ে ডেটা-বাইন্ডিং:
<input id="input" value=""> - ডিক্লারেটিভ ইভেন্ট হ্যান্ডলার:
<button on-click="" - প্রকাশিত প্রপার্টি:
xFoo.bar = 5<-><x-foo bar="5"> - প্রপার্টি পর্যবেক্ষণ:
barChanged: function() {...} - ডিফল্ট হিসেবে PointerEvents / PointerGestures
এই গল্পের মূল কথা হল, Polymer এলিমেন্ট লেখার অর্থ হল ডিক্লেরেটিভ হওয়া। আপনাকে যত কম কোড লিখতে হবে, তত ভাল ;)
ওয়েব কম্পোনেন্ট: ওয়েব ডেভেলপমেন্টের ভবিষ্যৎ
Slides: http://html5-demos.appspot.com/static/cds2013/index.html#26
ওয়েব কম্পোনেন্টের পিছনে থাকা স্ট্যান্ডার্ডের প্রশংসা না করলে আমার ভুল হবে। সবশেষে, Polymer এই ক্রমাগত পরিবর্তিত হয়ে চলা ফাউন্ডেশনাল API-এর উপর ভিত্তি করে তৈরি।
আমরা ওয়েব ডেভেলপমেন্টের ক্ষেত্রে এক অত্যন্ত উত্তেজনাপূর্ণ সময়ের দ্বারপ্রান্তে এসে পৌঁছেছি। ওয়েব প্ল্যাটফর্মে যোগ করা অন্যান্য নতুন ফিচারের মতো, ওয়েব কম্পোনেন্ট তৈরি করা APIগুলি চকচকে বা ব্যবহারকারী নিজে ইন্টার্যাক্ট করতে পারেন এমন নয়। এগুলি শুধুমাত্র ডেভেলপারের প্রোডাক্টিভিটির জন্য। চারটি প্রধান API-এর প্রত্যেকটি আলাদাভাবেও খুব উপযোগী, তবে একসাথে ব্যবহার করলে ম্যাজিক হয়!
- Shadow DOM - স্টাইল ও DOM এনক্যাপসুলেশন
- কাস্টম এলিমেন্ট - নতুন HTML এলিমেন্ট নির্ধারণ করুন। প্রপার্টি ও পদ্ধতি সহ তাদের একটি API দাও।
- HTML ইমপোর্ট হল CSS, JS ও HTML-এর প্যাকেজের ডিস্ট্রিবিউশন মডেল।
- টেমপ্লেট - পরে স্ট্যাম্প আউট করার জন্য মার্ক-আপের ইনার্ট চাঙ্ক নির্ধারণ করার জন্য সঠিক DOM টেমপ্লেটিং
API-এর ফান্ডামেন্টাল সম্পর্কে আরও জানতে চাইলে, webcomponents.org দেখুন।