ওয়েব উপাদানগুলি আপনাকে কাস্টম HTML উপাদান তৈরি করতে দেয়। আপনি আধুনিক ফ্রন্ট-এন্ড জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলিতে সর্বাধিক ঘন ঘন ব্যবহৃত ওয়েব উপাদানগুলি দেখতে পাবেন। তবে "ওয়েব উপাদান" আসলে একটি ডাব্লু 3 সি ওয়েব স্ট্যান্ডার্ড এবং দরকারী হতে কাঠামোর প্রয়োজন হয় না।
ওয়েব উপাদানগুলি কি?
ওয়েব উপাদানগুলি HTML এর জন্য লেগোয়ের মতো কাজ করে। এগুলি হ'ল এই প্রযুক্তির একটি সংগ্রহ যা এইচটিএমএলকে আরও কার্যকর এবং পুনরায় ব্যবহারযোগ্য করে তুলতে সহায়তা করে। আরও পটভূমির জন্য, ডাব্লু 3 ওয়েব উপাদানগুলির স্পেসিফিকেশন এবং ওয়েব উপাদানগুলিতে মজিলা বিকাশকারী নেটওয়ার্কের পৃষ্ঠা দেখুন ।
এই প্রযুক্তিগুলি হ'ল:
- কাস্টম উপাদান
- এইচটিএমএল টেম্পলেট
- ছায়া ডোম
- ইএস মডিউলগুলি
ঘুরে আসুন এগুলি একবার দেখুন।
কাস্টম উপাদানসমূহ
কাস্টম উপাদানগুলি হ'ল বিশেষ এইচটিএমএল উপাদান যা জাভাস্ক্রিপ্ট আরও কার্যকর করে তোলে। এগুলি সর্বদা কলব্যাক ছাড়াই সর্বশেষে ডেটা প্রদর্শন করতে ব্যবহৃত হয়। আপনি তাদের যে কোনও নাম রাখতে পারেন anything
এইচটিএমএল টেম্পলেট
টেমপ্লেটগুলি এইচটিএমএলের পুনঃব্যবহারযোগ্য অংশগুলি। এগুলি আইটেমগুলির জন্য দুর্দান্ত যা একাধিক জায়গায় বা একাধিক পৃষ্ঠায় যেমন শিরোনাম, পাদচরণ এবং মেনুগুলিতে যায়।
ছায়া ডোম
ডিওএম হ'ল আঠালো যা ব্রাউজারে আপনি যা দেখেন তা এইচটিএমএল কোডের সাথে আবদ্ধ করে দেয় শেডো ডমটি ডোমের একটি অংশ যা আপনাকে মার্কআপ, স্টাইল এবং কার্যকারিতা পৃথক রাখতে দেয়।
ছায়া DOM ব্যবহার করে, প্রতিটি কাস্টম উপাদান নিজস্ব ডিওএম পেতে পারে। এটি করার ফলে আপনি প্রভাবিত হতে চান না এমন উপাদানগুলি পরিবর্তন করে স্টাইলিং এবং জাভাস্ক্রিপ্ট ফাংশন রাখে।
ইএস মডিউলগুলি
এগুলি হল বিশেষ জাভাস্ক্রিপ্ট লাইব্রেরি যা ওয়েব উপাদানগুলিকে কাজ করে।
ওয়েব উপাদানগুলির অন্যতম প্রধান সুবিধা হ'ল আপনি যে কোনও জায়গায় নিজের কাস্টম এইচটিএমএল পুনরায় ব্যবহার করতে পারেন। যেহেতু ওয়েব উপাদানগুলি সরল এইচটিএমএল এবং জাভাস্ক্রিপ্ট, সেগুলি ভ্যানিলা জাভাস্ক্রিপ্ট অ্যাপ্লিকেশনগুলির পাশাপাশি ফ্রেমওয়ার্কগুলির সাথে সামঞ্জস্যপূর্ণ। আপনি ওয়েবকম্পোন.আরজে আরও শিখতে পারেন।
একটি ফ্রেমওয়ার্ক সহ ওয়েব উপাদান
ওয়েব উপাদান ব্যবহার শুরু করার সবচেয়ে সহজ উপায় হ'ল একটি ফ্রেমওয়ার্ক। ওয়েব উপাদানগুলি প্রায় কাছাকাছি আসার আগে, অ্যাঙ্গুলার.জেএস একটি একই ধরণের কার্যকারিতা সরবরাহ করে যার নাম নির্দেশিকা। উপাদানগুলি স্ট্যান্ডার্ড হওয়ার আগে তারা উপাদানগুলির মতো একই কাজ করে।
এখন যে উপাদানগুলি একটি স্ট্যান্ডার্ড, সেখানে অন্যান্য ফ্রেমওয়ার্ক রয়েছে যা ওয়েব উপাদান ধারণাটি তৈরি করে। তারা ওয়েব উপাদানগুলি আরও সহজ এবং আরও প্রবাহিত করার পাশাপাশি নিম্ন-স্তরের জাভাস্ক্রিপ্ট র জটিলতা অনেকটা দূরে রেখে দেয়।
ভ্যূ
Vue.js একটি জনপ্রিয় উপাদান-ভিত্তিক ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা বিকাশকারীদের মধ্যে পছন্দসই। ভ্যু শেখা সহজ এবং প্রোগ্রাম সহজ easy ফ্রেমওয়ার্কটি বেসিক এইচটিএমএল ওয়েবসাইটে সাধারণ উপাদানগুলি যুক্ত করা সহজ করে তোলে।
প্রতিক্রিয়া
প্রতিক্রিয়া একটি ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা বাণিজ্যিকভাবে ব্যাপকভাবে গৃহীত হয়েছে adopted এই কাঠামোটি বিকাশকারীদের মধ্যেও প্রিয়। প্রতিক্রিয়া একক স্ক্রিপ্টে এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট রেখে ওয়েব বিকাশকে সহজ করার জন্য সবচেয়ে বেশি পরিচিত।
আরও শিখতে, ওয়েব অ্যাপ্লিকেশনগুলি তৈরি করতে প্রতিক্রিয়া জানার জন্য আমাদের টিউটোরিয়ালগুলির রাউন্ডআপটি দেখুন।
একটি ফ্রেমওয়ার্ক ছাড়া ওয়েব উপাদান
আপনি সরল জাভাস্ক্রিপ্টে ওয়েব উপাদান লিখতে পারেন। তবে এটি করা কঠিন, বিশেষত নতুনদের জন্য। যদিও লাইটওয়েট লাইব্রেরি রয়েছে যা আপনি আপনার বিদ্যমান কোডটিতে যুক্ত করতে পারেন। তারা আপনাকে পূর্ণ ফ্রেমওয়ার্কের উচ্চ ওভারহেড ছাড়াই আধুনিক জাভাস্ক্রিপ্ট অনুশীলনগুলির স্বাচ্ছন্দ্য দেয়।
পলিমার
পলিমার ওয়েব উপাদান চলাচলে গুগলের অবদান। এটি হ'ল লাইটওয়েট লাইব্রেরিগুলির একটি সংগ্রহ যা সাধারণ প্লাস্টিক জাভাস্ক্রিপ্টের চেয়ে কাস্টম উপাদান তৈরি করা সহজ করে তোলে। এটি কাস্টম উপাদানগুলির পাশাপাশি টেমপ্লেট তৈরির জন্য গ্রন্থাগার রয়েছে।
পলিমার পুরাতন ব্রাউজারগুলির সাথে সামঞ্জস্যতা নিশ্চিত করতে পলিফিলগুলির জন্য একটি গ্রন্থাগার রয়েছে। প্লেইন এইচটিএমএলতে উপাদান নকশা যুক্ত করার জন্য উপাদান ডিজাইনের উপাদানগুলির একটি প্রাথমিক প্রকাশও রয়েছে।
পাতলা
আরেকটি বিকল্প হ'ল স্লিম.জেএস, একটি সমস্ত-ইন-ওয়ান লাইব্রেরি যা একটি সাধারণ ওয়েবসাইটে যুক্ত করা সহজ করে তোলে। এটি কাস্টম উপাদান তৈরির প্রক্রিয়াটিকে প্রবাহিত করে এবং ছায়া DOM এ সরাসরি অ্যাক্সেস সরবরাহ করে।
স্টেনসিল
সর্বশেষে তবে সর্বোত্তম নয় স্টেনসিল, যা আপনাকে উভয় বিশ্বের সেরা দেয় both এটি প্রতিক্রিয়াটির অনুরূপ এবং একই কার্যকারিতা প্রচুর সরবরাহ করে। তবে এটি আপনাকে ভারী-শুল্ক কাঠামোতে লক না করে ফ্রেমওয়ার্ক-স্তরের কার্যকারিতা দেয়।
স্টেনসিল আপনার উপাদানগুলি প্রাক-সংকলন করে, যা এগুলিকে হালকা করে তোলে। বিপরীতে, প্রতিক্রিয়াযুক্ত ফ্রেমওয়ার্কগুলি পুরো ফ্রেমওয়ার্কটিকে ব্রাউজারে লোড করে এবং ফ্লাইয়ের উপাদানগুলি সংকলন করে। স্টেনসিল উপাদানগুলি ব্রাউজারে পৌঁছানোর সময় এগুলি কেবল ভ্যানিলা জাভাস্ক্রিপ্ট এবং এইচটিএমএল ছাড়া কোনও অতিরিক্ত জিনিসপত্র নেই।
ওয়েব উপাদান এবং ওয়েব ডিজাইন
উপাদান ব্যবহারে অন্যতম প্রধান বাধা হ'ল বুটস্ট্র্যাপের মতো নকশার ফ্রেমওয়ার্কের ক্ষতি। প্রযুক্তিগতভাবে, আপনি কোনও উপাদান-ভিত্তিক ওয়েবসাইটের সাথে বুটস্ট্র্যাপ ব্যবহার করতে পারেন। এবং প্রতিক্রিয়া জন্য একটি বুটস্ট্র্যাপ পোর্ট আছে। তবে আপনি যদি স্টেনসিল বা ভ্যু এর মতো কিছু ব্যবহার করতে চান তবে আপনি আপনার উপাদান এবং কাঠামোর মধ্যে সামঞ্জস্যের অভাব নিয়ে অসন্তুষ্ট হতে পারেন।
Ditionতিহ্যবাহী ওয়েব ডিজাইন ফ্রেমওয়ার্ক
সুসংবাদটি হ'ল বেছে নিতে বেশ কয়েকটি ডিজাইনের ফ্রেমওয়ার্ক রয়েছে। ভাদিন কিছু সুন্দর উপাদান সরবরাহ করে। একটি এন্টারপ্রাইজ স্বাদ জন্য, ওপেনআইআই 5 আছে । এবং ইতিমধ্যে উল্লিখিত হিসাবে, গুগলের পলিমার পাশাপাশি মেটালিয়াল ইউআই উপাদানগুলি সরবরাহ করে।
খারাপ খবরটি হ'ল আপনি সেই ফ্রেমওয়ার্কগুলির কোনওটিতে বুটস্ট্র্যাপ থেকে যে অভিজ্ঞতা পেয়েছেন তেমন অভিজ্ঞতা পাবেন না। এবং তারা বেশিরভাগ ডিজাইনের ফ্রেমওয়ার্কগুলিতে আপনি টাইপোগ্রাফির মতো দেখেন এমন অনেক উপাদান হারিয়েছে।
উপাদান-ভিত্তিক ডিজাইন ফ্রেমওয়ার্ক পদ্ধতির অর্থ কী?
ওয়েব উপাদানগুলির মতো একটি ভিন্ন প্রযুক্তিও একটি ভিন্ন পদ্ধতির দাবি রাখে। টাচায়ন্স হ'ল সর্বোত্তম পন্থা। ডিজাইনারদের পক্ষে এটি সহজ, তবে এটি বিকাশকারীদের একটি শক্ত এবং পরিষ্কার ভিত্তি দিতে পারে। টাচিয়ন্সটি মোবাইল-প্রথম এবং এটি নকশার একটি ধারাবাহিকতা সরবরাহ করে যা সূক্ষ্মভাবে সুন্দর ফলাফল উত্পন্ন করে।
ট্যাচইনস সিএসএস ক্লাসকে ছোট্ট ছোট্ট ব্যবহারের জন্য ভেঙে দেয়। উদাহরণস্বরূপ, আপনি এটি ব্যবহার করে কীভাবে একটি বোতাম তৈরি করেন:
<a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-black" href="#0">Button Text</a>
বেশিরভাগ ডিজাইনের ফ্রেমওয়ার্কগুলিতে আপনি লিঙ্কটি কোণার বৃত্তাকারে একটি ক্লাসের বোতাম এবং অন্য শ্রেণি দিয়েছিলেন। টাচায়নেসে, আপনি ফ্লাইতে আপনার প্যাডিং, সীমানা, রঙ ইত্যাদি বেছে নিন। সমস্ত সংক্ষিপ্ত বিবরণ প্রথমে জটিল মনে হতে পারে তবে তারা শিখতে সহজ একটি নিয়মিত নামকরণের ধরণ অনুসরণ করে।
ক্ষুদ্রতম সম্ভাব্য শ্রেণীটি এমন একটি দৃষ্টিভঙ্গি যা traditionalতিহ্যবাহী ওয়েবসাইটগুলির জন্য কাজ করে না কারণ এটি আপনার এইচটিএমএল ক্লাসকে আটকে দেয়। তবে উপাদান-ভিত্তিক আর্কিটেকচারের সাহায্যে আপনি সম্ভবত একই অ্যাপ্লিকেশনটিতে একই বোতামটি ব্যবহার করতে যাচ্ছেন going এর অর্থ হ'ল আপনার সম্পূর্ণ ওয়েবসাইটের জন্য আপনাকে কেবল একবার সেই বোতামটি তৈরি করতে হবে।
উপাদানগুলিতে চিন্তা করা
আর একটি প্রতিবন্ধকতা আপনার মস্তিষ্ককে traditionalতিহ্যবাহী ওয়েবসাইটের লেআউটগুলি থেকে উপাদান-ভিত্তিক কাঠামোয় গিয়ার পরিবর্তন করতে পারে getting আপনাকে উপাদানগুলির মধ্যে চিন্তা করতে শেখার জন্য দুটি কৌশল রয়েছে।
পারমাণবিক পদ্ধতির
একটি ওয়েবপৃষ্ঠাকে জীব হিসাবে ভাবুন। নায়ক বিভাগ, দাম নির্দেশিকা এবং ব্যবহারকারীর পর্যালোচনার মতো অংশগুলি জীবের কোষগুলির মতো। এগুলি এমন টুকরো যা আপনি নিরাপদে তাদের নিজস্ব উপাদানগুলিতে সরাতে পারবেন, আপনি সেগুলি পুনরায় ব্যবহার করুন বা না করুন whether
বোতাম, শিরোনাম এবং উদ্ধৃতিগুলি পরমাণুর মতো। পারমাণবিকতম সম্ভাব্যতম অংশ। যখন কোনও উপাদানকে আরও ভেঙে ফেলার কোনও অর্থ হয় না, এটি পরমাণু। এগুলি সাধারণত এমন উপাদান যা আপনি আপনার প্রকল্প জুড়ে এবং সম্ভবত প্রকল্পগুলির মধ্যে ব্যবহার করবেন।
DRY পদ্ধতির
অথবা আপনি কেবল সেই সমস্ত জীব, কোষ এবং পরমাণু আজেবাজে কথা ভুলে এটিকে শুকিয়ে রাখতে পারেন। ডিআরওয়াই মানে হ'ল ডোন রিপিট ইয়োরসেলস।
বড় বা ছোট কিছু যে কোনও উপাদান হতে পারে। তাই যথারীতি আপনার HTML লিখুন। আপনি যখন কোনও গ্যালারী বা পাদলেখের মতো পুনঃব্যবহার করতে চান এমন কিছু খুঁজে পান, তখন এটির নিজস্ব উপাদানটি বিভক্ত করুন।
আপনার পরবর্তী প্রকল্পে আপনার কি ওয়েব উপাদান উচিত?
প্রধান বিষয়গুলি বিবেচনা করার জন্য আপনার টিম এবং ওয়েব মান standards
সমস্ত বড় ব্রাউজার ওয়েব উপাদান গ্রহণ করেছে। CanIUse কাস্টম উপাদানগুলিকে 93 শতাংশ গ্রহণের হার এবং 95% টেম্পলেটগুলিতে রেট দেয়, তাই তারা নিরাপদ। এবং কয়েকটি স্ট্রাগলারের জন্য পলিফিল রয়েছে যা ওয়েব উপাদানগুলিকে সমর্থন করে না। এর অর্থ হ'ল সম্মতি একটি অ-ইস্যু।
আপনার যদি ফ্রেমওয়ার্ক বা জাভাস্ক্রিপ্টের অভিজ্ঞতা নেই এমন একটি দল থাকে তবে তারা এই নতুন প্রযুক্তি গ্রহণের জন্য লড়াই করতে পারে। তবে তারা যদি সম্ভবত এমন যে কোনও নতুন প্রযুক্তি গ্রহণের জন্য লড়াই করতে চাই। এবং যদি আপনি একা হন তবে এর জন্য যান! আপনার দক্ষতা তৈরি করতে সর্বদা একটি ভাল ধারণা।
ওয়েব উপাদানগুলি গ্রহণের সবচেয়ে শক্ত অংশগুলি হ'ল ডিজাইনের ফ্রেমওয়ার্কগুলির সংকট এবং উপাদানগুলির বিবেচনায় শেখা শেখা। তবে আমরা তাদের দুটিই coveredেকে রেখেছি। ওয়েব উপাদানগুলি ২০১৪ সাল থেকে প্রায় রয়েছে, সুতরাং এগুলি কোনও নতুন প্রযুক্তি নয়। তবে তারা আরও উন্নত প্রযুক্তি।
