Magento

Привет! Меня зовут Павел и я Magento 2 бэкенд-разработчик. Если спросить у любого практикующего M2 разработчика, какие аспекты М2 вызывают наиболее сильную боль, — уверен, что с большим отрывом будут лидировать UI компоненты (Ui Components). Это тот самый случай, когда их все используют, но немногие знают, как в действительности они устроены и как они работают. Сложившаяся ситуация отчасти вызвана достаточно скудным описанием устройства компонентов в документации, особенно если принять во внимание сложность и некоторую неочевидность устройства компонентов. Сегодня мы начнем цикл статей про M2 Ui Components, чтобы полностью закрыть данную тему. Хотя на хабре уже есть превосходные статьи, которые рассматривают тему Ui Components с того или иного ракурса, системно ее на Хабре не раскрывал еще никто. В общем, иди за мной Нео, и я покажу тебе, насколько глубока кроличья нора. Погнали!

Привет! Меня зовут Павел и я занимаюсь бэкенд разработкой. Сегодня мы рассмотрим коллекции в Magento 2 (далее — M2). Несмотря на кажущуюся простоту реализации и интуитивно понятное назначение, эта сущность таит в себе несколько неочевидных подводных камней, которые влияют на производительность, а иногда и на саму возможность работы кода. 

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

Погнали!

Знаете, сейчас, в эпоху хороших фреймворков принято презирать всякие %bad CMS Name% и прочие битриксы. И не мудрено, ведь многие CMS как будто созданы не для программистов а для кодеров. Они решают множество нужных и полезных задач, имеют огромные коммьюнити и тысячи плагинов, но когда ты смотришь под капот - медленно седеющие волосы на голове начинают шевелиться в такт "архитектуре".

Привет! Меня зовут Павел и я Magento 2 бэкенд-разработчик. Когда-то давно, когда я только начинал знакомство с Magento 2 (для краткости буду называть ее M2), мне понадобилось автоматизировать обработку однотипных событий при разработке одного решения. Тогда я удивился, насколько мало информации на русском языке об интеграции очередей в M2. Время идет, а ситуация не меняется: информации об этом на просторах рунета все так же мало. Раскроем эту тему. Для начала кратко поговорим про очереди: что это такое и зачем они нужны, потом рассмотрим интеграцию M2 с популярным менеджером очередей Rabbit MQ (далее по тексту — RMQ), а также напишем простую реализацию работы с очередями в качестве примера. Погнали!

ObjectManager можно назвать одной из основных концепций, которая лежит в основе построения Magento2, и абсолютно новый если брать в сравнении с Magento1. Если мы вспомним Magento1, то там, для создания нужных нам для работы объектов, мы использовали класс Mage, который предоставлял статические методы для создания разных типов объектов — будь то модели, ресурс-модели, хелперы, или для создания объектов, которые мы хотели иметь в едином экземпляре(метод Mage::getSingleton). При создании Magento2 команда разработчиков отказалась от этой идеи и имплементировали принцип инъекции зависимостей и сервис-контрактов(ServiceContracts). Именно это позволило сделать Magento2 такой гибкой, легко кастомизируемой и тестируемой. Так же наличие функционала построенного вокруг ObjectManager’а делает возможным наличие всего функционала кастомизации поведения системы, который мы можем настраивать посредством конфигурационного файла di.xml.

Если смотреть глобально на функционал, который реализует ObjectManager, то можно сказать, что он является некой реализацией DI container, который в мире PHP представлен в виде PSR-11, хотя сам ObjectManager напрямую не реализует Psr\Container\ContainerInterface (и не имеет метода has, наличие которого предполагает Psr\Container\ContainerInterface). Он является централизованным средством для создания и получения объектов. Наличие такого централизованного класса для генерации необходимых объектов несет в себе следующие преимущества.

Привет! Меня зовут Павел и я занимаюсь бэкенд разработкой. Как уже писал AndreyHabr, многие из наших проектов основаны на стеке Adobe Magento 2 (для краткости далее я буду называть ее M2) в качестве бэкенда и Vue Storefront (VS) в качестве фронтенда.

Я не буду подробно останавливаться на архитектуре стека VS/M2 — мы уже писали об этом ранее. Предлагаю ознакомиться с данной статьей для более полного понимания изложенного ниже.

Сегодня я расскажу о взаимодействии с VS изнутри M2: посмотрим на реализацию индексеров, обсудим особенности их работы, после чего я кратко расскажу как создать свой индексер для кастомной сущности.

Погнали!

Добрый день, меня зовут Андрей Солдатов, мы в команде Россельхозбанка разрабатываем новые интересные проекты, связанные с сельским хозяйством. В качестве фронтального решения для некоторых из них мы решили использовать интересное open source решение Vue Storefront. В этой статье вы можете ознакомиться с ключевыми возможностями и особенностями этого решения. Статья является переводом статьи из официального блога Vue Storefront, оригинал доступен по ссылке.

Vue Storefront - это достаточно сложное решение с обширными возможностями. Изучение их всех может занять некоторое время. В этой статье я за несколько минут постараюсь объяснить вам его ключевые понятия, чтобы показать все необходимое для начала работы с Vue Storefront.

Большой размер JavaScript файлов в Magento2 — большая проблема, в этой статье мы попробуем Magento Advanced JavaScript Bundling. Рассмотрим инструменты, настройку и работоспособность.

Основная цель JavaScript-бандлинга состоит в том, чтобы уменьшить количество и размер запрашиваемых ресурсов для каждой страницы.

В этой статье мы рассмотрим, как настроить и включить critical css в Magento 2.

Что ты такое, critical css?

И HTML, и CSS замедляют вывод страницы. HTML-документ нужно обработать для создания модели DOM, без которой на странице не будет контента. CSS-документ необходимо сначала загрузить, а далее обработать (CSS Object Model).

Чтобы ускорить процесс, необходимо упрощать CSS и использовать media-запросы. Так же увеличению производительности способствует critical css.

Как мы уже говорили выше, все стили CSS, загруженные из внешних файлов, рассматриваются как блокирование рендеринга. Это означает, что веб-страница не будет отображаться, пока эти файлы не будут загружены. Используя critical css, мы предоставляем «критический CSS», встроенный в, и делаем загрузку всех остальных стилей асинхронной.

Асинхронная загрузка достигается путем добавления новой директивы preload в атрибут rel

Для поддержки кроссбраузерности rel=«preload» в Magento используется полифилл.

Важная особенность, в «критический css» входит только видимая часть страницы.

В этой статье мы рассмотрим какие настройки и инструменты по оптимизации есть в Magento 2.

Версия Magento на момент написания статьи — 2.3.4

Производительность веб-сайта — очень важный аспект как и для поисковой системы (более быстрые сайты поднимаются в выдаче выше, чем медленные), так и для посетителей (медленный и тормозящий ресурс врядли будет обладать большой конверсией). В области e-commerce это особо важно.

Давайте посмотрим, что же может предложить нам Magento 2 «из коробки»:

1. Настройки кеширования
2. Настройки JavaScript
3. Настройки CSS
4. Настройки изображений

Настройки кеширования

Stores — Configuration — System — Full Page Cache

На выбор предлагается 2 опции: Built-in cache и Varnish cache



Built-in cache — встроенный кеш, Varnish cache — это HTTP ускоритель предназначенный для обслуживания динамических веб-сайтов, и сайтов имеющих API.

Это доклады с Magento Meetup Kharkiv Online, где разработчики поделились опытом и рассказали, что такое Magento Cloud, чем хорош модуль Enhanced media gallery и как избежать ошибок в инфраструктуре, которые могут положить сайт в самый разгар сезона продаж.

Слайды хорошо видны, поэтому файлы презентаций сюда не добавляю. Если кто хочет поклацать презентации — пишите в комментарии.

Всем привет!

Наверняка вы, установив Magento 2.3.5 обнаружили в своих браузерных консолях что-то вроде

[Report Only] Refused to load the script '***' because it violates the following Content Security Policy directive: «script-src *». Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.



О том, что делать, расскажу под катом

В Харькове прошёл Magento-митап, и на нём прозвучали доклады Робина ван Раана, Александра Шкурко и Максима Грома. В них много полезного. Ловите.

Робин ван Раан рассказал о новейших практиках оптимизации RequireJS. С их помощью фронтенд сайта можно ускорить в 3 раза!

Александр Шкурко рассказал, в каких случаях лучше использовать команды вместо репозиториев в Magento 2. Всё это проиллюстрировано лучшими, на мой взгляд, картинками!

Максим Гром коснулся скользкой темы ныряния в Magento DI. Многим это тоже будет полезно.

Наконец-то получилось увидеть данные из Magento (категории и продукты) в приложении Vue Storefront (VSF). Это уже четвёртая статья (1, 2, 3), в которой я описываю процесс изучения возможностей интеграции VSF с электронным магазином на базе Magento 2, и первая, где данные из Magento проскочили в браузер покупателя.

Под катом ссылка на скрипты развёртывания и краткое описание шагов.

Ещё один пост в рамках рекламной кампании по продвижению своей реферальной ссылки. В первой и второй публикации я поднял фронт-сервер, api-сервер и два вспомогательных сервиса (Elasticsearch & Redis), которые используются api-сервером. На этом шаге я попытался залить какие-то данные из существующего Magento-проекта в моё тестовое VSF-приложение.

На третьем шаге появился некоторый прогресс. PWA-приложение в браузере перестало сообщать об ошибке и начало показывать более-менее пристойную домашнюю страничку. Пусть даже и не с теми данными, которые были в моём Magento-проекте. Любое изменение лучше, чем топтание на месте.

Под катом описание того, каким образом залить данные из своего Magento-магазина в приложение Vue StoreFront так, чтобы вместо них клиенту показывались демо-данные. Да, результат опять не очень, но для рекламной кампании это не самое главное.

Продолжаю продвигать свою реферальную ссылку на IaaS-провайдера Exostate и запиливаю вторую статью своей рекламной кампании. В первой статье я развернул и запустил приложение 'vue-storefront' как отдельный сервер, без привязки к каким-либо данным, маскируя таким нелепым образом свой коммерческий интерес в продажах сервисов Exoscale. Мои жалкие потуги были успешно вскрыты коллегой aol-nnov и я был выведен на чистую воду. Что ж, второй этап моей рекламной кампании по результату не отличается от первого — такая же страница с ошибкой:

Фронт теперь привязан к backend'у ('vue-storefront-api'), но в браузере клиента то же самое безрадостное сообщение "Something went wrong ...". Поэтому я, отбросив ложную скромность, вынес свою реферальную ссылку до ката, а всю маскировку поместил под кат — детали того, каким образом я совмещал "Vue Storefront" с "Vue Storefront API".

Одним из выступленией, заинтересовавших меня на конференции Meet Magento Baltics, было выступление Sander Mangel о возможностях применения Vue Storefront (VSF) совместно с Magento.

PWA является перспективным направлением развития в web-разработке. Разработчики Magento 2 предлагают свой набор инструментов для создания современного, мобильно-ориентированного web-приложения, соответствующего традициям Magento, а разработчики Vue Storefront пошли по пути создания универсального фронта, способного через адаптеры взаимодействовать с различными backend'ами (Magento, WooComerce, Odoo, ...). Несколько месяцев назад я попробовал PWA Studio от Magento и пришёл к выводу, что решение пока что сыровато. Демо-версия Vue Storefront произвела на меня очень хорошее впечатление и мне захотелось пощупать это решение более интимно.

Отдаю должное ребятам, подготовившим демку для развёртывания — достаточно соответствовать условиям (иметь предустановленными nodejs, yarn, docker, ...), выбрать все опции по-умолчанию в процессе установки, и можно получить на собственной машине PWA, аналогичное демо-версии. Но мне же не нужно иметь ещё одну демку, мне нужно подключить Vue Storefront к уже имеющимся у меня проектам. И вот тут начинается засада.

У Magento-разработчиков хорошее представление о мире PHP и, как правило, не очень хорошее о мире nodejs. Вещи, тривиальные для второго мира, вызывают ступор у обитателей мира первого. Под катом я описал свой второй подход к развёртыванию Vue Storefront в попытке подключить его к имеющемуся у меня проекту. Сразу скажу, что результатом второго подхода у меня является приложение не подключенное ни к чему, но хотя бы загружающееся в браузер. Очень похоже, что мне придётся сделать ещё не один подход, пока я получу желаемый результат.

PHP создан умирать. И все было бы хорошо, но в последнее время это сделать ему не дают. Год назад на хабре состоялся анонс инструмента RoadRunner, заставляющего PHP процесс выйти из бесконечного круга гибели и воскрешения.

Принцип работы RoadRunner заключается в удержании запущенного процесса и подкидывания в него поступающих запросов, что позволяет, по словам разработчиков, увеличить производительность приложения (иногда даже в 40 раз).

Поскольку долгом работы я связан с Magento, то показалось отличной идеей проверить инструмент не на мифическом фреймворке, а на реальном приложении, для чего отлично подошла Magento Open Source.

Изучая различные модули для Magento 2 можно заметить, что логирование используется значительно реже по сравнению с Magento 1. В большей степени это связано с тем, что запись логов стала сложнее. Здесь я бы хотел сконцентрироваться на технической стороне вопроса, а именно как логировать данные, как писать логи в свой собственный файл и что же такое Monolog.

Всем привет. Данная публикация не претендует на звание истины в первой инстанции, а лишь является моим личным мнением, если вы его разделяете отлично, если нет — прошу в комментарии для обсуждения.

Так вот, ближе к делу. В версии Magento 2.3 и выше появилась такая «плюшка» как декларативная схема. Что же это такое декларативная схема? Если мы обратимся к документации мадженто, то там черным по белому написано — «Декларативая схема направлена на упрощение процессов установки и обновления Magento».