লারাভেল প্রজেক্টে আপনারও কি ব্লেইড কম্পোনেন্ট ব্যাবহার শুরু করা উচিত?

PHP-এর একটি অত্যন্ত শক্তিশালী দিক হলো এর মাধ্যমে HTML কে খুবই সহজ ভাবে টেমপ্লেটিং করা যায়।

যেমন আমরা লিখছিঃ

<!-- articles/index.php -->

<?php require_once('header.php'); ?>

<div>
  <?php echo $message; ?>
  <!--Other Html content goes here-->
</div>

<?php require_once('footer.php'); ?>

এভাবে আমরা আমাদের ওয়েব এপ্লিকেশনের ইউজার ইন্টারফেইসের(UI) বিভিন্ন অংশ আলাদা আলাদা করে নিয়ন্ত্রন করতে পারি। এটা হলো আমাদের PHP-তে সবচেয়ে পরিচিত পুরনো পদ্ধতি। এর উপর টেমপ্লেটিং ইঞ্জিন গুলো অনেক ধরনের কারিকুরি করে কিছু নিত্যপ্রয়োজনীয় বিষয়কে আরও সহজ করে দিয়েছে।

লারাভেল ব্লেইড ডিরেক্টিভ-এর আগমন

Laravel-এর Blade টেমপ্লেটিং ইঞ্জিনও একইভাবে এই টেমপ্লেটিং এর উপর এমন কিছু পরিবর্তন আনলো যা আরও ভালভাবে আমাদের এপ্লিকেশনের UI-এর বিভিন্ন অংশ আলাদা ভাবে নিয়ন্ত্রন করার কাজটি আরও সহজ করে দিলো। পাশাপাশি Blade এর স্যান্টেক্স গুলোও অনেক বেশি রিডেবল। যেমন আমরা লিখতে পারিঃ

<!-- resources/views/layouts/app.blade.php -->

@require_once('header')

    {{ $message }}
    <div class="container">
        @yield('content')
    </div>

@require_once('footer')

এখানে আমরা PHP-এর পুরনো require_once ব্যাবহার করার পাশাপাশি নতুন সেন্টেক্সট @yield('content') এর মাধ্যমে একটি প্লেইস-হুল্ডার লিখলাম, আমরা এর চাইল্ড কম্পনেন্টে এখানে যা ইচ্ছা রাখতে পারব। যেমনঃ

<!-- resources/views/article/index.blade.php -->

@extends('layouts.app')

@section('content')
    {{ $message }}
    <p>Here we can put any content here...</p>
@endsection

এখানে আমাদের index.blade.php ফাইলে আমরা @extends() ডিরেক্টিভের মাধ্যমে আমাদের আগের ডিফাইন করা app.blade.php টেমপ্লেটটি কে ইন্‌হেরিট করেছি। পাশাপাশি আমাদের content নামের যে প্লেসহুল্ডারটি নিয়েছিলাম সেখানে কি রাখবো তা আমরা এখানে বলে দিতে পারব। অনেকটা অবজেক্ট অরিয়েন্টেড প্রোগ্রামিং-এ ওভাররাইডিং করার মত। @yield ডিরেক্টিভ এর পাশা পাশি আরও কিছু খুবই সুবিধাজনক ডিরেক্টিভ আছে যেমনঃ @section, @stack, @parent, @prepend ইত্যাদি যা আমাদের এই টেমপ্লেটিংকে আরও সহজ করে দেয়।

লারাভেল কম্পনেন্ট এর প্রতাপ শুরু

কিন্তু এই লিখায় আসলে আমি এইগুলো বলার জন্য লিখছি না। আমি আপনাদেরকে লারাভেলের ব্লেইড এর ডিরেক্টিভ-এর পরিবর্তে কম্পোনেন্ট ব্যাবহার করে টেমপ্লেটিং এর জন্য উৎসাহিত করার জন্য লিখছি। কম্পোনেন্ট আসলে Laravel-এ নতুন কিছু না, কিন্তু আমি যতদূর দেখেছি এখনো বেশিরভাব পরজেক্টে ডিরেক্টিভ ব্যাবহার করেই টেমপ্লেটিং করা হয়। তবে সাম্প্রতিক সময়ে এই কম্পোনেন্ট লারাভেল গুরুত্ব দিয়ে সামনে নিয়ে আসছে। যেমন লারাভেলে এখন tailwind css বাই ডিফল্ট দেওয়ার ব্যাবস্থা থাকে। আর যারা tailwind css লিখেছেন তারা জানেন, এই ফ্রেমওয়ার্কটি এক দিক দিয়ে অনেক শক্তিশালী অন্যদিক দিয়ে আমাদের লম্বা ক্লাসের তালিকা লিখতে লিখতে HTML-কোড গুলো খুবই বিস্রি হয়ে যাওয়ার সম্ভাবনা থাকে। এর একটা সমাধান হচ্ছে Blade component ব্যাবহার করা।

আর যারা Livewire ব্যাবহার করেন তারা নিশ্চয় জানেন, কম্পোনেন্ট কি জিনিস! Livewire এ আসলে কম্পোনেট ছাড়া কোন গতি নেই।

আরেকটা মজার বিষয় হলো, আমি সম্ভত একটি পডকাস্টে শুনেছিলাম যে লারাভেলের প্রতিষ্ঠাটা Tylor Otwell নিজেও বলেছেন তিনি এখন আর @extends, @section ইত্যাদি ব্যাবহার করে টেমপ্লেটিং করেন না, তিনিও কম্পোনেট ব্যাবহার করেন। আমি বলছি না Tylor Otwell এটা করে তাই আমাদেরও এটা করা উচিত। তবে ব্যাক্তিগত ভাবে আমি তার কোডের রুচিবোধের ভক্ত। তাই আমি যখন প্রথমবারের মত আমার একটি প্রজেক্টে @extends, @yield ইত্যাদি ডিরেক্টিভ ব্যাবহার না করে কম্পোনেন্ট ব্যাবহার শুরু করলাম তখন আসলেই অবাক হলাম, এত সুন্দর জিনিস আমি আগে থেকেই কেন ব্যাবহার করা শুরু করলাম না?

কম্পোনেট কি এবং কিভাবে?

কম্পোনেন্ট আসলে আমাদের view ফাইলের ভিন্ন ফাইলকে আলাদা আলাদা অংশ হিসাবে ডিফাইন করা। সেই অংশ গুলোকে পুনরায় ব্যবহার করা যায়। এমনি কম্পনেন্টের মধ্যে প্যারামিটার পাস করা যায়, এবং তাদের নিজের এসোসিটেভ ক্লাস ডিফাইন করে সেই ক্লাসের মেথড গুলোকেও আবার কম্পনেন্টের ভিতর ব্যবহার করা যায়! ধরুন আমাদের একটি app কম্পনেন্ট আছেঃ

<!-- resources/views/components/app.blade.php -->

<x-header title='Page title'></header>

  {{$slot}}

<x-footer/>

এখানে app কম্পোনেন্টে আমরা আবার header এবং footer নামে দুইটি কম্পনেন্ট ব্যাবহার করেছি। খেয়াল করেছেন? আমরা হেডারের মধ্যে টাইটেল কিভাবে পাস করেছি? যেন আমরা সাধারণ HTML লিখছি! কি সুন্দর স্যান্টেক্সট!

এবার আসা যাক আমরা যদি এই app কম্পোনেন্টকে আমাদের কোন একটি ব্লেইড ফাইলে ব্যাবহার করতে চাই, তাহলে কিভাবে ব্যাবহার করব।

<!-- resources/views/article/index.blade.php -->

<x-app>

    {{ $message }}
    <p>Here we can put any content here...</p>

</x-app>

চমৎকার না? যেন <x-app> একটি html ট্যাগ আর সেই ট্যাগের ভিতরে আমরা আমাদের শুধু যা দরকার তা লিখছি। app এর ভিতরে আরও কত কিছু আছে তা নিয়ে আমাদের মাথা ব্যাথা নেই। এই html কে html এর মত লিখতে পারছি এই বিষয়টা আমি খুবই উপভোগ করি। এখন ধরুন আমরা TailwindCSS ব্যাবহার করে একটি সুন্দর বাটন বানিয়েছি, সেই বাটনের HTML দেখতে এমনঃ

<x-app>

    <p>Here we can put any content here...</p>

    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      Read More
    </button>

</x-app>

এটাকে যদি আমরা একটি কম্পোনেন্ট বানিয়ে resources/views/components/button.blade.php এই পাথে নতুন একটি ফাইল লিখি এভাবেঃ

<!-- resources/views/components/button.blade.php -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  {{$slot}}
</button>

এবং আমাদের index.blade.php ফাইলে লিখিঃ

<x-app>

    <p>Here we can put any content here...</p>

    <x-button>Read More</button>

</x-app>

তাহলে কেমন হবে? এখন আমরা চাইলে এই বাটনে কালার নামে প্যারামিটার ডিফাইন করতে পারি, সেই প্যারামিটার অনুযায়ী যদি আমরা আমাদের বাটনে কোড মুডাফান করে সেভাবে হ্যান্ডেল করি? এভাবে আসলে অনেক কিছুই করা যায়। কম্পোনেন্ট নিয়ে আসলে কি কি করা যায় তার বিস্তারিত জানতে চোখ ঘুরে আসুন লারাভেলের অফিসিয়াল ডকুমেন্টেশন থেকে।

আমি কেন কম্পোনেন্ট পছন্দ করি?

আমি ব্যাক্তিগত ভাবে এই কম্পোনেন্ট ব্যাবহার করে টেমপ্লেটিং করা খুবই পছন্দ করি কারন, এখন আমাদের view ফাইল গুলো দেখলে আমরা সহজ ভাবে পড়তে পারব ও বুঝতে পারব আসলে কি ড্যাটা কি কাজ করছে। কোন আবর্জা নেই, যা আমার মনযোগ নষ্ট করবে। আমার view ফাইল গুলোর সৌন্দর্যই বাড়িয়ে দিচ্ছে এই কম্পনেন্টট, এটিই আসলে পছন্দের প্রধান কারণ।

আরেকটা কারণ হলো আমি চাইলে প্যারামিটার পাস করে সেই কম্পনেন্টের আচরন নিয়ন্ত্রন করতে পারছি। ফলে আমি একই কম্পনেন্ট বিভিন্ন সময় বিভিন্ন কাজে ব্যাবহার করতে পারছি। যেমন আমরা একই বাটন কম্পনেট যখন লাল বাটন লাগবে তখনও ব্যাবহার করএ পারব আবার যখন নীল বাটন লাগবে তখনও ব্যাবহার করতে পারবো। অন্যদিকে আমরা যদি একটি ডিলেট বাটন কম্পোনেন্ট লিখে রাখি যা CSRF টোকেন সহ পোস্ট রিকোয়েস্ট দিয়ে ডিলেট রিকোয়েস্ট পাঠাবে তাহলে যত জায়গায় আমাদের ডিলেট বাটন লাগবে সব জায়গায় আমরা একই ডিলেট বাটন কম্পোনেন্ট ব্যাবহার করতে পারব।

আরেকটি কারণ হলো ক্লাস এসোসিয়েশন। অর্থাৎ একটী কম্পনেন্টটে যদি এমন কিছু লাগে যা করার জন্য একটি ফাংশন কল করে PHP তে কোডটি লিখলে বেশি সুন্দর হবে, তাহলে সেটেও করা সম্ভব। তবে Livewire ব্যাবহার না করলে আমি ব্যাক্তিগত কম্পনেন্টের জন্য এসোসিয়েটিভ ক্লাস লিখাকে নিরুৎসাহিত করি কারণ এতে করে MVC প্যাটার্নকে না মানার সম্ভাবনা থাকে। এতে করে কেউ কেউ অতি উৎসাহিত হয়ে মডেল-কন্ট্রোলারের সঠিক ব্যাবহার না করে সব কিছু কম্পনেন্টের ক্লাসের মধ্যে করার দিকে ঝুকে যেতে পারে, তখন আপনার কোডবেইসে আরও দুর্বোদ্ধ হয়ে যেতে পারে।

কম্পনেন্ট এর সীমাবদ্ধতা

কম্পনেন্ট ব্যাবহারের আধিক্য এপ্লিকেশনের লোডিং টাইম বাড়িয়ে দিতে পারে। ফলে আপনার এপ্লিকেশন স্লো হয়ে যেতে পারে। আমি ব্যাক্তিগত ভাবে কোন লক্ষ্যনীয় ধীরগতি না দেখলে অতটা চিন্তিত হই না, কিন্তু যদি ধীরগতি বুঝা যায় এবং আমার এপ্লিকেশনের জন্য সেটা একটা সমস্যা হয়ে দাড়ায় তাহলে আমি এটাকে অপটিমাইজ করার চেষ্টা করি।