Технология Vue.Storefront

Наша команда продолжительное время занимается разработкой тем для платформы Magento / Magento 2.

Для ускорения процесса стилизации мы использовали стайлгайд - отдельную страницу со списком элементов интерфейса интернет-магазина. Стайлгайд основан на особенности Magento 2 - неизменяемой DOM-разметке. Мы добавляли кастомные стили, к примеру, bootstrap, - к стандартным, применяя Less Extend feature, тем самым добиваясь на всех проектах одинаковой разметки. И это ускоряло процесс самой разработки, поскольку не нужно было править шаблоны, добавляя новые классы. Еще один плюс стандартного DOM в том, что мы используем одну систему автоматических тестов, применяемую на разных проектах. В недавнее время мы запустили несколько PWA проектов на платформе Vue.Storefront. В стандартной теме Default из коробки используется Atomic подход к стилизации. Atomic - очень крутая концепция, понравилась нам в связке с компонентами Vue. Она была для нас как глоток свежего воздуха, спасибо команде Divante за ее разработку. В какой-то момент нам стало не хватать стандартных Atomic стилей и захотелось большего. На глаза попался Atomic-фреймворк TailWindCSS, который полностью соответствует подходу Vue Storefront и добавляет конструкцию @apply, позволяющую реализовать одинаковый DOM.

После этого появилась идея реализовать тему на базе Default, главной особенностью которой будет DOM со стандартными классами по аналогии с DOM Magento 2 и Styleguide для ускорения процесса разработки. Бонусом идут одни и те же автоматические тесты для всех проектов (тоже экономия ресурсов на разработку - один раз пишутся e2e тесты). Мы реализовали MVP версию с подключенным TailWindCSS и отдельной страницей Styleguide c примером оформления кнопки добавления в корзину. Цель - заполнить стайлгайд компонентами Vue и реализовать в них минимальное количество E-Commerce классов по примеру DOM-модели Magento 2. Это нам еще предстоит сделать, а пока впереди кропотливая работа. После ее реализации мы хотим использовать тему The Coat, как базовую в новых проектах, и тем самым ускорить работу темы за счет Styleguide и не тратить время на разработку отдельных e2e тестов, а тестирование очень важно, для нас это второй по приоритету фактор после качества самого кода.