کانال تلگرام

برنامه نویسی کامپوننت محور (COP) چیست؟

تاریخ : ۱۵ آبان ۱۳۹۸
نویسنده : آروین سعادت نیا
دسته بندی ها : برنامه نویسی

با به میدان آمدن چارچوب‌های جدیدی همچون React ، Angular و Vue شاهد ظهور پارادایم های جدید و جذابی هستیم، این پارادایم ها با عنوان برنامه نویسی کامپوننت محور شناخته می‌شوند. در این روش همه چیز بر اساس کنار هم قرار دادن کامپوننت هایی است که می توان از آنها دوباره استفاده نمود.

componnet

از مزایای مهم این روش صرفه‌جویی در زمان و جلوگیری از تکرار کدنویسی است. هر چه قدر زمان کمتری برای انجام کارهای تکراری صرف کنیم، سریع تر می توانیم برنامه های خود را توسعه دهیم. به عنوان مهندسین نرم افزار، زمان هایی را برای تحویل پروژه تعیین می‌کنیم، استفاده از هر روشی که بتواند به ما کمک کند، محصول خود را سر موقع تحویل دهیم، باعث افزایش رضایت مشتریان خواهد شد.

برنامه نویسی کامپوننت محور شبیه به چیست؟

اگر با فریمورک هایی مانند ری اکت، آنگولار و ویو کار کرده باشید، احتمالاً از قبل با معماری کامپوننت محور آشنایی دارید. در زیر کامپوننتی از یک Header آورده شده است :

import React from 'react';
import { Logo, ProfileImage, BurgerMenu, HeaderWrapper } from 'components';

const Header = () => (
  <HeaderWrapper>
    <Logo></Logo>
    <ProfileImage></ProfileImage>
    <BurgerMenu></BurgerMenu>
  </HeaderWrapper>
)

export default Header;

همانطور که مشاهده میکنید، در حال استفاده از کامپوننت ها و ترکیب کردن آنها هستیم. کامپوننت ها مثل قطعات آجر برای ساخت کامپوننتی دیگر استفاده شده‌اند.

مشکلات و مسائلی که برنامه نویسی کامپوننت محور حل میکند؟

COP یا همان برنامه نویسی کامپوننت محور یک مفهوم بسیار قدرتمند است، زیرا به ما اجازه می‌دهد منطق برنامه را ایزوله و کپسوله سازی کنیم. هرچقدر فایل های ما کوچکتر باشند، نگهداری از آنها ساده تر است. دلیلی وجود داشته است که فیس بوک برای حل مشکل اعلان های خود مجبور به نوآوری شده است.

اگر به پانزدهم ژوئن سال ۲۰۱۴ بازگردیم، قابلیت notification فیس بوک نشان می‌داد که شما دارای اعلان های جدیدی هستید، اما وقتی بر روی زنگ هشدار قرمز رنگ کلیک می‌کردید، اعلان جدیدی به شما نشان داده نمی‌شد. این امر باعث خشم افرادی می شد که از این بستر استفاده می‌کردند.

علت این مشکل غیر قابل نگهداری بودن، اسلوب عظیم فایل ها و کد های پیچیده php بود، برنامه نویسی کامپوننت محور یک راه عملی و عالی برای حل این مشکل است. React برای حل مشکل اعلان ها اختراع شد و تولد این فریم ورک نوید عصر جدیدی را داد. دوره برنامه نویسی کامپوننت محور آغاز شد.

پیش بینی من برای آینده حضور گسترده کامپوننت های بومی وب است، در حال حاضر هر فریم ورکی دارای اکوسیستمی از ابزارها، کامپوننت ها کتابخانه ها و غیره است. در حالیکه استفاده مجدد از کدهای منبع باز مفید است، جالب نیست که هر اکوسیستم خودش را در یک حباب محصور کند.

اگر فریمورک ری اکت را می شناسید، فقط می توانید از کدهای نسخه های مختلف آن استفاده کنید، نمی توانید از ابزارهای آنگولار برای Vueو ری اکت استفاده کنید.  API کامپوننت های بومی وب همه موارد را تغییر داده است، به این موضوع فکر کنید که بتوانیم از همه فریمورک ها استفاده کنیم.

فرض کنید شخصی کتابخانه انیمیشن جذابی را می سازد که مادامی که از جاوا اسکریپت استفاده کرده باشد با کلیه فریمورک ها سازگار باشد. این دقیقا همان چیزی است که API کامپوننت های بومی برای ما فراهم می کند. روشی واحد برای کتابخانه‌ها به منظور به اشتراک گذاشتن کد ها.

API کامپوننت های وب

به زودی ما یک API واحد را برای به اشتراک گذاری کد ها در کتابخانه های مختلف خواهیم داشت. شما آن را یکبار کد نویسی کرده و سپس در هر جایی از آن استفاده می‌کنید. API کامپوننت های وب به ما این امکان را می دهد که این کار را انجام دهیم، یک دکمه ساده با استفاده از APIکامپوننت های وب به شکل زیر نوشته می شود :

class WebComponentButton extends HTMLElement {

  constructor() {
    super()
    this.addEventListener('click', () => {
      console.log('click')
    })
  }
 
}

یک کامپوننت وب یک کلاس ساده بوده که کار ارث بری را انجام می دهد. توجه کنید که چطور دکمه خود را با ارث بری از HTMLElement گسترش می‌دهیم. اگر در مورد کامپوننت های وب کنجکاو شده اید و می خواهید اطلاعات بیشتری در مورد آن به دست آورید به اسناد موزیلا سری بزنید.

موزیلا در مورد کامپوننت های وب مطالب کاملی را فراهم کرده است. از این به بعد وقتی بر روی حل مسئله فکر می‌کنید سعی کنید با استفاده از معماری کامپوننت محور آن را حل کنید. این معماری زمانیکه پیچیدگی‌های برنامه‌های شما در حال رشد است به خوبی خود را نشان خواهد داد هرچه چالش شما بزرگتر باشد باید آن را به قطعات کوچکتری تقسیم کنید.

پشتیبانی مرورگرها برای API کامپوننت های وب 

API کامپوننت های وب در حال به دست آوردن پشیبانی مرورگرها هستند، به خاطر داشته باشید که این فناوری نسبتاً جدید است و هیچ کس نمی داند چه زمانی و چطور استاندارد می شود. اما همیشه باید از فن‌آوری‌های جدید استفاده کرد.
 

#برنامه نویسی کامپوننت محور
۰ نظر

مقالات پیشنهادی

مشاهده همه مقالات
ثبت دیدگاه

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید