مروری بر Hyperscript: ارزیابی مجدد جاوا اسکریپت

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

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

مثال

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

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

<div id=&quotmyDiv&quot =&quotasync function() { 
 const response = await fetch('https://stuff', { 
    headers: { Accept: 'application/json', }
  }); 
 const data = await response.json(); 
  myDiv = JSON.stringify(data); 
}&quot>
</div>

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

هایپر اسکریپت ( Hyperscript ) چیست؟

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

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

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

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

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

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

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

import React from &quotreact&quot

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

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

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

export default Counter;

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

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

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

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

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

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

همچنین می توان مشاهده کرد که عبارت "the next <output/>" می تواند با مراجعه به آن رویداد را به عنصر <output/> زیر در DOM ارسال کند. این یک رویکرد کاملاً مستقیم و ساده برای انجام کاری است که معمولاً ممکن است به سیم‌کشی واکنشی نیاز داشته باشد یا نسبتاً پرمخاطب و ناشیانه باشد. در اینجا تصویری از چگونگی حذف هایپر اسکریپت جداسازی نگرانی از طریق طراحی آمده است.

محلی بودن رفتار

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

جزئیات تیلویند در مقاله Tailwind چیست ؟

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

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

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

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

مقالات بیشتر

ورسل نتیفای و ریکت

ادامه بحث هایپر اسکریپت در مقالات بعدی وبلاگ