Hype Around Signals - Smashing Magazine

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

در توسعه وب، آنها ابتدا با KnockoutJS آن را اجرا کردند و اندکی پس از آن، سیگنال ها در (بیشتر) مغز ما قرار گرفتند. چند سال پیش، چندین پیاده سازی مشابه به وجود آمد.

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

برای خلاصه کردن تاریخ: سیگنال ها حتی به عنوان یک فناوری قدیمی تر، انقلابی را در نحوه تفکر ما در مورد تعامل و داده در رابط های کاربری خود در آن زمان آغاز کردند. و از آن زمان تاکنون، هر کتابخانه UI (SolidJS، Marko، Vue.js، Qwik، Angular، Svelte، Wiz، Preact، و غیره) نوعی پیاده سازی از آنها را اتخاذ کرده است (به جز React).

به طور معمول، الف سیگنال از یک اکسسور (گیرنده) و یک تنظیم کننده تشکیل شده است. تنظیم کننده یک به روز رسانی برای مقدار موجود توسط سیگنال ایجاد می کند و همه اثرات وابسته را راه اندازی می کند. در حالی که یک Accessor مقدار را از منبع می کشد و هر بار که تغییری در بالادست اتفاق می افتد توسط افکت ها اجرا می شود.

const (signal, setSignal) = createSignal("initial value");setSignal("new value");console.log(signal()); // "new value"

برای اینکه دلیل آن را بفهمیم، باید کمی عمیق تر در مورد چه چیزی کاوش کنیم معماری API و واکنش پذیری ریز دانه در واقع معنی

معماری API

دو راه اساسی برای تعریف سیستم ها بر اساس نحوه مدیریت داده هایشان وجود دارد. هر یک از این رویکردها مزایا و معایب خود را دارند.

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

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

پارگی دولتی زمانی اتفاق می افتد که بخش های مختلف یک رابط کاربری در مراحل مختلف وضعیت قرار دارند. به عنوان مثال، زمانی که هدر شما 8 پست در دسترس را نشان می دهد، اما لیست دارای 10 پست است.

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

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

در فشار دهید سیستم ها، معاوضه پذیرفته شده این است که گیرنده باید بتواند با جریان به روزرسانی به گونه ای برخورد کند که باعث خرابی آن نشود و در عین حال، تمام گره های مصرف کننده را در حالت همگام نگه دارد. در توسعه وب، RxJS محبوب ترین نمونه از یک سیستم فشار است.

خواننده با دقت ممکن است متوجه شده باشد که معاوضه ها در هر سیستم در دو طرف طیف قرار دارند: در حالی که سیستم های کششی در برنامه ریزی کارآمد به روزرسانی ها خوب هستند، در معماری های فشار، داده ها می دانند کجا استفاده می شوند - امکان کنترل دقیق تری را فراهم می کند. این چیزی است که یک فرصت عالی برای یک ترکیبی مدل

معماری های فشاری-کششی

در سیستم های Push-Pull، ایالت فهرستی از مشترکین دارد که پس از به روزرسانی، می تواند باعث واکشی مجدد داده ها شود. تفاوت آن با فشار سنتی این است که خود به روز رسانی برای مشترکین ارسال نمی شود - فقط یک اعلان است که آنها در حال حاضر قدیمی هستند.

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

ما به این داده ها می گوییم سیگنال ها، و روشی که آن مشترکین برای به روز رسانی فعال می شوند نامیده می شود اثرات. با آن اشتباه گرفته نشود useEffect، که نامی مشابه برای یک چیز کاملاً متفاوت است.

واکنش پذیری ریز دانه

هنگامی که ما تعامل دو طرفه بین منبع داده و مصرف کننده داده را برقرار کنیم، یک سیستم واکنشی خواهیم داشت.

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

حالا برای درست کردنش ریزدانه دو شرط اساسی وجود دارد که باید رعایت شود:

1. کارایی: سیستم فقط حداقل محاسبات لازم را اجرا می کند.
2. بدون اشکال: هیچ حالت واسطه ای در روند به روز رسانی یک وضعیت نشان داده نمی شود.

کارایی در رابط های کاربری

برای درک واقعی اینکه چگونه سیگنال ها می توانند به سطوح بالایی از کارایی دست یابند، باید بدانیم که داشتن یک سیگنال به چه معناست دسترسی. در ضربات پهن، آنها به عنوان توابع گیرنده رفتار می کنند. داشتن یک Accessor به این معنی است که مقدار در محدوده مولفه ما وجود ندارد - آنچه که الگوهای ما دریافت می کنند یک دریافت کننده برای آن مقدار است، و هر بار که اثرات آنها اجرا می شود، یک مقدار جدید به روز می آورند. به همین دلیل است که سیگنال ها تابع هستند و متغیرهای ساده نیستند. به عنوان مثال، در Solid:

import { createSignal } from \'solid-js\'function ReactiveComponent() {  const (signal, setSignal) = createSignal()    return (      )}

بخشی که مربوط به عملکرد (و کارایی) در قطعه بالا است، در نظر گرفتن است signal() یک گیرنده است، نیازی به اجرای مجدد کل نیست ReactiveComponent() تابع برای به روز رسانی مصنوع ارائه شده. فقط سیگنال دوباره اجرا می شود و تضمین می کند که هیچ محاسبات اضافی اجرا نمی شود.

UI های بدون اشکال

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

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

توجه کنید E گره بستگی دارد D و B، اما فقط D بستگی دارد C.

اگر سیستم واکنشی شما خیلی مشتاق به روزرسانی است، می تواند به روزرسانی را از آن دریافت کند B در حالی که D هنوز کهنه است که باعث خواهد شد E برای نشان دادن حالت واسطه ای که نباید وجود داشته باشد.

داشتن آن آسان و شهودی است A به محض رسیدن داده های جدید، فرزندان خود را برای به روز رسانی فعال کند و اجازه دهید آن را کاهش دهد. اما اگر این اتفاق بیفتد، E داده ها را از B در حالی که D کهنه است اگر B قادر به راه اندازی به روز رسانی از E، E یک حالت میانی نشان خواهد داد.

هر پیاده سازی استراتژی های به روز رسانی متفاوتی را برای حل این چالش اتخاذ می کند. آنها را می توان به دو دسته دسته بندی کرد:

1. سیگنال های تنبل
   جایی که یک زمان بندی ترتیبی را که به روزرسانی ها در آن انجام می شوند را تعیین می کند. (A، سپس B و C، سپس D، و در نهایت E).
2. سیگنال های مشتاق
   هنگامی که سیگنال ها از آگاهی والدین خود آگاه هستند کهنه، چک کردن، یا تمیز کردن. در این رویکرد، زمانی که E آپدیت را از B، یک بررسی/به روز رسانی را راه اندازی می کند D، که تا زمانی که بتواند اطمینان حاصل کند که دوباره در a است بالا می رود تمیز کردن دولت، اجازه می دهد E تا در نهایت به روز شود.

بازگشت به رابط کاربری ما

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

DX و UX

وقتی کدی که نوشتیم برای استدلال راحت تر است، می توانیم روی چیزهایی تمرکز کنیم که واقعاً مهم هستند: ویژگی هایی که به کاربران خود ارائه می دهیم. به طور طبیعی، ابزارهایی که برای کارکردن به کار کمتری نیاز دارند، تعمیر و نگهداری و هزینه کمتری را برای صنعتگر به همراه خواهند داشت.

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

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

رفتن به عمق

در مقاله بعدی در مورد این موضوع بیشتر صحبت خواهیم کرد، جایی که ما به طور دقیق تری به پیاده سازی های مختلف سیگنال ها (تنبل، مشتاق، ترکیبی)، به روز رسانی های برنامه ریزی شده، تعامل با DOM و اشکال زدایی کد خود خواهیم پرداخت!

در همین حال، می توانید من را در بخش نظرات زیر، در 𝕏 (توئیتر)، لینکدین، بلو اسکای یا حتی یوتیوب پیدا کنید. من همیشه خوشحالم که چت می کنم، و اگر به من بگویید چه چیزی می خواهید بدانید، حتما آن را در مقاله بعدی قرار خواهم داد! ببینمت

(Yk)