Shopify повертається до чистого коду, керований штучним інтелектом

Shopify прагне відродити практику читання вихідного коду, використовуючи штучний інтелект як ключового союзника у цьому поверненні до основ. Компанія запускає нову тему для вітрин своїх клієнтів (мерчантів), яка, за її словами, буде повністю зрозумілою навіть для тих, хто має мінімальні знання HTML.

Новий підхід до тем

Ця нова тема розроблена для спрощення сприйняття та модифікації як для людей, так і для машин. Хоча назва теми ще не оголошена, вона представлена на форумах розробників як імовірний наступник Horizon — поточної базової теми Shopify, що інтенсивно використовує JSON. Новий код переважно складається з HTML, доповненого власною мовою шаблонів Liquid від Shopify, яка також є легкою для читання.

Мерчанти, переглядаючи каталог шаблонів нової теми, побачать прості текстові файли з легко аналізованим кодом, а не довгі рядки незрозумілого JSON. Ця тема має на 93% менше рядків коду, ніж Horizon.

Роль ШІ у змінах

Рушійною силою цієї архітектурної перебудови є зростаюча популярність сервісу штучного інтелекту Shopify. Бен Зел, директор з продуктів Shopify для вітрин, зазначив, що «кожна провідна модель вже розуміє HTML. Він виразний, локальний та ефективний з точки зору токенів». Мова шаблонів Liquid від Shopify ідеально поєднується з HTML.

Історично, Shopify збагачував свої шаблони, надаючи користувачам більше контролю через Online Store Editor. Однак ця гнучкість призвела до складності, оскільки інструкції користувацьких шаблонів конвертувалися в JSON. Зел підкреслив, що «як тільки шаблони стали JSON, вони перестали бути чудовою поверхнею для розробників. Вони стали автоматично збереженим результатом».

Спрощення для людей та ШІ

Нещодавно Shopify додав помічника ШІ під назвою Shopify Sidekick, який надає користувачам ще більше контролю над дизайном сторінок. Замість запам'ятовування шістнадцяткових кодів, користувачі можуть просто «оголосити» колір фону синім, і агент це зробить. Цього року 20% мерчантів Shopify використовують Sidekick, здійснивши 25 мільйонів редагувань.

Як наслідок, Shopify зіткнувся із завданням спрощення для самого агента ШІ. Виявилося, що агенти, як і люди, потребують легко читабельного коду, чітких контрактів та конструктивного зворотного зв'язку. Тому компанія реорганізувала архітектуру тем, використовуючи ці якості як основні принципи, зберігаючи при цьому існуючі теми Liquid у «вічному API». Ці зміни не тільки краще підтримують нові ШІ-системи, але й роблять базовий код більш читабельним для людей.

Технічні нововведення

Для нової базової теми Liquid отримав новий синтаксис та парсер, розроблений з додатковою дисципліною для виконання складніших інструкцій на бекенді. Користувач бачить компоновані, типізовані блоки, які легко поєднуються зі звичайним HTML. Кожна тема, розроблена користувачем, отримує спеціальний каталог та файли з інструкціями та вказівниками щодо генерації додаткових артефактів. Розширений тег doc містить приклади та інструкції щодо обробки контрактів та фрагментів.

Ключовим елементом нової теми є новий компонований тег block, що містить набір вкладених параметрів, які описують компоненти сторінки. Розробники можуть надавати їм значення, конфігурації, перевизначення та інші інструкції. Також з'явився новий примітив partial, який дозволяє оновлювати певну область сторінки без необхідності перемальовувати всю сторінку. Команда також додала стандартні дії — колекцію тригерів подій для сайту, наприклад, оновлення кошика покупок. Цей примітив дозволить видалити тисячі рядків реактивного коду з Horizon.

Shopify також розробив 20 нових правил для забезпечення відповідності згенерованих тем політиці компанії щодо контрактів, структури, валідації, складності, вкладеності та обмежень розміру файлів. Liquid тепер підтримує логічні можливості, такі як булеві вирази, інфіксні оператори з пріоритетом, а також літеральні масиви та об'єкти. У майбутньому буде підтримуватися фреймворк Tailwind CSS. Усі ці покращення мають спростити роботу мерчантів, які налаштовують власні вітрини.

Що це означає для розробників

Для розробників це означає повернення до більш читабельного та зрозумілого коду на основі HTML та Liquid, що спрощує модифікацію та взаємодію з темами Shopify. Нові можливості Liquid, такі як компоновані блоки та часткові оновлення, а також чіткіші правила для тем, покращують досвід розробки, роблячи його більш ефективним та менш залежним від складних JSON-конфігурацій.

Ключові факти

• Shopify повертається до підходу, що робить вихідний код більш читабельним, використовуючи ШІ як союзника.

• Запускається нова тема для вітрин, яка є простішою для розуміння людьми з HTML-знаннями та машинами.

• Нова тема є імовірним наступником JSON-орієнтованої теми Horizon і має на 93% менше рядків коду.

• Код нової теми переважно складається з HTML, доповненого мовою шаблонів Liquid.

• ШІ-сервіси Shopify є рушійною силою цієї архітектурної перебудови, оскільки провідні моделі ШІ добре розуміють HTML.

Джерела

• How AI drove Shopify back to clean code