پل زدن شکاف: کم کد برای توسعه دهندگان وب

از روزهای ابتدایی حرفه توسعه نرم افزار من (15 سال پیش) ، من رویکرد توسعه ای را در خواب دیدم که ساخت و سفارشی کردن برنامه های وب حرفه ای را آسان می کند. بسیاری از چارچوب ها قول داده اند که توسعه را ساده کنند، اما من شخصاً هرگز واقعاً این واقعیت را پیدا نکردم. در حالی که پیشرفت های چشمگیری زیادی وجود داشته است (استانداردهای جدید وب ، TypeScript ، SASS ، NPM ، …) و چارچوب های جدید مفید ، بیشتر توسعه حرفه ای وب هنوز به همان زبان ها متکی است. TypeScript JavaScript را گسترش می دهد ، SASS CSS را گسترش می دهد و بیشتر چارچوب های وب JS/TS & HTML را گسترش می دهند. علاوه بر این ، راه اندازی ، استقرار و تکنیک عمومی تکنیک پیچیده تر شده است. اینقدر پیچیدگی کلی بیشتر شده است ، پایین تر نیستبشر ما با نوآوری محدود در مورد مفاهیم اساسی توسعه ، که اکنون نیز منجر به چالش هایی برای همکاری کارآمد بین توسعه دهندگان و هوش مصنوعی می شود ، بیشتر و بیشتر در صدر قرار می گیریم.

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

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

همه چیز در مورد درختان است …

برای مؤلفه های UI وب راه حل نسبتاً ساده است. عناصر UI کم کد معمولاً توسط یک مرجع مؤلفه و تنظیمات ویژگی خاص مؤلفه تعریف می شوند. اگر ما از عناصر DOM بومی به عنوان یک نوع خاص از مؤلفه با ویژگی های عمومی پشتیبانی می کنیم ، این موارد را دریافت می کنیم انعطاف پذیری کامل HTML به طور مستقیم در ساختار UI کم کدبشر ما همچنین می توانیم عناصر DOM بومی و اجزای سطح بالاتر را در همان سلسله مراتب ترکیب کنیم. اما اگر ما هنوز به JavaScript و CSS برای منطق و یک ظاهر طراحی شده نیاز داریم ، این واقعاً کمکی نمی کند.

در حالی که با رویکردهای جامع تر فکر می کردم این را فهمیدم DOM/UI ، اسکریپت ها/اقدامات و برگه های سبک یک چیز مشترک دارند – آنها همه درختان هستندبشر و گره های همه آن درختان را می توان بر اساس ویژگی های زیر تعریف کرد:

• نوع گره: هر نوع درخت مجموعه ای از گره های خاص خود را دارد که پیاده سازی های مختلف گره هسته را تعریف می کند. تمام ویژگی های دیگر به نوع گره انتخاب شده بستگی دارد.
• خواص: ویژگی های پویا برای اجرای اصلی/هسته گره.
• پارامترها: ویژگی های پویا برای اجرای گره ثانویه/مرتبط (به عنوان مثال مؤلفه یا روش خدمات UI).
• وقایع: اقداماتی که باید بر اساس وقایع ایجاد شده توسط گره انجام شود.
• بچه: شکاف پیش فرض برای گره های کودک.
• اسلات کودک: شکافهای نامگذاری شده برای گره های کودک.

با این ساختار عمومی می توانیم طیف گسترده ای از مفاهیم توسعه مبتنی بر درخت را پشتیبانی کنیم.

… و json

در مرحله بعد ما برای ساختار درخت عمومی خود به یک قالب فنی نیاز داریم و خوشبختانه این تصمیم آسان است: JSON! این ساده ، ایمن ، انعطاف پذیر و بسیار گسترده به عنوان قالب داده غالب وب پشتیبانی می شود.
قبل از غواصی عمیق تر به جنبه های مفهومی ، بیایید به چند نمونه نگاه کنیم.

دکمه سلام و مثال خدمات

در اینجا دکمه که یک روش خدمات سفارشی را فراخوانی می کند و از مدل داده اصلی UI مقدار عبور می کند:

{
  "_ui": "view",
  "view": "forms:button",
  "params": {
    "label": "Say Hello"
  },
  "events": {
    "click": {
      "_action": "service",
      "service": "my-project:user",
      "method": "greet",
      "params": {
        "name": {
          "_bind": "data",
          "ref": "fullName"
        }
      }
    }
  }
}

و این یک اجرای اساسی برای my-project:user خدمت:

{
  "methods": {
    "greet": {
      "action":  {
        "_action": "script",
        "props": {
          "js": "alert(`Hello ${name}.`)"
        },
        "params": {
          "name": {
            "_bind": "param",
            "ref": "name"
          }
        }
      }
    }
  }
}

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

{
  "methods": {
    "greet": {
      "action": {
        "_action": "condition",
        "props": {
          "if": {
            "_bind": "param",
            "ref": "name",
            "modifiers": ["trim"]
          }
        },
        "childSlots": {
          "then": [
            {
              "_action": "service",
              "service": "my-project:dialogs",
              "method": "alert",
              "params": {
                "message": {
                  "_bind": "operation",
                  "operator": "concat",
                  "children": [
                    "Hello ",
                    {
                      "_bind": "param",
                      "ref": "name"
                    },
                    "."
                  ]
                }
              }
            }
          ],
          "else": [
            {
              "_action": "service",
              "service": "my-project:validation",
              "method": "missingRequiredValue",
              "params": {
                "key": {
                  "_bind": "param",
                  "ref": "name",
                  "modifiers": ["key"]
                }
              }
            }
          ]
        }
      }
    }
  }
}

نمونه ایموجی پویا

این مثال یک بومی را تعریف می کند عنصری با یک مقدار پویا اتصال بر اساس یک پارامتر هش URL (به عنوان مثال #mode=unicorn). در این حالت ، ویژگی مقدار محتوای متن عنصر را برای ورودی ها و سایر عناصر قابل ویرایش تنظیم می کند ، داده های دو طرفه را فراهم می کند.

{
  "_ui": "html",
  "props": {
    "element": "span",
    "value": {
      "_bind": "choice",
      "childSlots": {
        "by": {
          "_bind": "url-hash",
          "ref": "mode"
        },
        "cases": {
          "unicorn": "🦄",
          "dragon": "🐲",
          "ocean": "🐠"
        }
      }
    }
  },
  "params": {
    "attr": {}, // Native attribute bindings
    "class": [], // Dynamic class bindings
    "style": {} // Inline style bindings
  }
}

در اینجا می توانید آن را با نمونه اولیه IDE ما در عمل مشاهده کنید:
https://www.youtube.com/watch؟v=qot0n11pz4s

این درختان json هستند آسان برای تجزیه و اصلاح ، توسط ویرایشگرهای بصری و همچنین ابزارهای اتوماسیونبشر در صورت لزوم آنها نیز دشوار نیستند به عنوان مثال برای حل و فصل اختلافات ادغام شده ، به صورت دستی بررسی و اصلاح شده استبشر همچنین ساختن مترجمان برای اقدامات/خدمات با زبانهای مختلف برنامه نویسی پشتی بسیار ساده است ، که این امر باعث می شود که پایه خوبی برای آن باشد برنامه های تمام پشته فناوری-آگنوستیکبشر

برگه های سبک پویا

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

آیا اگر بتوانیم برگه های پویا را تعریف کنیم ، عالی نخواهد بود؟ مرورگرها API های JS را برای دستکاری در برگه شبیه به API هایی که ما همیشه برای دستکاری DOM استفاده می کنیم ، ارائه می دهند. با یک فرمت پویا برای تعریف و تولید برگه های سبک می توانیم اتصالات واکنشی را به همان روش اتصال DOM واکنشی اعمال کنیم.
بیایید به یک مثال بپردازیم که چگونه می توان با ساختار درخت عمومی ما با استفاده از یک سرویس ارائه دهنده تم برای فعال کردن تعویض تم پویا انجام داد.

{
  "services": {
    "theme-provider": {
      "service": "my-project:theme-provider"
    },
    "theme-name": {
      "service": "data",
      "props": {
        "bind": {
          "_bind": "operation",
          "operator": "fallback",
          "children": [
            {
              "_bind": "param",
              "ref": "themeName"
            },
            "main"
          ]
        }
      }
    },
    "theme": {
      "service": "data",
      "props": {
        "bind": {
          "_bind": "action",
          "read": {
            "_action": "service",
            "service": "@theme-provider",
            "method": "getTheme",
            "params": {
              "name": {
                "_bind": "data",
                "ref": "@theme-name"
              }
            }
          }
        }
      }
    }
  },
  "rules": {
    "input-field": {
      "props": {
        "elements": [
          "input",
          "select"
        ]
      },
      "children": [
        {
          "_style": "style",
          "params": {
            "style": {
              "color": {
                "_bind": "data",
                "ref": "@theme.color"
              },
              "border-color": {
                "_bind": "data",
                "ref": "@theme.lightBorderColor"
              },
              "border-width": "1px",
              "border-style": "solid"
            }
          },
          "children": [
            {
              "_style": "style",
              "props": {
                "selectors": [
                  ":hover",
                  ":focus"
                ]
              },
              "params": {
                "style": {
                  "border-color": {
                    "_bind": "data",
                    "ref": "@theme.darkBorderColor"
                  }
                }
              }
            }
          ]
        }
      ]
    }
  }
}

نتیجه معادل قوانین CSS زیر است ، اما در صورت تغییر مقدار موضوع در زمان اجرا ، به صورت پویا تنظیم می شود.

input.#{prefix}-input-field,
select.#{prefix}-input-field {
  color: $color;
  border-color: $lightBorderColor;
  border-width: 1px;
  border-style: solid;
}

input.#{prefix}-input-field:hover,
input.#{prefix}-input-field:focus,
select.#{prefix}-input-field:hover,
select.#{prefix}-input-field:focus {
  border-color: $darkBorderColor;
}

پایان

اکنون می توانیم UI ، منطق و یک ظاهر طراحی شده را بر اساس یک قالب پویا یکپارچه تعریف کنیم ، که ارائه ویرایشگرهای بصری مداوم و ابزار دیگر برای همه آنها بسیار آسان است. ما همچنین می توانیم در تمام این زمینه ها به همان داده ها و خدمات به همان روش دسترسی پیدا کنیم. علاوه بر این ، ما می توانیم انواع مختلف درخت را یکپارچه در همان ساختار درخت ترکیب کنیم و امکان اشتراک گذاری متن ساده بین آنها را فراهم می کنیم. به عنوان مثال ، اتصالات و اقدامات رویداد می توانند به طور مداوم زمینه را از گره اطراف خود ، خواه یک UI ، عمل یا گره سبک ، به ارث ببرد.
و تاکنون فقط سطح را خراشیده ایم … 🙂

افکار شما چیست؟ آیا به این نوع توسعه کم کد علاقه مند هستید؟ بزرگترین مزایا یا چالش ها را از کجا می بینید؟

PS: در این مقاله مقدمه ای مختصر در مورد مفاهیم اصلی Ontineo ارائه شده است. برای شیرجه های عمیق تر در جنبه های فنی پیشرفته ، جزئیات معماری نمونه اولیه و ملاحظات کاربر متمرکز بیشتر همراه باشید.

برای کسب اطلاعات بیشتر یا دنبال کردن پروژه ما در رسانه های اجتماعی ، به وب سایت ما مراجعه کنید: https://ontineo.com