مفهوم Declarative UI یا رابط کاربری اعلانی

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

در مسیر یادگیری فریمورک Flutter من به موردی برخوردم که تا حالا بهش توجهی نکرده بودم و اون هم declarative UI بود و خوب طبق معمول گوگل کردم و طبق معمول توی منابع فارسی چیزی پیدا نکردم! که این مفهوم رو توضیح بده پس رفتم دنبال منابع انگلیسی.(یکم تو زبان مشکل دارم متاسفانه ?‍♂️)

به طور خلاصه :

در Declarative UI شما فقط تعریف میکنید که چی میخاین!

در واقع شما در این الگو ( syntax) فقط میگین که چه عنصری نیاز دارید و به چه شکل و کاری به نحوه تولید اون ندارید

با یه مثال

زبان HTML بهترین مثال برای این نوع برنامه نویسی هست.

در این زبان (میدونم! زبان نیست?) با استفاده از css فقط تعریف میکنید که تصویری با اندازه 100*100 نیاز دارین ، ولی از نحوه انجام این کار در مرورگر های مخطلف اطلاعی ندارید.

#myImageId {  height: 100px;  width: 100px; }

در مقابل declarative ما imperative رو داریم که شما مجبورید توصیف کنید که چه چیزی به چه شکلی باید باشد.

مثلا در مثال اندازه تصویر در imperative باید با توابع خاص اون زبان اقدام به تغییر اندازه کنید که گرفتن ، خواندن پیکسل به پیکسل و ذخیره و موارد دیگه رو حودتون انجام میدین.

چون فریمورک Flutter یک فریمورک cross-platform هست و برای android , ios و web میتونید خروجی بگیرید پس از برنامه نویسی declarative استفاده شده و شما فقط بیان می کنید به یک edittext نیاز دارید و تمام.

نکته : بین declarative ui و declarative programming فرقی وجود ندارد همینطور بین imperative ui و imperative programming و بیشتر با پسوند programming میشناسنش.

مزایای declarative programming :

  • افزایش سرعت توسعه نرم افزار
  • ادغام یکپارچه بین طراحی و برنامه نویسی
  • کد کمتر!
همون کد کمتر :)
همون کد کمتر :)


نمونه ای از زبان های declarative :

  • زبان sql
  • زبان prolog
  • زبان نشانه گذاری xml

منابع :

stack overflow

courses.csail.mit.edu