Інтерактивні блокноти observablehq

3 min readSep 18, 2022

Останній тиждень я граюсь з observablehq. Дуже крута річ. Як результат, створив два інтерактивних записника:

Що це

Інтерактивні блокноти — це форми, текст та графіка що залежить від вибору користувача. Виглядає це так:

Чому воно кльове

Я вже задивлявся на продукти типу Jupyter, але в них одна велика проблема — вони не допрацьовані до повноцінної роботи у браузері. Максимум, що в них є — це невеликі демо. А от observablehq дає можливість створити блокнот у браузері і розшарити його іншим людям.

Що воно підтримує із коробки: javascript, html, markdown, tex formulas, різноманітні графіки, імпорти бібліотек, імпорти даних, sql.

Для деяких речей це прям новий рівень розробки із-за покращенного дебага. Звичайні IDE не можуть показати графік твого ідіотізму, в них щось побачити можливо лише текстом.

Плюс на додаток, мені дуже сподобалось, що при редагуванні коду перераховуються лише ті частини, які залежать від цього коду.

Деякі технічні складності

Зазвичай мене цікавить моделювання. А моделювання — це багато секунд/хвилин праці комп’ютера. Завдяки однопоточній моделі javascript це значить, що можна легко написати код, який заморозить весь блокнот до кращих часів.

Тим не менш, цю проблему можна обійти завдяки тому, що ці записники задумані не лише інтерактивними, а ще й візуально симпатичними. Тому в них є можливість написати код, який буде час від часу обновляти результати. Рекомендую для ознайомлення “ObservableHQ: Introduction to Generators”.

А от я для себе написав поки що такий примітив, який є еквівалентом функції Array.map:

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

Далі, якщо ми впишемо в блокнот такий код, то за десять кроків весь результуючий массив буде створено повністю:

myItems = uxFriendlyMap(_.range(0, 10), i => i * 2)

І оскільки ми цим кодом створили реактивний вузол, то весь код, що залежить від myItems теж буде переобчислюватись.

Тож таким чином я не тільки вирішив проблему зависання, а ще й дав юзеру можливість бачити процес покращення результатів з часом.

Хоча тут ще треба багато примітивів напрацювати.

Дебаг коду

Спочатку мені здалось, що код там дебажити неможливо.

Але там таки працює інструкція debugger. По-друге, весь код інтерактивного блокнота запускається у iframe, тому щоб знайти його, треба докласти трохи зусиль:

Що бісить

javascript, а не typescript. В результаті ні автокомпліту нормального, ні статичної перевірки типів. Фу.
Чомусь профайлінг chrome devtools не бачить мій код.
grammarly не відрізняє текст від коду. Тому або його виключаємо і він не працює зовсім. Або він ругається на те, що в мене бачте, слова написані разом («leverageRatio» замість «leverage ratio»)
неможливо помітити деякі речі як ті, що не треба показувати при звичайному читанні. Тому юзер буде завжди бачити, як багато вспоміжних функцій та змінних ви написали