Англійська для розробників SolidJS

SolidJS привернув увагу як реактивний інтерфейс, який компілює багато з надходжень, знайдених у віртуальних бібліотеках, заснованих на DOM, але його реактивна модель використовує термінологію, яка значно відрізняється від React або Vue. Розробники, які переходять на Solid, або пояснюють його переваги для команди, що оцінює фреймворки, потребують точної англійської мови, щоб описати такі поняття, як сигнали і дрібнозернисті оновлення, не повертаючись до неточних аналогій. Цей посібник містить словник, який ви будете використовувати під час перегляду коду, розгляду документів RFC і технічних інтерв’ ю, пов’ язаних з SolidJS.

Ключовий словник

** Signal ** — реактивний примітив, який містить значення і автоматично повідомляє будь- який код, який його читає, щоразу, коли це значення змінюється.

• “Ми обгорнули лічильник сигналом, щоб інтерфейс користувача автоматично оновлювався, коли він змінюється.” *

** Досконала реактивність ** — модель оновлення, за якої оновлюються лише певні вузли DOM, які залежать від змінених даних, без перевідтворення всіх компонентів. “Дрібнозерниста реактивність Solid означає, що оновлення одного рядка в таблиці не перевідображає весь список.”

** Похідне значення (обчислене) ** — значення, обчислене з одного або декількох сигналів, яке автоматично перераховується щоразу, коли змінюються його залежності.

• “Загальна ціна є похідним значенням, яке перераховується щоразу, коли оновлюється сигнал кількості.” *

** Effect ** — функція, яку буде виконано автоматично у відповідь на зміни у сигналах, які вона зчитує, зазвичай використовується для побічних ефектів, таких як ведення журналу або отримання даних.

• “Ми використовували ефект для синхронізації значення сигналу з локальним сховищем кожного разу, коли воно змінюється.” *

** Store ** — реактивний об’ єкт для керування структурованим, вкладеним станом, який надає можливість відстеження окремих властивостей, а не всього об’ єкта. “Замість одного великого сигналу, ми використовували сховище, тому оновлення одного поля не скасовує весь об’ єкт.”

** Компіляція JSX ** — процес, за допомогою якого компілятор Solid перетворює шаблони JSX безпосередньо на ефективний код маніпуляції DOM під час збирання, замість використання віртуального DOM diff під час виконання.

• “Зважаючи на компіляцію JSX, немає віртуального кроку розпізнавання DOM, що сповільнює процеси під час виконання.” *

** Реактивний примітив ** — будь- який з основних блоків Solid — сигнали, ефекти і записки — використовується для побудови реактивної поведінки. “Якщо ви зрозуміли основні реактивні примітиви, більшість інших API впадуть на місце.”

** Мемо** — кешоване похідне значення, яке перераховується лише у разі зміни його базових сигналів, уникаючи зайвих перерахунків.

• “Ми запаковали дорогу логіку фільтрування в записку, щоб вона не повторювалась при кожному не пов’ язаному з нею перевідтворенні.” *

Звичайні фрази

• «Ця компонента постійно пере-рендеринг — чи ми забули загорнути це обчислення в записку?»
• «Solid не перезапускає всю функцію компонента при оновленнях, тільки реактивні частини, які змінилися»
• «Давайте перенесем це в магазин, оскільки ми відстежуємо декілька вкладених полів»
• Цей ефект вистрілює більше, ніж очікувалося — перевірте, які сигнали він насправді читає»
• «Компілятор обробляє оновлення DOM безпосередньо, тому тут немає віртуальної DOM-надмірності»
• «Ми вибрали Solid частково через менший розмір снопа і частково через модель реактивності з дрібнозернистим складом»

Приклади висловлювань

При поясненні SolidJS нетехнічним користувачам:

• “Solid оновлює тільки ті частини сторінки, які насправді змінилися, замість перерахунку всього екрана, що робить програму значно швидшою.” *

Під час створення квитка підтримки:

• “Наше значення ефекту, здається, виконується двічі під час початкового завантаження, коли воно обгортається навколо похідного сигналу всередині сховищ. Чи це очікувана поведінка, чи знак того, що ми неправильно відстежуємо залежність?»*

Під час обговорення архітектури на груповій нараді:

• “Я б запропонував вам моделювати кошик покупок як магазин, а не як окремі сигнали, оскільки нам потрібні точні оновлення у кількох вкладених властивостях, таких як кількість і ціна елементів.” *

Професійні поради

• Скажіть “компонентні функції виконуються один раз” при поясненні Solid розробникам React - це найбільший зміна ментальної моделі і варто вказати, щоб уникнути плутанини.
• Використовуйте « ** реактивна залежність ** » замість « змінна », коли обговорюватимемо, що викликає ефект або запис для повторного запуску — це пояснює, що зв’ язок буде відстежуватись, а не просто посилатися на нього.
• Під час повідомлення про ваду, пов’ язану з несподіваними повторними запусками, завжди вказуйте, чи є значення, про яке йдеться, ** сигналом **, ** записом ** або простою змінною JavaScript, оскільки буде стежити лише за першими двома.
• Роз’ ясніть, чи маєте на увазі ви ** оновлення DOM ** або ** виконання функції компонента **, коли описуєте швидкодію — у Solid ці дві події зазвичай не є однією і тією ж подією.

Практичні вправи

1. Розробник React приєднується до вашої команди і запитує, чому їх компонент SolidJS записує в журнал лише один раз, а не при кожній зміні стану. Напишіть два- три речення, пояснюючи чому, простою англійською.
2. Поясніть у одному реченні різницю між сигналом і запискою.
3. Написати короткий коментар щодо перегляду коду, у якому буде запропоновано співробітнику команди перетворити декілька пов’ язаних сигналів у один склад.

Розробка мов програмування: розробка мов програмування для непрофесійних користувачів

Фокус SolidJS на дрібнозернистій реактивності і її основних принципах - сигнали, похідні значення і магазини - може відчуватися неймовірно точними, коли виражені англійською мовою. Для розробників, чия перша мова не є англійською, ця точність часто перетворюється на значний бар’ єр для розуміння не тільки * що *, але також і * як * і * чому *. Легко загубитися в технічному жаргоні без міцного фундаменту спільного професійного вимови, особливо коли справа доходить до перегляду коду або співпраці над складними проектами. Це не просто про те, щоб знати визначення «похідної цінності»; це про те, щоб бути в змозі впевнено сформулювати свою мету в рамках обговорення команди або чітко пояснити свої міркування під час перегляду коду. Важливим елементом є визнання того, що технічні обговорення часто покладаються на неявне розуміння, побудоване на спільних конвенціях і очікуваннях - щось, чого часто не вистачає, коли мовні навички є фактором. Ми прагнемо до ясності, стислості і здатності робити значний внесок, не тільки технічно, але і з точки зору комунікації. Сфокусування на активному голосі, використання точних дієслів і логічне структурування речень є ключовими стратегіями тут.

Розглянемо сценарій: Під час перегляду коду PR, який пропонує використання похідного значення для оновлення стану на основі зміни сигналу. Рецензент може залишити коментар на зразок: «Чи можете ви розібратися, чому це похідне значення є необхідним? Це здається трохи складним.” Для не-рідного мовця, це може відчуватися негайно критичним і потенційно залякуванням. Замість цього, більш доступною формулюванням було б: «Чи можете ви пояснити логіку використання похідного значення тут? Зрозуміти, як це впливає на загальний шаблон реактивності, допоможе мені оцінити його вплив. “Зауважте зміну - пом’якшення мови, явне прохання про пояснення і вкладення питання в ширший контекст * реактивності *. Аналогічно, під час написання описів PR, твердження « Цей PR реалізує похідне значення для ефективного оновлення інтерфейсу користувача » є більш ефективним, ніж просто сказати « Реалізує похідне значення ». У останньому випадку не вистачає ясності щодо * переваги * — що це ефективний спосіб керування оновленнями. Навчання формувати технічні рішення з точки зору позитивних результатів (пізнання продуктивності, зменшення складності) є життєво важливим для гладкого співробітництва.

Крім того, важливо опанувати спільні фрази, пов’язані з зневадженням і вирішенням проблем. Замість того, щоб сказати «Це не працює», більш професійним підходом буде: «Я стикаюся з проблемою з оновленням похідного значення - здається, що це викликає несподівані пере-рендери». Це демонструє обізнаність з технічними деталями і обрамляє проблему таким чином, що запрошує спільні рішення. Зверніть увагу на те, як досвідчені розробники описують проблеми, навіть якщо ви не розумієте всіх деталей спочатку, це чудова можливість навчитися. Це стосується поглинання * шаблонів * спілкування, а не тільки окремих слів.

Ось приклад, що демонструє використання solid-dev-tools для зневадження реактивності:

npx solid-dev-tools inspect --signal mySignal

Ця команда, коли використовується і пояснюється чітко (наприклад, «Я використовую solid-dev-tools, щоб відстежити зміни сигналу, які викликають оновлення цього похідного значення»), забезпечує реальний спосіб ілюструвати концепції реактивності і будувати впевненість у розумінні основних механізмів. Сам інструмент є лише одним з елементів; його ефективне використання залежить від чіткого повідомлення про те, що ви спостерігаєте і чому це важливо.