Хочешь присоединиться к нашей команде?
Заполни заявку
Выбери офис
 
25/07/2018

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

Наша команда продолжительное время занимается разработкой тем для платформы Magento / Magento 2.
Наша команда продолжительное время занимается разработкой тем для платформы 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 тестов, а тестирование очень важно, для нас это второй по приоритету фактор после качества самого кода.

Поделиться

Читай также


Процесс обучения в IT бесконечен, как лента Мёбиуса. Технологии обновляются, меняются фреймворки, и разработчики постоянно учатся чему-то новому даже в рамках одного стека.

Где разработчику выгоднее и удобнее развивать свою карьеру: на фрилансе или в офисе? Рассматриваем опыт фриланса и работу в kt.team.

Почему мы используем маркетинговый подход в web-дизайне (data-driven design) и как UX-исследования от Baymard помогают нам улучшать юзабилити интернет-магазинов.

Скандал на «Стачке» и удаление сексистского спикера. А что на самом деле происходит с женщинами в IT? Наш опыт.

Примеры дизайна и организации пространства в офисах IT-компаний. Что и зачем нужно программистам в офисе? Сравнение мировой практики и опыта kt.team.

Понравилась статья?

Подпишись на нашу рассылку — стань первым, кто узнает о наборе
на обучающие курсы, митапах и новых открытых вакансиях!