ওয়েব কম্পোনেন্টগুলি ওয়েবের জন্য তৈরি করার বিষয়ে আপনি যা মনে করেন তার সবকিছু পরিবর্তন করতে চলেছে৷ প্রথমবারের মতো, ওয়েবে নিম্ন স্তরের API থাকবে যা আমাদের শুধুমাত্র আমাদের নিজস্ব HTML ট্যাগ তৈরি করতেই নয়, যুক্তি ও CSSকেও এনক্যাপসুলেট করতে দেয়। আর কোন গ্লোবাল স্টাইলশীট স্যুপ বা বয়লারপ্লেট কোড নেই! এটি একটি সাহসী নতুন বিশ্ব যেখানে সবকিছুই একটি উপাদান।
ডটজেএস থেকে আমার বক্তৃতায়, আমি ওয়েব কম্পোনেন্টগুলি কী অফার করে এবং আধুনিক টুলিং ব্যবহার করে কীভাবে সেগুলি তৈরি করতে হয় তা নিয়ে চলেছি। আমি আপনাকে দেখাব Yeoman , পলিমার ব্যবহার করে ওয়েব-অ্যাপস তৈরিকে স্ট্রীমলাইন করার জন্য টুলের একটি ওয়ার্কফ্লো, আজকে আধুনিক ব্রাউজারে ওয়েব কম্পোনেন্ট ব্যবহার করে অ্যাপ ডেভেলপ করার জন্য পলিফিল এবং চিনির একটি লাইব্রেরি।
কাস্টম উপাদান তৈরি করুন এবং অন্যদের দ্বারা তৈরি উপাদান ইনস্টল করুন
এই আলোচনায় আপনি শিখবেন:
- ওয়েব কম্পোনেন্ট কম্পোজ করা চারটি ভিন্ন স্পেক্স সম্পর্কে: কাস্টম এলিমেন্টস , টেমপ্লেট , শ্যাডো ডম এবং এইচটিএমএল ইম্পোর্ট ।
- কীভাবে আপনার নিজস্ব কাস্টম উপাদানগুলি সংজ্ঞায়িত করবেন এবং বোওয়ার ব্যবহার করে অন্যদের দ্বারা তৈরি উপাদানগুলি ইনস্টল করবেন
- জাভাস্ক্রিপ্ট লিখতে কম সময় এবং পেজ তৈরিতে বেশি সময় ব্যয় করুন
- জেনারেটর-পলিমার সহ পলিমার ব্যবহার করে একটি অ্যাপ্লিকেশন ভারার জন্য আধুনিক ফ্রন্ট-এন্ড টুলিং ( ইওমান ) ব্যবহার করুন
- পলিমার সুপার কীভাবে ওয়েব উপাদান তৈরি করে পরিবর্তন করে।
উদাহরণস্বরূপ, পলিমারের ওয়েব কম্পোনেন্ট পলিফিলস এবং লাইব্রেরি নিজেই ইনস্টল করতে, আপনি এই ওয়ান লাইনারটি চালাতে পারেন:
bower install --save Polymer/platform Polymer/polymer
এটি একটি bower_components ফোল্ডার যোগ করে এবং উপরের প্যাকেজগুলি যোগ করে। --save এগুলিকে আপনার অ্যাপের bower.json ফাইলে যোগ করে।
পরে, আপনি যদি পলিমারের অ্যাকর্ডিয়ন উপাদান ইনস্টল করতে চান তবে আপনি চালাতে পারেন:
bower install --save Polymer/polymer-ui-accordion
এবং তারপর এটি আপনার অ্যাপ্লিকেশনে আমদানি করুন:
<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">
সময় বাঁচাতে, আপনার প্রয়োজনীয় সমস্ত নির্ভরতা সহ একটি নতুন পলিমার অ্যাপ তৈরি করা, বয়লারপ্লেট কোড এবং আপনার অ্যাপটি অপ্টিমাইজ করার জন্য টুলিং এই অন্য একটি লাইনার দিয়ে ইওম্যানের সাথে করা যেতে পারে:
yo polymer
বোনাস ওয়াকথ্রু
আমি টকটিতে যে পলিমার জুকবক্স অ্যাপটি দেখাই তার 30 মিনিটের বোনাস ওয়াকথ্রুও রেকর্ড করেছি।
বোনাস ভিডিওতে কভার করা হয়েছে:
- "সবকিছুই একটি উপাদান" মন্ত্রটির অর্থ কী
- পলিমারের প্ল্যাটফর্ম পলিফিল এবং উপাদানগুলি ইনস্টল করতে বোয়ার কীভাবে ব্যবহার করবেন
- ইওমান জেনারেটর এবং সাব-জেনারেটরগুলির সাথে আমাদের জুকবক্স অ্যাপের ভারা
- বয়লারপ্লেটের মাধ্যমে প্ল্যাটফর্মের বৈশিষ্ট্যগুলি বোঝা
- আমি কীভাবে কার্যকরীভাবে একটি কৌণিক অ্যাপের মাধ্যমে পলিমারে পোর্ট করেছি।
আমরা আমাদের নতুন পলিমার উপাদানগুলিকে ভারা দেওয়ার জন্য ইওমান সাব-জেনারেটর ব্যবহার করি। যেমন foo এলিমেন্টের জন্য বয়লারপ্লেট তৈরি করতে আমরা চালাই:
yo polymer:element foo
যা আমাদেরকে স্বয়ংক্রিয়ভাবে উপাদানটি আমদানি করতে চাই কিনা, একজন কনস্ট্রাক্টর প্রয়োজন কিনা এবং কিছু অন্যান্য পছন্দের জন্য আমাদের অনুরোধ করবে।
উভয় আলোচনায় দেখানো অ্যাপের সর্বশেষ উৎস এখন GitHub- এ রয়েছে। আমি এটিকে আরও সংগঠিত করতে এবং পড়তে আরও কিছুটা সহজ করার জন্য এটিকে আরও কিছুটা রিফ্যাক্টর করেছি।
অ্যাপের পূর্বরূপ:
আরও পড়া
সংক্ষেপে, পলিমার হল একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা ওয়েব কম্পোনেন্টগুলিকে এখন আধুনিক ওয়েব ব্রাউজারগুলিতে সক্ষম করে কারণ আমরা সেগুলি স্থানীয়ভাবে প্রয়োগ করার জন্য অপেক্ষা করি। আধুনিক টুলিং এগুলি ব্যবহার করে আপনার কর্মপ্রবাহকে উন্নত করতে সাহায্য করতে পারে এবং আপনার নিজের ট্যাগগুলি তৈরি করার সময় আপনি ইওম্যান এবং বোওয়ার ব্যবহার করে উপভোগ করতে পারেন।
আরও কয়েকটি নিবন্ধ যা এই বিষয়ে পরীক্ষা করার যোগ্য: