বিদ্যুত-দ্রুত টেমপ্লেট এবং ওয়েব উপাদান - lit-html & LitElement

আজ আমরা আমাদের দুটি পরবর্তী-প্রজন্মের ওয়েব ডেভেলপমেন্ট লাইব্রেরির প্রথম স্থিতিশীল প্রকাশ ঘোষণা করতে পেরে উত্তেজিত: lit-html এবং LitElement ।

lit-html হল HTML টেমপ্লেটিং-এর জন্য একটি ক্ষুদ্র, দ্রুত, অভিব্যক্তিপূর্ণ লাইব্রেরি। LitElement হল lit-html টেমপ্লেট দিয়ে ওয়েব কম্পোনেন্ট তৈরি করার জন্য একটি সাধারণ বেস ক্লাস।

আপনি যদি প্রকল্পগুলি অনুসরণ করে থাকেন তবে আপনি সম্ভবত জানেন যে lit-html এবং LitElement কী সম্পর্কে (এবং আপনি যদি চান তবে আপনি শেষ পর্যন্ত এড়িয়ে যেতে পারেন)। আপনি যদি lit-html এবং LitElement-এ নতুন হন, তাহলে একটি ওভারভিউয়ের জন্য পড়ুন।

lit-html: HTML টেমপ্লেটিং-এর জন্য একটি ক্ষুদ্র, দ্রুত লাইব্রেরি

lit-html হল HTML টেমপ্লেটিং-এর জন্য একটি ক্ষুদ্র (3k বান্ডিল, মিনিফাইড এবং জিজিপড) এবং দ্রুত জাভাস্ক্রিপ্ট লাইব্রেরি। lit-html কার্যকরী প্রোগ্রামিং পদ্ধতির সাথে ভাল কাজ করে, আপনাকে আপনার অ্যাপ্লিকেশনের UI ঘোষণামূলকভাবে প্রকাশ করতে দেয়, এটির একটি ফাংশন হিসাবে।

const myTemplate = (name) => html`
    <div>
      Hi, my name is ${name}.
    </div>
`;

এটি একটি lit-html টেমপ্লেট রেন্ডার করা সহজ:

render(myTemplate('Ada'), document.body);

একটি টেমপ্লেট পুনরায় রেন্ডার করা শুধুমাত্র পরিবর্তিত ডেটা আপডেট করে:

render(myTemplate('Grace'), document.body);

lit-html দক্ষ, অভিব্যক্তিপূর্ণ এবং এক্সটেনসিবল:

  • দক্ষ । lit-html বজ্র দ্রুত। যখন ডেটা পরিবর্তন হয়, lit-html-এর কোনো পার্থক্য করার প্রয়োজন হয় না; পরিবর্তে, এটি মনে রাখে যে আপনি আপনার টেমপ্লেটে অভিব্যক্তিগুলি কোথায় সন্নিবেশিত করেছেন এবং শুধুমাত্র এই গতিশীল অংশগুলি আপডেট করে।
  • অভিব্যক্তিপূর্ণ । lit-html আপনাকে জাভাস্ক্রিপ্ট, ঘোষণামূলক UI এবং কার্যকরী প্রোগ্রামিং প্যাটার্নের সম্পূর্ণ শক্তি দেয়। একটি lit-html টেমপ্লেটের অভিব্যক্তিগুলি জাভাস্ক্রিপ্ট, তাই আপনাকে একটি কাস্টম সিনট্যাক্স শিখতে হবে না এবং আপনার হাতে ভাষার সমস্ত অভিব্যক্তি রয়েছে। lit-html নেটিভভাবে অনেক ধরণের মান সমর্থন করে: স্ট্রিং, DOM নোড, অ্যারে এবং আরও অনেক কিছু। টেমপ্লেটগুলি নিজেই এমন মান যা গণনা করা যায়, ফাংশনে এবং থেকে পাস করা যায় এবং নেস্ট করা যায়।
  • এক্সটেনসিবল : lit-html এছাড়াও কাস্টমাইজযোগ্য এবং এক্সটেনসিবল—আপনার নিজস্ব টেমপ্লেট নির্মাণ কিট। নির্দেশাবলী মানগুলি কীভাবে পরিচালনা করা হয় তা কাস্টমাইজ করে, অ্যাসিঙ্ক্রোনাস মান, কার্যকর কী-রিপিট, ত্রুটি সীমানা এবং আরও অনেক কিছুর অনুমতি দেয়। lit-html-এ বেশ কিছু রেডি-টু-ব্যবহারের নির্দেশ রয়েছে এবং এটি আপনার নিজের সংজ্ঞায়িত করা সহজ করে তোলে।

বেশ কয়েকটি লাইব্রেরি এবং প্রকল্প ইতিমধ্যেই lit-html অন্তর্ভুক্ত করেছে। আপনি গিটহাবের দুর্দান্ত-লিট-এইচটিএমএল রেপোতে এই কয়েকটি লাইব্রেরির একটি তালিকা খুঁজে পেতে পারেন।

যদি টেমপ্লেটিংই আপনার প্রয়োজন হয়, আপনি এখন lit-html ডক্স দিয়ে শুরু করতে পারেন। আপনি যদি আপনার অ্যাপে ব্যবহার করার জন্য উপাদান তৈরি করতে চান বা আপনার দলের সাথে শেয়ার করতে চান, তাহলে আরও জানতে পড়ুন।

LitElement: একটি লাইটওয়েট ওয়েব কম্পোনেন্ট বেস ক্লাস

LitElement হল একটি লাইটওয়েট বেস ক্লাস যা ওয়েব কম্পোনেন্ট তৈরি এবং শেয়ার করা আগের চেয়ে সহজ করে তোলে।

LitElement উপাদান রেন্ডার করতে lit-html ব্যবহার করে এবং প্রতিক্রিয়াশীল বৈশিষ্ট্য এবং বৈশিষ্ট্য ঘোষণা করতে API যোগ করে। উপাদানগুলি স্বয়ংক্রিয়ভাবে আপডেট হয় যখন তাদের বৈশিষ্ট্য পরিবর্তন হয়। এবং তারা ভিন্নতা ছাড়াই দ্রুত আপডেট করে।

এখানে টাইপস্ক্রিপ্টে একটি সাধারণ LitElement উপাদান রয়েছে:

@customElement('name-tag')
class NameTag extends LitElement {
  @property()
  name = 'a secret';

  render() {
    return html`<p>Hi, my name is ${this.name}!</p>`;
  }
}

(আমাদের একটি দুর্দান্ত ভ্যানিলা জাভাস্ক্রিপ্ট এপিআইও রয়েছে।)

এটি এমন একটি উপাদান তৈরি করে যা আপনি যে কোনও জায়গায় ব্যবহার করতে পারেন যেখানে আপনি একটি নিয়মিত HTML উপাদান ব্যবহার করবেন:

<name-tag name="Ida"></name-tag>

আপনি যদি ইতিমধ্যেই ওয়েব কম্পোনেন্ট ব্যবহার করেন, তাহলে আপনি শুনে খুশি হবেন যে সেগুলি এখন ক্রোম, সাফারি এবং ফায়ারফক্সে স্থানীয়ভাবে সমর্থিত। এজ সমর্থন শীঘ্রই আসছে, এবং পলিফিলগুলি শুধুমাত্র লিগ্যাসি ব্রাউজার সংস্করণের জন্য প্রয়োজন৷

আপনি যদি ওয়েব কম্পোনেন্টে নতুন হয়ে থাকেন, তাহলে আপনার তাদের চেষ্টা করা উচিত! ওয়েব কম্পোনেন্ট আপনাকে এইচটিএমএলকে এমনভাবে প্রসারিত করতে দেয় যা অন্যান্য লাইব্রেরি, টুলস এবং ফ্রেমওয়ার্কের সাথে ইন্টারঅপারেটিং করে। এটি একটি বড় সংস্থার মধ্যে UI উপাদানগুলি ভাগ করে নেওয়ার জন্য, ওয়েবে যে কোনও জায়গায় ব্যবহারের জন্য উপাদানগুলি প্রকাশ করার জন্য বা মেটেরিয়াল ডিজাইনের মতো UI ডিজাইন সিস্টেম তৈরি করার জন্য তাদের আদর্শ করে তোলে৷

আপনি যেখানেই HTML ব্যবহার করেন সেখানে আপনি কাস্টম উপাদানগুলি ব্যবহার করতে পারেন: আপনার প্রধান নথিতে, একটি CMS-এ, মার্কডাউনে, বা প্রতিক্রিয়া এবং Vue-এর মতো ফ্রেমওয়ার্ক দিয়ে তৈরি ভিউতে৷ এছাড়াও আপনি অন্যান্য ওয়েব উপাদানগুলির সাথে LitElement উপাদানগুলিকে মিশ্রিত এবং মেলাতে পারেন, সেগুলি ভ্যানিলা ওয়েব প্রযুক্তি ব্যবহার করে লেখা হয়েছে বা Salesforce Lightning Web Components , Ionic's Stencil , SkateJS বা পলিমার লাইব্রেরির মতো সরঞ্জামগুলির সাহায্যে তৈরি করা হয়েছে৷

শুরু করুন

lit-html এবং LitElement চেষ্টা করতে চান? একটি ভাল সূচনা পয়েন্ট হল LitElement টিউটোরিয়াল:

আপনি যদি নিজে থেকে lit-html ব্যবহার করতে আগ্রহী হন, অথবা অন্য প্রোজেক্টে lit-html টেমপ্লেটিং একীভূত করতে চান, lit-html ডক্স দেখুন:

সর্বদা হিসাবে, আপনি কি মনে করেন তা আমাদের জানান। আপনি স্ল্যাক বা টুইটারে আমাদের সাথে যোগাযোগ করতে পারেন। আমাদের প্রকল্পগুলি ওপেন সোর্স (অবশ্যই!) এবং আপনি বাগ রিপোর্ট করতে পারেন, ফিচারের অনুরোধ করতে পারেন বা GitHub-এ উন্নতির পরামর্শ দিতে পারেন: