مقدمه Hyperscript: بازنگری جاوا اسکریپت

Hyperscript یک زبان جدیدتر برای رسیدگی به نیازهای رایج اسکریپت در قسمت جلویی جاوا اسکریپت است. شما می توانید آن را به تنهایی یا همراه با HTMX استفاده کنید.

• نمونه‌ای به ارزش هزاران کلمه
• Hyperscript چیست؟
• مقابله با پیچیدگی front-end
• رویدادهای ناهمزمان در Hyperscript
• حلقه‌بندی، شرطی‌ها و گزارش‌گیری
• محل رفتار
• نتیجه‌گیری

بعضی از ما HyperCard را به یاد می آوریم، شاخه ای جالب در درخت تکاملی زبان های برنامه نویسی. اگر سن خاصی دارید، حتی ممکن است برنامه نویسی را با HyperCard یاد گرفته باشید. Hyperscript یک فناوری جدیدتر است که برخی از مزایای HyperCard، به ویژه سادگی و دستور زبان انگلیسی آن را در نظر گرفته و آن را در محیط مرورگر اعمال می کند. این نوعی جایگزین جاوا اسکریپت است که می‌تواند به‌صورت مستقل یا پشت سر هم با HTMX برای ساده‌سازی نیازهای اسکریپت‌نویسی رایج در جلویی جاوا اسکریپت کار کند.

نمونه ای به ارزش هزاران کلمه

قبل از اینکه وارد بحث زیاد شویم، اجازه دهید به یک مثال Hyperscript< /a> که با روح موضوع ارتباط برقرار می کند:

<div _="init fetch https://stuff as json then put result into me">Using fetch() API...</div>

<div id="myDiv" onload="async function() { 
  const response = await fetch('https://stuff', { 
    headers: { Accept: 'application/json', }
  }); 
  const data = await response.json(); 
  myDiv.innerHTML = JSON.stringify(data); 
}">
</div>

هایپراسکریپ نوعی جاوا اسکریپت ساده شده و انگلیسی است. همانطور که توسط Sacha Greif به من اشاره کرد، می توانید آن را به عنوان یک زبان خاص دامنه یا DSL نیز در نظر بگیرید. در اصل، Hyperscript جاوا اسکریپت را به نحوی خلاصه می کند که به صراحت به نیازهای متداول و تکرار شونده در ساخت UI های فرانت اند اختصاص داده شده است. مجموعه ای از قراردادها را به همراه دارد تا این کدگذاری مختصرتر شود.

Hyperscript خواهر و برادر HTMX است و از ذهن همان توسعه دهنده کارسون گراس نشات می گیرد. هر دو پروژه نشان دهنده تعهد گراس به سادگی و تلاش های او برای اعمال بی وقفه آن در فضاهای مشکل بزرگ و فعال است. در HTMX، HTML توانمندتری را می‌بینیم که می‌تواند بسیاری از پیچیدگی‌های ایجاد شده در دهه گذشته را از بین ببرد، زیرا توسعه‌دهندگان پارادایم front-end چارچوب‌های واکنشی + JSON + APIهای REST مانند در Hyperscript، ما شاهد جایگزینی برای گسترش ظاهراً بی پایان پیچیدگی زبان جاوا اسکریپت هستیم. این یک پیشنهاد وسوسه انگیز است.

مقابله با پیچیدگی front-end

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

بیایید یک مثال را در نظر بگیریم. در قطعه Hyperscript زیر، مثال شمارنده دکمه‌ها تبدیل می‌شود:

<button _="on click increment :x
            if :x <= 3
              put :x into the next <output/>
            else
              put '3 is the max...' into the next <output/>
            end">
Click Me
</button>
<output>--</output>

این مثال مشابه در React است:

import React from "react";

const Counter = () => {
  const [x, setX] = React.useState(0);

  const handleClick = () => {
    setX((prevX) => {
      if (prevX <= 3) {
        return prevX + 1;
      } else {
        return 3;
      }
    });
  };

  return (
    <div>
      <button onClick={handleClick}>Click Me</button>
      <output>{x}</output>
    </div>
  );
};

export default Counter;

البته کوتاهتر لزوماً به معنای ساده‌تر نیست. با این حال، در این مورد، آشکار بودن خود توصیفی Hyperscript در مقایسه با React می درخشد. اکنون، برخی ممکن است بگویند که React پیچیده‌تر است، زیرا قدرتمندتر است. این زبانی است که چیزهای پیچیده را ممکن می کند. اما در این مورد، ما فقط به رایج‌ترین رویکرد برای توسعه فرانت‌اند جاوا اسکریپت (که React است) در کنار Hyperscript نگاه می‌کنیم. ما به فعالیت‌های روزمره نگاه می‌کنیم که می‌توانند ساده شوند—و باید باشند.

هایپراسکریپت برای جایگزینی جاوا اسکریپت در نظر گرفته شده است. یا شاید تفصیل کلمه بهتری باشد. خالق Hyperscript، Caron Gross، خاطرنشان می‌کند که این یک پروژه «گمان‌آمیز» است. با این وجود، خوب فکر شده، توانا و جاه طلب است. قطعاً می توان برنامه های کاربردی در مقیاس سازمانی را با استفاده از Hyperscript تصویر کرد.

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

رویدادهای ناهمزمان در Hyperscript

بیایید نگاهی به نحوه مدیریت Hyperscript رویدادها بیندازیم:

<button _="on click send foo to the next <output/>">Send Foo</button>
<button _="on click trigger bar on the next <output/>">Send Bar</button>
<output _="on foo put 'I got a foo event!' into me
         on bar put 'I got a bar event!' into me">
No Events Yet...
</output>

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

همچنین می‌توانید ببینید که عبارت «

بعدی» می‌تواند به عنصر دیگری در DOM، به‌ویژه،

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

حلقه، شرطی‌ها و گزارش‌گیری

حلقه زدن در برخی از زمینه های فرانت اند (مانند JSX برای React) می تواند دشوار باشد. در اینجا یک مثال حلقه زدن در Hyperscript آمده است:

for x in [1, 2, 3] index i
  log i, "is", x
end

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

ما قبلاً دیده‌ایم که Hyperscript چگونه فرمان if را با یک else مدیریت می‌کند. توجه داشته باشید که با کلمه کلیدی End به پایان می رسد (مگر اینکه به هر حال در انتهای اسکریپت باشید، همانطور که در یک ویژگی عنصر اتفاق می افتد):

if :x <= 3
  put :x into the next <output/>
else
  put '3 is the max...' into the next <output/>
End

هایپراسکریپت همچنین از یک اصلاح کننده مگر پشتیبانی می کند که بتواند به مواردی مانند ویژگی های CSS اشاره کند:

<button _="on click toggle .bordered on #second-button">
Toggle Next Border
</button>
<button id="second-button"
        _="on click toggle .red unless I match .bordered">
Toggle My Background
</button>

این قطعه کد باعث می شود دکمه دوم رنگ خود را تغییر دهد، مگر اینکه دارای کلاس .bordered باشد. این یک مدیریت بسیار مختصر از یک بیت جاوا اسکریپت با CSS و HTML است.

محل رفتار

یکی از اصولی که در برنامه نویسان جدید مورد استفاده قرار می گیرد، به اصطلاح جداسازی نگرانی ها (SoC) است. در بیشتر مواقع، این اصل خوب است. با پیاده سازی SoC، اجزای جدا شده را دریافت می کنیم، و این باعث می شود سیستم های انعطاف پذیرتری داشته باشیم. با این حال، جریان متقابلی وجود دارد که گراس آن را محلی بودن رفتار می نامد. او این ایده را در Hyperscript جاسازی کرده است، و شما آن را در پروژه های دیگر مانند Tailwind نیز خواهید یافت.

ایده در اینجا این است که جداسازی نگرانی‌ها در واقع می‌تواند سیستم‌هایی را ایجاد کند که دنبال کردن آنها سخت‌تر است. جداسازی نگرانی ها در قسمت جلویی معمولاً به این معنی است که نشانه گذاری خود (نما) را در یک مکان، جاوا اسکریپت (رفتار) خود را در مکان دیگر و CSS (ارائه) خود را در جایی دیگر قرار دهید. مزیت طراحی انجام همه اینها در بهترین حالت مشکوک به نظر می رسد. SoC معمولاً در موقعیت های معماری بیشتر به کمک می آید. با این حال، در پروژه‌هایی که بر پایه HTML، CSS و جاوا اسکریپت پایه‌گذاری شده‌اند، پرش کردن بین زمینه‌ها و همیشه در ذهن داشتن رشته وظایف خود برایتان دردسرساز است. این در واقع یکی از چیزهایی است که در مورد JSX و محرک پشت چارچوب اجزای سبک جذاب است.

نقض تفکیک نگرانی ها

هایپراسکریپت بسیاری از کارهای خرخری را که شما می‌خواهید در جاوا اسکریپت استخراج کنید، می‌گیرد و آن را در دستور Hyperscript می‌پیچد، بنابراین می‌توانید عملکردها را مستقیماً در نشانه‌گذاری به کار ببرید. این باعث می‌شود چیزها در کنار هم قرار گیرند و آنها را بیشتر مستندسازی کند.

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

من از Hyperscript در یک پروژه بزرگ و واقعی استفاده نکرده‌ام، بنابراین نمی‌توانم مستقیماً با آن صحبت کنم. با این حال، پشتیبانی برای توسعه پذیری در زبان وجود دارد.

همچنین این امکان وجود دارد که JavaScript و Hyperscript کنار به پهلو اجرا شود، به طوری که شما عرض جغرافیایی برای افزایش تدریجی. همچنین برای من این سوال را ایجاد می کند که اجرای موازی این زبان ها در یک پروژه React، Svelte یا Vue چگونه به نظر می رسد.

نتیجه گیری

وقتی با Hyperscript شروع به کار کردم، به شدت شک داشتم—شاید حتی کمی برتر. با این حال، من به تدریج مجذوب احساس Hypserscript شدم. آیا فکر می کنم به زودی جاوا اسکریپت را جایگزین کند؟ نه، نه. اما من می‌توانم دنیایی را تصور کنم که در آن HTMX و Hyperscript بخش جلویی جاوا اسکریپت را بسیار ساده کرده‌اند.

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

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

گاهی اوقات ما وارد فناوری می شویم زیرا آن را دوست داریم؛ ابزار زندگی خودش را می گیرد. ابزار، مانند React، به محصول تبدیل می شود. این در برخی سناریوها خوب است، اما در مواقع دیگر، جایگزین ساده‌تری مانند Hypserscript می‌تواند بهتر باشد.

حداقل، Hyperscript ایده های جدیدی برای مشارکت دارد. و مانند HTMX، این زبان می‌تواند به بهبود تجربه کلی توسعه در وب کمک کند.