پرش به محتویات

معماری Elm

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

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

این معماری در Elm آسان است، اما در هر پروژه Front-End دیگری کاربرد دارد. در واقع، پروژه‌هایی مانند Redux از معماری Elm الهام گرفته‌اند، بنابراین ممکن است قبلا نسخه‌هایی از این الگو را دیده باشید. نکته این است که حتی اگر در نهایت نتوانید از Elm در محیط کار استفاده کنید، چیزهای زیادی با یادگیری این الگو بدست می‌آورید.

الگوی پایه

برنامه‌های Elm همیشه به این شکل به نظر می‌رسند:

نمودار معماری Elm

برنامه HTML تولید می‌کند تا بر روی صفحه نمایش داده شود، در ادامه سیستم پیام‌هایی از آنچه در حال وقوع است ارسال می‌کند. "روی یک دکمه کلیک شد!"

اما درون برنامه Elm چه اتفاقی می‌افتد؟ این فرآیند به سه بخش تقسیم می‌شود:

  • Model — وضعیت برنامه
  • View — روشی برای تبدیل وضعیت برنامه به HTML
  • Update — روشی برای بروزرسانی وضعیت برنامه بر اساس پیام‌ها

این سه مفهوم هسته معماری Elm یا TEA را تشکیل می‌دهند.

در ادامه، نشان می‌دهیم که چگونه می‌توان از این الگو برای ورودی کاربر، مانند دکمه، فیلد متنی و فرم استفاده کرد.

همراهی کنید

تمام برنامه‌ها در ویرایشگر آنلاین موجود هستند:

ویرایشگر آنلاین

این ویرایشگر، نکات را در گوشه بالا سمت چپ نشان می‌دهد:

اگر با چیزی گیج‌کننده مواجه شدید، حتما به این نکات دقت کنید!


یادداشت مترجم

منظور از ویرایشگر آنلاین، محیطی از وبسایت Elm است که در آن می‌توانید برنامه‌‌های مختلف را مشاهده، ویرایش و کامپایل کنید. علاوه بر این محیط، جامعه کاربری ابزار دیگری برای اشتراک‌گذاری کد و پروژه در نظر گرفته است که با نام Ellie شناخته می‌شود. برای کسب اطلاعات بیشتر، به منابع زیر مراجعه کنید: