Прогрессивные веб-приложения: интервью с основателем Front-Commerce
Прогрессивные веб-приложения: интервью с основателем Front-Commerce
Прогрессивные веб-приложения (PWA) перестали быть просто модным словом. Эта технология вытеснила нативные приложения и доказала свою экономическую эффективность для ведущих предприятий электронной коммерции, таких как Alibaba, Aliexpress, Flipkart, Lancome и других.
PWA работают как традиционные веб-сайты и мобильные приложения и предоставляют такие функции, как автономный режим, push-уведомления, простота разработки и многоплатформенные возможности. Они проиндексированы с помощью SEO и оснащены GPS, занимают мало места, не требуют обновлений и могут быть установлены на главном экране.
PWA существуют уже некоторое время, но что происходит с этой технологией? Каковы будущие тенденции PWA? Чтобы выяснить это, мы поговорили с техническим директором и соучредителем Front-Commerce Пьером Мартином. Front-Commerce – это интерфейсное решение PWA, созданное для магазинов Magento для повышения производительности интернет-магазинов, особенно на мобильных устройствах.
В: Почему PWA так хорош?
Пьер Мартин, технический директор и соучредитель Front-Commerce:
PWA удовлетворяет потребность в повышении удобства использования на мобильных устройствах, обеспечивая безопасность, скорость и простоту использования через веб-приложение. Команды, инвестирующие в собственные мобильные приложения, оценят наличие пользовательского интерфейса, подобного нативному приложению, с единой веб-базой кода для поддержки.
Используя новые API-интерфейсы веб-браузеров и хорошие принципы дизайна, можно обеспечить плавный просмотр, сохраняя при этом доступный веб-сайт для устройств низкого уровня или старых браузеров. Эта стратегия прогрессивного улучшения – вот что делает PWA таким замечательным!
Например, продавцы с адаптивным веб-сайтом могут вернуть своих мобильных пользователей счастливыми благодаря некоторым техническим усилиям, которые сейчас могут предоставить многие решения и разработчики.
В: Почему вы решили создать платформу PWA специально для электронной коммерции?
Пьер Мартин, технический директор и соучредитель Front-Commerce:
Первоначально Front-Commerce была создана в Occitech, сервисной компании экспертов Magento, которые также создавали индивидуальные веб-приложения для различных отраслей. Еще в 2015 году, в бета-версиях, мы заметили, что Magento 2 можно использовать как автономную систему и что его встроенный шаблонизатор не будет сходиться с широко распространенными.
Наш опыт работы с современными интерфейсными инструментами (используемыми в пользовательских веб-приложениях) заставил нас задуматься о том, чтобы упростить разработку витрины Magento2, управляя интерфейсом как отдельным приложением с помощью JS-интерфейса. Суть заключалась не в создании решения PWA, а в том, чтобы иметь изолированную архитектуру, обеспечивающую соответствие PWA. Вот почему с первого дня он создавался с учетом интересов электронной коммерции.
В: Что делает Front-Commerce уникальным решением?
Пьер Мартин, технический директор и соучредитель Front-Commerce:
Front-Commerce – пионер интерфейса электронной коммерции PWA, запущенный в 2015 году. Он также был первым, у которого с начала 2018 года работают магазины. Это дает нам функциональный охват, технический прогресс и надежность, которые вселяют уверенность.
Front-Commerce – коммерческое программное обеспечение. Наша команда знала, что поддержание сообщества разработчиков ПО с открытым исходным кодом потребует огромных усилий. Мы выбрали прагматический подход, вложив всю свою энергию в расширение функционального охвата продукта и его улучшение на основе опыта магазинов в процессе производства. Эта позиция теперь является активом, который позволяет нам гарантировать наш код и предоставлять обучение, знания и надстройки по запросу по всему миру. Эффективные eMerchants востребованы для этих профессиональных услуг и SLA.
Однако наш код полностью открыт для наших клиентов, и программисты могут взаимодействовать с нами на нашей платформе Gitlab, как с любыми проектами с открытым исходным кодом.
Front-Commerce предоставляется с широким набором готовых к использованию инструментов, позволяющих запускать проект с использованием лучших практик нашей отрасли: модульные тесты, интеграционные тесты, система проектирования, промежуточное программное обеспечение мультимедиа для обслуживания лучших размеров и сжатия. возможно для изображений, адаптированных к устройству каждого посетителя (по возможности, с использованием WebP)…
Мы также хотим, чтобы разработчики сосредоточились на предоставлении ценности пользователям. Больше не нужно отказываться от выбора технологий и совмещения всех частей друг с другом, мы позаботимся об этом с помощью регулярных обновлений стека, готового рендеринга на стороне сервера, шлюза для повторного использования существующих платежных модулей в Magento, эффективного и правильного кеш-памяти система для всех вызовов API, полная совместимость SEO с последними передовыми практиками и многое другое.
Это самое передовое решение на рынке, которое позволяет программистам сосредоточиться на своем проекте и создавать невероятно быстрые веб-сайты, которые увеличивают продажи и делают пользователей счастливыми.
В: Чем Front-Commerce отличается от других платформ PWA?
Пьер Мартин, технический директор и соучредитель Front-Commerce:
Front-Commerce была первой, кто использовал промежуточное ПО для Node.js, которое предоставляло GraphQL API. Это упрощает подключение к различным системам, потому что при разработке внешнего интерфейса вам больше не нужно беспокоиться о том, откуда берутся данные. Вам нужно только указать, какие данные вам нужны.
Затем GraphQL API анализирует ваш запрос и отправляет его различным службам. Мы твердо верим, что в ближайшем будущем безголовая коммерция будет процветать, и Front-Commerce принимает ее, позволяя нам начать путь с существующих безголовых монолитов.
Обычный вариант использования, который мы регулярно наблюдаем, – это прогрессивная миграция (например, переход с Magento 1 на Magento 2 является однострочным для приложений Front-Commerce!), Но также позволяет вам использовать лучшие в своем классе сервисы для вашего варианта использования. Например, вы можете представить, что используете контент CMS из WordPress, Prismic… но все же используете предпочитаемое вами решение электронной коммерции для корзины, оформления заказа и управления клиентами.
Это также облегчает подключение существующих систем к этому новому интерфейсу, поскольку вы можете повторно использовать (или создавать) конечные точки, представленные в вашей системе, вместо того, чтобы индексировать контент где-либо еще. Производительность обеспечивается стратегиями кэширования, которые позволяют детально кэшировать данные в высокопроизводительной базе данных (Redis,…).
Что касается темы, мы используем инструменты, которые широко используются в экосистеме JS / React (Webpack, Apollo Client, Storybook,…), но также и методы (система маршрутизации, вдохновленная Next.js, Nuxt, Gatsby…). Это позволяет интеграторам чувствовать себя как дома, когда они начинают проект с Front-Commerce, и они обычно любят позволять нам решать проблемы конфигурации и совместимости для них, чтобы у них всегда был обновленный стек, не тратя часы на просмотр проблем Github!
Front-Commerce также имеет мощный способ переопределения компонентов в соответствии с вашими потребностями и настройки практически всего. Копирование файла, который вы хотите переопределить в своем собственном проекте, – это все, что вам нужно, чтобы Front-Commerce автоматически обнаружила его. Это позволяет вам иметь полнофункциональную базовую тему, которую можно легко настраивать. Эта функция находится в ядре с 2017 года и доказана многими реализациями, пока мы говорим.
Получайте наши советы прямо на свой почтовый ящик
В: Говоря о создании PWA, есть ли разница в производительности между React, Vue и Angular?
Пьер Мартин, технический директор и соучредитель Front-Commerce:
Основное отличие, если мы сравним фреймворки как автономный модуль, – это размер их пакета. Простое приложение на Vue меньше, чем React или Angular (аутсайдером в этой области является многообещающая библиотека Svelte!). Другие различия между этими библиотеками не имеют особого значения для магазина электронной коммерции, если уважать передовой опыт каждой библиотеки.
Однако приложение следует рассматривать как единое целое, и производительность зависит не только от показателей Lighthouse. Например, SSR (рендеринг на стороне сервера) ускоряет первое отображение полезной информации во время загрузки javascript. Во Front-Commerce у нас также есть слой кеша, который улучшает общую производительность и снижает нагрузку на серверную часть электронной коммерции. Существуют и другие функции, такие как предварительная загрузка страниц, асинхронная загрузка аналитики, пакетная обработка GraphQL и многие другие низкоуровневые аспекты, которые улучшают общий опыт. В конце концов, цель состоит в том, чтобы пользователи воспринимали производительность, и то, как устроена PWA, является решающим фактором для достижения этой цели.
Важно сравнить весь пакет, а не базовую технологию.
В: Какое время выхода на рынок (какие трудности возникают при интеграции с платформой электронной коммерции)?
Пьер Мартин, технический директор и соучредитель Front-Commerce:
Это сильно зависит от объема настройки, необходимой для проекта. Если магазин использует только встроенные функции поддерживаемых платформ электронной коммерции, это будет лишь вопрос настройки нашей темы по умолчанию в соответствии с брендом и создания плавного цифрового путешествия.
Однако, если вам нужны некоторые настраиваемые функции, вам нужно будет улучшить граф данных (GraphQL) для взаимодействия с соответствующими удаленными API. В платформах, таких как Magento, создавая API (REST или GraphQL) довольно проста, но это может быть что – то упускается из виду при покупке модулей с рынка. Предоставление доступа к API для недоступных функций модуля будет означать копание в коде и может стать проблемой, если модуль не спроектирован должным образом.
Однако для проектов, использующих данные из внешних автономных сервисов, таких как CMS, WMS, CRM, обзоры клиентов и т.д., Гораздо проще получить к ним доступ из уровня GraphQL, чем синхронизировать данные с серверной частью обычным способом, чтобы позже предоставить их через API.
Разработчики, которые начинают эффективно работать с такими архитектурами, работают более продуктивно благодаря строгой типизации моделей GraphQL, которые они создают. Он также позволяет разработчикам интерфейса получать доступ к данным из нескольких источников унифицированным способом, что является ускорителем для большинства проектов.
В: Сколько времени длится имплантация?
Пьер Мартин, технический директор и соучредитель Front-Commerce:
По нашим оценкам, для того же объема реализация внешнего интерфейса может занять на 15% меньше времени, чем в стандартном магазине электронной коммерции, при использовании реакции без ограничений шаблонов. Однако главное отличие заключается в том, что магазины, идущие по этому пути, обычно также улучшают свой UX и предоставляют более совершенные интерфейсы, что затрудняет сравнение.
Что касается серверной части, требуется немного больше усилий для предоставления API настраиваемых модулей, но также быстрее происходит агрегирование внешних данных.
В конце концов, это зависит от: сложности улучшенного UX, количества настраиваемых модулей, влияющих на интерфейс, и количества внешних источников данных.
В: Как вы относитесь к объединению PWA и AMP?
Пьер Мартин, технический директор и соучредитель Front-Commerce:
Основная причина существования AMP – повышение производительности веб-сайтов путем предоставления механизма кэширования и ограничения набора доступных функций на вашем веб-сайте. Но за это приходится платить. Вы больше не полностью свободны при разработке новых функций, и вам нужно убедиться, что ваш сайт работает как в стандартном режиме, так и в режиме AMP. Хотя это может улучшить ваше SEO, потому что Google хочет продвигать свои технологии, нужно тщательно взвесить все за и против и подумать, что является наиболее важным для их магазина.
Более того, если ваш сайт является PWA, он должен быть быстрым. Это не данность, но это то, к чему стремятся PWA. Если ваш сайт уже достаточно быстр, вам может не понадобиться AMP для его ускорения. Но имейте в виду, что это касается не только PWA. Он по-прежнему означает стандартные веб-сайты электронной коммерции: если он уже работает быстро, вам может не понадобиться повышение производительности от AMP.
В: Каково будущее прогрессивных веб-приложений и веб-разработки в целом?
Пьер Мартин, технический директор и соучредитель Front-Commerce:
Устройства (браузеры, мобильные телефоны, голосовые помощники) будут продолжать изменять способ взаимодействия пользователей с веб-службами. У веб-разработчиков будет больше инструментов для создания интерфейсов, которые позволят людям пользоваться их услугами. Эти технологии будут продолжать развиваться быстрыми темпами, и будет все труднее и труднее оставаться в курсе последних функций и практик.
Платформы с низким кодом или без кода могут позволить быстро создавать прототипы и даже заменять стандартные приложения, которые использовались для использования сред RAD. Однако мы думаем, что всегда будет место для хорошо продуманных пользовательских интерфейсов и эффективных веб-приложений для проектов, ориентированных на пользователя. По этой причине мы думаем, что решения должны будут предоставлять последовательные, низкоуровневые, регулярно обновляемые инструменты с четкими путями миграции, чтобы помочь разработчикам поддерживать свои веб-приложения в актуальном состоянии и использовать новейшие функции, которые стали возможны благодаря веб-платформе.
Поскольку все больше и больше клиентов будут потреблять данные и услуги, по умолчанию будет использоваться безголовый. Это позволяет создавать устойчивые и гибкие решения для более быстрой доставки функций и услуг конечным пользователям благодаря существующим платформам. Составляя существующие приложения SaaS, настраиваемые микросервисы и унаследованные монолитные приложения, он позволяет существующим участникам постепенно двигаться к этой конечной цели. Таким образом, веб-разработчики должны быть эффективными в распределенных средах и понимать общую картину таких архитектур. Несколько лет назад GraphQL представил новый способ реализации сервис-ориентированной архитектуры, и в будущем могут появиться новые технологии, подобные этой.
Наконец, мы также думаем, что децентрализация также может помочь сформировать будущее веб-разработки. Протоколы и технологии, такие как ActivityPub, IPFS, dat: //, SSB или Solid, уже достаточно развиты для реализации целого ряда новых приложений в этой новой парадигме. В сочетании с автономными возможностями PWA мы видим множество привлекательных приложений.
В: Какие функции будут иметь PWA электронной коммерции в будущем?
Пьер Мартин, технический директор и соучредитель Front-Commerce:
PWA для электронной торговли позволят удовлетворить потребности как новых посетителей, так и постоянных клиентов. Обеспечивая быстрый просмотр независимо от пользовательского устройства и источников данных, он позволяет создавать широкий спектр пользовательских интерфейсов.
«Мы твердо уверены, что классическая« домашняя страница со слайдером / категорией / продуктом / корзиной / этапами оформления заказа »уйдет в прошлое, и что будущие PWA электронной коммерции предоставят другие пути покупателя»
Новые API-интерфейсы браузеров, широко доступные на устройствах, сделают покупки еще более удобными. API запроса на оплату упрощает оформление заказа, устраняя несколько барьеров для повседневных заказов. Уведомления, если их использовать эффективно, также улучшат общий опыт (отслеживание отгрузки, оповещения о наличии запасов, пополнение запасов одним щелчком мыши…). Мы надеемся, что разработчики PWA начнут экономно использовать уведомления, поэтому этот стандарт не исчезнет из-за того, что браузер по умолчанию блокирует их, чтобы предотвратить раздражение пользователей из-за маркетинговых злоупотреблений и спама.
В сочетании с автономными системами PWA также позволят продавцам разрабатывать свою многоканальную стратегию с такими функциями, как кликни и собирай, интернет-магазин, самообслуживание и многое другое!
В некоторых случаях офлайн-возможности PWA могут позволить реализовать офлайн-каталоги и возможности совершения покупок. Мы считаем, что офлайн решит проблемы в очень конкретных случаях использования B2B. Такие функции, как фоновая синхронизация и всегда более мощные устройства, также позволят PWA электронной коммерции иметь очень адаптированные и надежные функции для таких ситуаций.
Хотя это еще не первое, что думают люди, мы думаем, что PWA также позволят продавцам создавать функции для настольных компьютеров. Будь то POS для их физического магазина, специальное приложение для корпоративных покупок, приложение, требующее больших вычислительных мощностей (с использованием WebGL и WebAssembly), PWA будут использоваться не только для мобильных устройств. Это то, что мы рады изучить с потенциальными клиентами и с нетерпением ждем появления.
PWA – это будущее веб-дизайна
Отраслевые эксперты на рынке электронной коммерции согласны с тем, что PWA станут будущим мобильной коммерции, позволяя разработчикам создавать превосходные пользовательские интерфейсы, доступные в Интернете, и функциональные возможности собственных приложений.
Все больше и больше предприятий электронной коммерции используют PWA для своих веб-сайтов, чтобы продвигаться вперед, оставаться впереди и побеждать конкурентов. Безусловно, PWA прочно представлены на рынке электронной коммерции и, как ожидается, станут светлым будущим веб-приложений!
Если вы хотите разработать PWA для своего магазина электронной торговли, мы можем помочь вам создать его. Сообщите нам, если у вас возникнут какие-либо вопросы о PWA.
Источник записи: https://elogic.co