Hyvä — нечто большее, чем просто тема для Magento 2

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті.

Всем привет, меня зовут Анастасия и я Front-end разработчик в компании Magecom. За пять лет работы с Magento я успела поучаствовать в создании и улучшении нескольких десятков магазинов. Могу отметить, что задачи всегда примерно одни и те же — улучшение производительности, оптимизация кода, уменьшение зависимостей.

Эта статья будет интересна и полезна как Front-end, так и Back-end разработчикам, ведь речь пойдёт про улучшения в Magento 2 и к чему это все приведёт.

Какие улучшения возможны

Почти каждый проект мы начинаем с базовой темы и в большинстве случаев это Luma — cтандартный вариант для Magento 2. Однако проекты, созданные на основе этой темы, получаются довольно медленными. Этому способствуют как объемные архитектурные решения, так и переизбыток скриптов и стилей.

Luma

Hyvä

В итоге, загрузка страницы происходит медленнее, чем этого ожидает пользователь, а разработчикам приходится работать с большим количеством разнообразных библиотек (Knockout, jQuery, RequireJS, UI Components), что делает разработку более сложной, а проект менее гибким.

Такое положение дел устраивает не всех, и в 2021 году несколько ребят из западной Европы предложили своё решение — тему Hyvä, которая подходит для Magento 2 и является улучшеной альтернативой темы Luma.

На данный момент я уже поработала с Hyvä (произносится как Хува) на нескольких проектах и хочу рассказать, что же её делает такой особенной и почему она становится все более известной.

Hyvä — очередной хайп?

Hyvä создана не ради хайпа или статей, подобных моей. Она действительно способна ускорить как разработку, так и конечный продукт. Осмелюсь даже сказать, что Hyvä — это версия Luma, которую могла бы создать Magento. Или интерфейс, которым потенциально могла бы стать Luma.

Так чего же все-таки не хватает стандартным Magento Luma/Blank, чтобы удовлетворить нынешние потребности разработчиков и пользователей их продуктов?

Во-первых, конечно же, слабая производительность. Думаю каждый, кто сталкивался с magento-разработкой, знает, сколько времени уходит на ожидание перекомпиляции кода и шаблонов. А после весь этот код нужно доставить пользователю и надеяться, что посетитель дождётся загрузки и обработки всех стилей и скриптов прежде, чем решит покинуть страницу магазина.

Во-вторых, использование старых технологий. Нет, knockoutJS, безусловно, классная библиотека, но последний браузер, который не поддерживал современный JavaScript, утратил официальную поддержку более года назад.

Сложно ли «новичкам» с Hyvä

Для того чтобы начать свою работу с Hyvä, потребуется лишь несколько дней. За это время можно ознакомиться с официальной документацией, изучить как работает Alpine.js, понять структуру темы и научиться её собирать. Лишним не будет посмотреть, что из себя представляет Tailwind CSS, потому что именно он используется для создания стилей в данной теме. Технически ничего не мешает вам продолжать использовать чистый CSS, либо же какой-то из препроцессоров, но только с этим CSS-фреймворком можно придерживаться стиля разработки, который авторы библиотеки называют «without ever leaving your HTML» (даже не покидая HTML). В нём уже прописаны тысячи классов «из коробки» и предусмотрена лёгкая возможность добавлять свои, обрабатывать breakpoint, работать с палитрами цветов и анимациями. Также полезно будет вспомнить (или же) выучить, как работать с GraphQL. Этого стека технологий достаточно для Magento front-end разработчика магазина, использующего тему Hyvä.

Технически Hyvä содержит две темы Hyvä/Reset и Hyvä/Default, подобно привычным нам Magento/Blank и Magento/Luma. Но в отличии от Magento/Blank, тема Hyvä/Reset позволяет начать разработку страницы «с чистого листа». И дальше разработчик сам может добавлять нужные блоки.

Hyvä — это PWA?

Многие ассоциируют Hyvä с PWA (Progressive Web App). Но, как заявляют сами разработчики темы, это альтернатива Headless PWA, предназначенная для тех, кто не хочет использовать только JavaScript. Они не верят, что Headless PWA пригодны для всех систем электронной коммерции и поэтому создали продукт, который не требует большой команды высококлассных специалистов для создания быстрых сайтов за короткое время.

Tailwind CSS и Alpine.js. Что это и как работает?

По умолчанию в теме Hyvä есть только две зависимости — Tailwind CSS и Alpine.js.

Tailwind CSS позволяет добавлять классы непосредственно в шаблон.

<div class="container">
   <div class="flex flex-col md:flex-row gap-2 m-2">
       <div class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
           <?= $escaper->escapeHtml(__('Add to Favorites')) ?>
       </div>
       <div class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
             <?= $escaper->escapeHtml(__('Buy it')) ?>
       </div>
   </div>
</div>

Если такой подход, по тем или иным причинам, не подходит — можно создавать и отдельные CSS-файлы, пользуясь конструкцией @apply для использования уже готовых наборов стилей от Tailwind.

.btn {
   @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded;
  
   @screen md {
       @apply px-4;
   }
  
   @screen lg {
       @apply px-6
   }
}

Несмотря на то, что авторы библиотеки постарались сделать имена классов максимально простыми и логичными — вначале вспомнить их обозначения может быть сложно. Поэтому я рекомендую использовать расширение Tailwind CSS IntelliSense, которое не только дополнит название класса, но и сразу покажет, какой CSS за этим классом скрывается.

Предустановленные значения от Tailwind, всегда можно переопределить в tailwind.config.js.

module.exports = {
   theme: {
       extend: {
           colors: {
               green: {
                   100: "#f0fff4",
                   200: "#c6f6d5",
                   300: "#9ae6b4"
               }
           },
           screens: {
               sm: "500px",
               md: "900px",
               lg: "1100px",
               xl: "1400px"
           }
       }
   }
}

Там же доступно создание кастомных анимаций, подключение плагинов или добавление новых стилей.

Подход «without ever leaving your HTML» в Tailwind, пришёл из Alpine.js, где он является практически безальтернативным. Вся необходимая функциональность создаётся непосредственно в шаблонах. Это упрощает программирование простых случаев по сравнению с knockoutjs. Разработчику не нужно тратить время на поиск файлов JS и HTML, который отвечает за PHTML-шаблон.

<div x-data="{ isOpen: false }">
   <button @click="isOpen" = !isOpen>
       <?= $escaper->escapeHtml(__('Toggle text')) ?>
   </button>
   <p x-show="isOpen">
       <?= $escaper->escapeHtml(__('Toggle this text please....')) ?>
   </p>
</div>

Если же функциональности в проекте много и не хочется превращать HTML в кашу — Alpine предлагает вынести инициализацию контекста и методов во внешнюю функцию, сделав код более подобным на Vue-проект.

<section class="relative" x-data="initCart()">
   <div x-show="isLoading">
       <?= $block->getChildHtml('loading'); ?>
   </div>
   <div class="grid ls:grid-cols-2 gap-8" x-show="!isLoading">
       <?= $block->getChildHtml('items'); ?>
       <div>
           <?= $block->getChildHtml('coupon'); ?>
       </div>
       <div>
           <?= $block->getChildHtml('totals'); ?>
       </div>
   </div>
</section>

Переход на Alpine.js позволил отказаться от огромного количества JS-библиотек, которые использовались в Luma. Это позволило сократить количество загружаемых файлов, и если мы сравним страницу продукта на Luma и Hyvä, то увидим, что количество запросов браузера упало с 265 до 16. Объём переданных данных уменьшился в 10 раз, a время загрузки страницы значительно сократилось.

Luma

Hyvä

Неплохо? Разработчики обещают ещё большее ускорение в следующих версиях темы.

Для страницы Checkout в Hyvä можно использовать как привычный Magento Luma Checkout, так и фирменный Hyvä React Checkout (сейчас уже вышла стабильная версия). Для использования последнего необходима версия Magento 2.3.4 или выше.

Так как Tailwind — это просто набор предопределенных классов, то даже если остановить свой выбор на подключении Luma Checkout — всё ещё сохраняется возможность использовать Tailwind CSS, лишь немного изменив тему.

Если у вас есть опыт работы с Magento/Luma или Magento/Blank, то обязательно попробуйте разработку с помощью Hyvä, это не займёт много времени.

Недостатки в Hyvä

Надеюсь, с преимуществами Hyvä уже понятно, но и не обошлось без недостатков:

  1. Как и любая новая технология, Hyvä плохо совместима со сторонними модулями. Сегодня почти на каждом сайте Magento используются третьесторонние модули. И если модуль использует knockout, то его нужно переписать на Alpine.js. То же самое касается плагинов, зависимых от jQuery и других библиотек. С подобным уже сталкивался каждый разработчик, которому приходилось переводить магазин с первой Magento на вторую.
  2. Hyvä адаптировала всю базовую фунциональность Magento, но некоторые модули Commerce/B2B версий Magento ещё не адаптированы. Ознакомиться с актуальной таблицей поддержки всегда можно на официальном сайте.

Несмотря на эти недостатки, я думаю, что плюсы перевешивают. Высокая производительность и более быстрая разработка позволяет реализовать функциональность разной сложности за короткое время, даже если она ещё отсутствует. Например, на моих проектах мы реализовали три модуля B2B версии за несколько недель.

В случае возникновения вопросов по работе с темой, их можно задать через Slack, в сообществе обсуждаются различные нюансы работы с темой и будущие контрибьюты.

В любом случае Hyvä — это что-то новое и прогрессивное. Разработчикам действительно удалось создать быструю и качественную тему для Magento, которая стремительно набирает популярность и показывает классные результаты. Обязательно её попробуйте.

Сподобалась стаття? Натискай «Подобається» внизу. Це допоможе автору виграти подарунок у програмі #ПишуНаDOU

👍ПодобаєтьсяСподобалось8
До обраногоВ обраному4
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Отето прогресс!!1 спешите видеть вместо нокаута теперь Хуйва. Еще лет 15 подождать и сделают нормальный фронт из коробки на вужс если оно еще будет существовать хотя для маженты чем древнее тем лучше

Нажаль Мадженто без сторонніх модулів це критичне обмеження для бізнесу.

Але дякую за статтю. Вона дуже інформативна.

Підписатись на коментарі