Гиды и советы

Vue Storefront против Magento PWA Studio: что лучше для вашего магазина? – Элогический

Vue Storefront против Magento PWA Studio: что лучше для вашего магазина? - Элогический

Vue Storefront против Magento PWA Studio: что лучше для вашего магазина?

Люди мастера манипулирования материей – мы изобрели колесо, двигатель, современные технологии, такие как смартфоны, и мы продолжаем прогрессировать с безумной скоростью.

Со временем одно не изменилось – скорость, с которой мы приспосабливаемся к новым вещам. То же самое и с прогрессивными веб-приложениями (PWA). Впервые они были представлены в 2015 году и были разработаны инженерами Google для обеспечения работы в Интернете, аналогичной приложениям для смартфонов. 

И, как и все новые технологии, они в конечном итоге проникают во все отрасли, включая розничную торговлю. 

Сегодня существует два основных конкурирующих проекта: Vue Storefront и Magento PWA Studio.

Что такое PWA?

Веб-разработка и мобильная разработка стремительно выросли в последние годы. Но всегда есть куда расти. PWA изменят наши способы взаимодействия с Интернетом.

Хотя вы получаете скорость, как у приложений, вам не нужно ничего устанавливать. Все работает прямо в вашем браузере или устройстве. Таким образом, вы получаете быстрые кроссплатформенные сайты, защищенные с помощью HTTPS.

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

Термин PWA был придуман инженерами Google в 2015 году. Их цель заключалась в использовании существующих технологий для расширения возможностей веб-сайтов без принуждения пользователей к установке дополнительных плагинов / расширений. Новый подход к веб-технологиям также позволяет отказаться от адаптивных веб-сайтов, которые реагируют или адаптируются в зависимости от устройства или браузера. 

PWA против нативных приложений против адаптивных веб-сайтов

Vue Storefront против Magento PWA Studio: что лучше для вашего магазина? - Элогический

Источник – One North

Как PWA может улучшить мой бизнес в сфере электронной коммерции?

Другой вопрос, который вы можете задать: «Разве моего текущего веб-сайта и / или приложения недостаточно?»

«Если у вас нет приложения или вы планируете его разработать, подумайте, насколько оно дорого. Это не одно мобильное приложение, а два – для iOS и Android. “

PWA отлично работают на Android, однако поддержка на iOS все еще отрывочна. Поддержка PWA была представлена ​​в iOS 12.2, но iOS 13 обещает обеспечить лучшую поддержку, а будущие обновления будут более удобными для PWA.

Если у вас есть приложение, подумайте об этом: опрос Quetta показал, что в среднем мобильное приложение теряет 77% пользователей всего за три дня. И он теряет 90% после первого месяца. 

Все эти факторы, а также тот факт, что классические витрины Magento медленнее и не так отзывчивы, как приложение, и не могут использоваться в автономном режиме, означают, что магазин Magento PWA имеет смысл.

Зачем создавать прогрессивные веб-приложения?

[iframe src=”https://www.youtube.com/embed/1QILz1lAzWY”]

Преимущества PWA для продавцов

  • Быстрая и экономичная разработка: собственные мобильные приложения дороги и просто не могут достичь уровня скорости и удобства использования стандартной сборки Magento. Обновление до PWA – отличное вложение в ваш будущий сайт.
  • Добавить на главный экран: вы можете настроить приложение так, чтобы пользователю предлагалось всплывающее окно «Добавить на главный экран». Вашим клиентам не придется создавать закладки или вводить URL-адрес каждый раз, когда они хотят проверить ваши последние продукты. Наличие этой функции увеличит количество посетителей и, как следствие, улучшит оптимизацию коэффициента конверсии.
  • Интеллектуальные push-уведомления: многие годы это была точка продажи нативных приложений. Теперь он доступен для PWA. Вы можете уведомлять своих клиентов о скидках, новинках и т.д.
  • Единое приложение для управления ими всеми: с приложением вам больше не нужно возиться с его тестированием на всех типах браузеров и устройств. И вам не нужно предлагать пользователям обновить приложение.
  • Большой рост SEO: с быстрым сайтом PWA вы будете выше в рейтинге Google. Это в сочетании с увеличением трафика, и вы на пути к вершине.
  • Увеличьте удержание / повторное вовлечение пользователей и конверсию: все преимущества, упомянутые выше, максимизируют вашу способность обеспечивать ценность и простоту использования, что положительно отразится на показателях вашего бизнеса. PWA Stats продемонстрировала все доступные тематические исследования PWA и обнаружила, что конверсия увеличилась от 17% до 104%.

Преимущества PWA для пользователей

  • Быстрая загрузка: прогрессивные приложения сравнимы по скорости с мобильными приложениями и значительно быстрее, чем адаптивные сайты. Для электронной коммерции это замечательно, потому что люди могут делать покупки, оформлять покупки и платить в мгновение ока.
  • Автономный просмотр: приложения можно загружать онлайн, и они будут продолжать работать, если интернет-соединение потеряно или станет нестабильным. Люди могут просматривать ваш каталог или читать вашу последнюю статью в автономном режиме.
  • Работает на любом устройстве: независимо от устройства или браузера, ваши пользователи получат такой же быстрый и безопасный опыт покупок.

Просмотр витрины и Magento PWA Studio

Magento PWA Studio – это набор инструментов, который разработчики могут использовать для создания новой витрины с помощью любого современного внешнего интерфейса.

Тема по умолчанию в Magento 2 называется Luma, а тема по умолчанию в Magento PWA Studio называется Venia. Концепция темы будет последовательной – только вместо KnockoutJS, CSS и т.д. Вы можете «вкрутить» любой технический стек. В настоящее время стандартный технический стек – это ReactJS, webpack и GraphQL.

GraphQL – важный актив для сайтов электронной коммерции. Он заменяет вызовы RestAPI и значительно сокращает время запроса, размер и головную боль разработчика (нет кода PHP, возможность запрашивать отдельные атрибуты). Прямо сейчас это включено как в Vue Storefront, так и в Magento PWA Studio.

Vue Storefront – это проект, созданный командой Divante специально для того, чтобы заполнить пустоту PWA в электронной коммерции. Целью проекта с открытым исходным кодом было создание независимой от платформы, универсальной электростанции PWA с фреймворком Vue.js.

Vue Storefront против Magento PWA Studio: что лучше для вашего магазина? - Элогический

Источник: вид на витрину

Vue Storefront поддерживает следующие платформы электронной коммерции:

  • Magento
  • Посуда
  • Эписервер
  • Веселье
  • Coreshop
  • Пользовательские сборки, которые можно использовать на любой платформе

Это сравнение студии Magento PWA и Vue Storefront:

PWA Studio Вид на витрину
Началось Июнь 2018 г. Ноябрь 2017 г.
Фронтенд База Реагировать Vue.js
Последняя версия 4.0.0 1.11.0
Количество выпусков 50 117
Звезды / Вилки 556 / 316 5,8 км / 1,2 км 5
Авторы 105 214
Провайдер Magento (Adobe) Divante Ltd
Сообщество Сильный Сильный
Открытый источник ✔️ ✔️
Проекты Живые 3 36 (Номер предоставлен Divante)
Промежуточное ПО UPWARD-концепция Просмотр API витрины
Интеграции по умолчанию = <Magento 2.3 Magento 1 + 2
Shopware
Pimcore
CoreShop
WordPress EpiServer
SpreeCommerce
Odoo ERP
BigCommerce
На стороне сервера R. ? в развитие ✔️
Инструменты тестирования Является Кипарис (E2E), Карма
Модульный тест ~ 78% покрытие Покрытие <30%
E2E тесты ✔️
Строгие типы ⚠️ пока нет, чистый JS Babel / ES2016
Дополнительный стек технологий Redux, GraphQL, Webpack NodeJs, Vuex, GraphQL, Webpack
i18n ? в развитие ✔️
Мульти-сайты ✔️ ✔️
CMS CMS API / PageBuilder CMS API
Поиск ElasticSearch ElasticSearch
Список желаний ⚠️ еще нет ✔️
Логин аккаунта ? в развитие ✔️
Проверять, выписываться ✔️
Платежи Paypal (Брейнтри) Paypal, Stripe, Klarna, Mollie, Adyen
Отслеживание Просмотр аналитики
Офлайн-поддержка Workvia Workbox ✔️Полный
Дополнительные возможности TBD TBD
Ссылка на GitHub GitHub
Потрясающий список TBD Потрясающий список
Демонстрация внешнего интерфейса Veniapwa demo.vuestorefront.io

Плюсы Vue Storefront

  • Готово к производству
  • Сильная база участников
  • Проект с открытым исходным кодом
  • Совместим с Magento 1 и 2
  • Независимость от платформы
  • В настоящее время больше возможностей, чем в PWA Studio

Минусы Vue Storefron t

  • Разработано независимой компанией
  • Потенциальный риск конфликта после будущего обновления Magento

Плюсы Magento PWA Studio

  • Несколько готовых к производству сайтов
  • Сильная база участников
  • Выделенная команда PWA
  • Проект с открытым исходным кодом
  • Включает поддержку GraphQL
  • Впечатляющий набор инструментов для разработки и настройки витрины

Минусы Magento PWA Studio

  • Не хватает функций
  • Вялый паттерн выпуска
  • Доступно только для Magento 2.3.x

Примечание: написаны ли они на React или Vue, PWA неотличимы по производительности. Кроме того, хотя PWA Studio написана на React, вы можете использовать любую технологию для кодирования PWA. 

Vue Storefront против Magento PWA Studio: что лучше для вашего магазина? - Элогический

Источник: Magento PWA DevDocs

PWA – это будущее Интернета

Мы вступаем в новый интернет-ренессанс. В ближайшем будущем PWA не будут новинкой, они станут золотым стандартом. Но они могут быть для вас не такими новыми, как вы думаете. Возможно, вы даже посетили сайт PWA и не заметили. Возможно, вы даже делали покупки на сайте розничной или электронной коммерции PWA.

Вот несколько примеров магазинов, созданных с помощью обоих инструментов PWA:

Примеры PWA, созданных с помощью Magento PWA Studio

Природа

Vue Storefront против Magento PWA Studio: что лучше для вашего магазина? - Элогический

UK Meds

Vue Storefront против Magento PWA Studio: что лучше для вашего магазина? - Элогический

Примеры PWA, созданных с помощью Vue Storefront PWA

Магазин Кубота

Vue Storefront против Magento PWA Studio: что лучше для вашего магазина? - Элогический

Клеевая лихорадка

Vue Storefront против Magento PWA Studio: что лучше для вашего магазина? - Элогический

Будущее Vue Storefront

Vue Storefront готов к производству, имеет 30 партнеров и прочную бизнес-модель.

На сайте Vue Storefront:

«В прошлом году наша выручка от проекта достигла 1 миллиона долларов, и мы запустили коммерческое облачное предложение с опытными командами в Нью-Йорке и Берлине. Мы видим, как другие партнеры реализуют огромные проекты в Vue Storefront и зарабатывают миллионы. Это не любимый проект. Есть основная команда, которая постоянно занимается Vue Storefront, и это прибыльный бизнес ».

Vue Storefront против Magento PWA Studio: что лучше для вашего магазина? - Элогический

Источник: вид на витрину

Vue Storefront явно опережает пакет PWA. У них есть расширяющаяся экосистема, интеграции (хостинг, платежные шлюзы и т.д. ), И одна из самых крутых вещей – это независимость от платформы.

Будущее Magento PWA Studio

Команда разработчиков сообщества Magento, работающая над PWA Studio, имеет план будущих выпусков. Вот как это выглядит на следующий год и далее: 

Что будет дальше в Magento PWA Studio?

Vue Storefront против Magento PWA Studio: что лучше для вашего магазина? - Элогический

Лаборатория инноваций Magento: примеры приложений на базе PWA

Innovations Lab – это проект сообщества Magento, который применяет новейшие технологии и создает передовые решения, приложения и продукты. 

С веб-сайта Magento: «Наше намерение состоит в том, чтобы выявить и продвигать ранние, экспериментальные, передовые реализации новых технологий на платформах электронной коммерции Magento».

AR Product Navigator

Приложение, которое использует MSI, GraphQL и PWA, чтобы предложить розничным продавцам автономное решение, помогающее покупателям находить товары с помощью технологии дополненной реальности. Клиент просто выбирает, какой продукт он хочет, и с помощью экранных стрелок направляется к продукту. Это приложение, разработанное Webkul Software, также может быть большим подспорьем для складов и центров выполнения заказов, а также в гиперлокальных магазинах, где время доставки имеет решающее значение. 

Vue Storefront против Magento PWA Studio: что лучше для вашего магазина? - Элогический

Источник: Magento Innovations Lab

PWA Scan & Go

Еще одно классное приложение, разработанное WebKul Software. Без предвзятости, они просто оказались одной из немногих компаний в Innovations Lab, которая использует PWA. Приложение позволяет покупателям брать и сканировать товары, которые они хотят в магазине, и платить прямо со своего телефона. Никаких длинных очередей, никаких хлопот. Все, что им нужно сделать, это подтвердить свою покупку перед выходом из магазина.

Vue Storefront против Magento PWA Studio: что лучше для вашего магазина? - Элогический

Источник: Magento Innovations Lab

Выводы – Vue Storefront против Magento PWA Studio

PWA здесь, чтобы остаться. Мы в восторге от того, как далеко продвинулись PWA – такие гиганты, как Microsoft, Google, AliExpress, NASA, Wikipedia и множество других компаний уже используют их.

Для электронной коммерции будущее за PWA. Когда вы принимаете решение о Vue Storefront или Magento PWA Studio, помните следующее:

  • Vue Storefront лидирует на рынке PWA для электронной коммерции. Это амбициозный независимый проект, который вызывает ажиотаж – и, что наиболее важно, он готов к интеграции прямо сейчас.  
  • Один из недостатков – возможность отсутствия поддержки. Vue Storefront может существовать уже давно, а может и нет. Magento, поддерживаемый Adobe, больше подходит для долгосрочных инвестиций (и вы можете создавать такие же быстрые приложения).
  • Magento PWA Studio особенная, потому что это первая встроенная поддержка PWA для платформы электронной коммерции.
  • Пока Magento 2.x существует и поддерживается, Magento гарантирует полную интеграцию с PWA Studio.

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

Источник записи: https://elogic.co

Похожие записи

Гиды и советы

9 основных тенденций электронной торговли, которые будут реализованы в 2020 году

Гиды и советы

Миграция на Magento 2: 7 самых распространенных проблем, которые следует учитывать

Гиды и советы

Оптимизация коэффициента конверсии электронной торговли: 14 лучших советов по конверсии электронной торговли

Гиды и советы

Что продавать в Интернете: как найти лучшие идеи продуктов для вашего бизнеса в электронной коммерции