Всем привет! На связи KISLOROD — мы производственное агентство с фокусом на разработку и развитие e-commerce проектов.

В своей работе мы нацелены на то, чтобы экономить время и ресурсы разработки, и как следствие бюджеты клиентов. Поэтому мы создали собственную библиотеку готовых компонентов на Bitrix для модульной разработки типовых интернет-магазинов.

Проблемы разработки типовых интернет-магазинов

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

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

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

Типовой интернет-магазин — это торговая онлайн-платформа, которая имеет возможности и функционал, достаточный для сайтов в своей нише. 

То есть это полнофункциональный интернет-магазин, который ни в чем не уступает конкурентам, и учитывает лучшие решения UX в отрасли. При этом он может иметь индивидуализированный дизайн, но логика работы, фронтенд и бэкенд будут стандартными.

Тут стоит учесть, что для большинства ниш и бизнесов — типовой интернет-магазин закрывает до 80% задач, которые необходимы для запуска электронной коммерции. А кастомная разработка с нуля важна только для нетиповых проектов с нестандартным интерфейсом или бизнес-логикой.

Важно понимать, что не каждый бизнес может позволить индивидуальную разработку или это в принципе нецелесообразно. А экономить на качестве за счёт более дешёвых разработчиков это очень рискованно. Как правило, поддерживать и развивать такой сайт будет сильно дороже, чем тот, который изначально собирался по определенным стандартам с оценкой качества кода. 

Для таких случаев мы разработали готовые компоненты типового функционала интернет-магазина. В них уже проработан UX в соответствии с лучшими практиками и нашим опытом, вёрстка и бэкенд. С их помощью можно ускорить и упростить процесс разработки.

Принцип модульной разработки

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

И именно на типовых проектах хорошо срабатывают «лучшие практики» — решения, проверенные временем, которые повышают удобство проекта. Поэтому на их основе мы создали готовые компоненты для модульной разработки.

Модульная разработка — это создание интернет-магазинов с помощью библиотеки готовых компонентов, каждый из которых выполняет определенную функцию.

Библиотека готовых компонентов
Библиотека готовых компонентов

Сборка интернет-магазина производится из отдельных крупных блоков и совмещает в себе плюсы запуска на готовых решениях и кастомной разработки.

  • Не нужно начинать всю работу с нуля;

  • Сокращается Time to Market;

  • Учитывается специфика ниши и требования бизнеса;

  • Обходится гораздо дешевле, чем индивидуальная разработка;

  • Уровень качества и возможности для развития значительно выше, чем у готовых решений.

Разработка на компонентах — это компромиссное решение для малого и среднего бизнеса. Ограничение лишь одно — метод подходит только для типовых интернет-магазинов.

Как работают компоненты

Компонент — это самостоятельный законченный функционал интернет-магазина. Например: «Каталог», «Корзина», «Чекаут», «Карточка товара» и другие.

Пример готового компонента «Чекаут»
Пример готового компонента «Чекаут»

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

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

Компоненты — это узкоспециализированное решение для интернет-магазинов. 

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

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

Варианты использования

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

Варианты разработки на компонентах:

  1. Разворачиваем с нуля новый проект

Это самый простой и быстрый вариант. Все, что надо сделать — это установить готовые компоненты, при желании персонализировать главную страницу и стилизовать интерфейс готовых компонентов под общую дизайн-концепцию.

  1. Интегрируем один из компонентов

Компоненты можно встраивать локально. Например, есть готовый сайт со своим дизайном и логикой, клиента все устраивает, но он хочет заменить чекаут под требования UX.

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

А если у вас уже есть работающий проект на «Битриксе», то его можно доработать с помощью встраивания готовых компонентов. При этом визуал компонентов будет стилизован под ваш текущий дизайн.

Как запуститься быстро и без ущерба качеству

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

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

MVP-подход на примере фастфуда — постепенное усложнение и детализация
MVP-подход на примере фастфуда — постепенное усложнение и детализация

До начала работы проекта нельзя с абсолютной уверенностью знать, что именно нужно пользователям. Поэтому лучший UX всегда тот, что был определен в процессе работы с помощью аналитики, онлайн-опросов, тестов и исследований. 

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

Принципы бережливого производства:

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

  • Создавать вариации на тест. То есть так мы даем пользователям самим решить, что для них удобно, а не навязываем свое видение.

  • Менять и адаптировать решения. Процесс оптимизации никогда не останавливается, поэтому сайт всегда можно сделать удобнее и функциональнее.

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

Благодаря такому подходу мы подняли конверсию на 97% для одного из ведущих брендов одежды — Zolla.

Главная страница сайта Zolla
Главная страница сайта Zolla

В чем плюсы для заказчика

  1. Минимизация рисков. Компоненты неоднократно протестированы и проверены на действующих проектах, что позволяет значительно снизить риски разработки: срыв сроков, невыполнение обязательств и проблемы с функционалом.

  2. Снижение бюджета на разработку. Узкое место в разработке сайтов — это специалисты и их рабочее время. Чем объемнее проект, тем большее количество трудозатрат разного рода специалистов требуется, что увеличивает бюджет разработки.

  3. Простое масштабирование и развитие проекта. Бизнес развивается, а значит, растут и требования к сайту, поэтому архитектура компонентов адаптирована для качественного и количественного роста.

  4. Сокращение Time to Market. В электронной коммерции сроки запуска проекта — критически важный показатель. За счет модульной разработки мы можем запустить MVP в разы быстрее, при этом избежав затратной кастомной разработки и минусов готовых решений.

После запуска MVP проект можно спокойно дорабатывать под индивидуальные требования бизнеса.

Время — деньги: считаем выгоду

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

Дано:

  • бюджет и сроки ограничены;

  • большая часть этапов пути пользователя типичны;

  • важно заложить перспективы для роста и развития проекта;

  • качество фронтенда и бэкенда, а также производительность должны быть не ниже определенного уровня;

  • в перспективе требуется достаточно высокая степень индивидуализации под процессы бизнеса.

Сравним варианты:

  1. Готовые решения. От 350 тысяч и от 1,5 месяцев на развертывание. Не подходят из-за «тяжелого» кода, ограничений по возможностям развития, при том, что доработка все равно понадобится.

  2. Кастомная разработка. Примерно от 3,5 млн рублей и от 6 месяцев работы, что относительно долго и дорого. Зачастую на старте типового проекта у бизнеса нет вдумчивых требований к персонализации как в дизайне, так и в функционале, либо они носят субъективный характер. 

  3. Разработка с использованием готового функционала. От 1,5 млн рублей и от 3 месяцев. Подойдет, если нужен быстрый запуск, важен персональный дизайн, срок и бюджет разработки ограничены, а проект с типовым функционалом.

Итого: если вам нужен типовой интернет-магазин, то экономия составит 2,5 млн рублей и сократит срок разработки интернет-магазина в 2 раза без потери качества.

Комментарии (11)


  1. 19Zb84
    15.07.2024 17:29
    +5

    А где хоть одна строчка кода ? О чем эта статья ?


  1. max_zhukov Автор
    15.07.2024 17:29

    Вот тут много строчек кода https://o2k.ru/blog#!/tfeeds/906498033771/c/Веб-разработка

    А эта статья про готовые компоненты, за счёт которых мы увеличиваем скорость разработки.


    1. SerafimArts
      15.07.2024 17:29
      +2

      У меня глаза вытекли)

      Hidden text

      Лучше скройте и не показывайте никому это. Код прямиком из начала 2000х, который многие писали будучи школьниками/студентами.

      Я прекрасно понимаю, что есть область разработки, где низкоквалифицированные кадры вполне могут решать реальные бизнес-задачи. Это очень дёшево и высокомаргинально. Но показывать результат подобной работы на общественность, особенно специалистам - это портить себе репутацию только.


  1. Barlogishe
    15.07.2024 17:29

    А чем описанный вами подход отличается от штатного Битрикс с его компонентами?

    И не очень понятна таблица ценообразования. 350к на готовом решении?


    1. max_zhukov Автор
      15.07.2024 17:29

      1. Битрикс целился на то, чтобы одним решением покрыть все возможные случаи, даже очень редкие и специфичные (например, продажа товаров с разной кратностью), поэтому в части кода оно большое и запутанное, а разобраться в нём и внести правки (особенно на фронте) зачастую сложно. Мы наоборот облегчили логику, так как целились в типовой сценарий, который по нашему опыту обычно нужен клиентам. И закладывались на то, чтобы кастомные истории при необходимости было легко реализовать через код - "довесить" то, что есть в Битриксе, либо добавить новую логику. К тому же, в компонентах, например, в чекауте используется api-first подход.

      2. Под "готовым решением" имеется ввиду готовые интернет-магазины с маркетплейса Битрикса.


      1. Barlogishe
        15.07.2024 17:29

        1. например, в чекауте используется api-first подход. - На скрине, что вы представили, тот же самый комплексный компонент битрикса с небольшой кастомизацией фронта. Даже блоки штатные.

        2. Битрикс целился на то, чтобы одним решением покрыть все возможные случаи, даже очень редкие и специфичные (например, продажа товаров с разной кратностью), поэтому в части кода оно большое и запутанное, а разобраться в нём и внести правки (особенно на фронте) зачастую сложно. - Так в том его и "прелесть" что он может в рамках одного компонента закрыть любые задачи. Все, что не используется, не выводится.

        3. Под "готовым решением" имеется ввиду готовые интернет-магазины с маркетплейса Битрикса. - Сцепка Аспро + Лицензия от силы 86 000. Откуда 350?


        1. max_zhukov Автор
          15.07.2024 17:29

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

          2. Например, битриксовая система с отзывами через форумы жутко неудобная, а любые задачи всё-таки стандартный Битрикс закрыть не может (иногда нужные задачи в нём решены, но так плохо/неудобно/негибко, что приходится их перерешивать самостоятельно), казалось бы, зачем что-то кодить если все возможные кейсы уже учтены и решены. К тому же у не опытных разработчиков, которые не знают всех нюансов, не всегда это получается сделать без костылей.

          3. Не забываем про сопутствующие работы на написание ТЗ, настройку штатного интерфейса и функционала, доработку функциональных элементов, отрисовку баннеров и иконок, интеграции с 1C, службами доставки и платёжными системами.


          1. Barlogishe
            15.07.2024 17:29

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

            Это единичный пример комплексного компонента от Битрикс, который каждый пересобирает под свои нужды. Но я так и не понял в чем ваш подход отличается от Битриксового? Вы сами пишите в статье,

            Модульная разработка — это создание интернет-магазинов с помощью библиотеки готовых компонентов, каждый из которых выполняет определенную функцию.

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

            Не забываем про сопутствующие работы на написание ТЗ, настройку штатного интерфейса и функционала, доработку функциональных элементов, отрисовку баннеров и иконок, интеграции с 1C, службами доставки и платёжными системами.

            Вы сейчас точно описываете запуск готового решения? Если вы пишите ТЗ, то это уже не готовое решение. Покупая готовое решение вы соглашаетесь на то, что ваш сайт будет "раскрашен" и отконфигурирован через базовые настройки, получит штатную интеграцию с 1С кой, 24-кой и платежной системой.

            Кроме того, Аспро, который вы используете для работы (пара статей на вашем ресурсе посвящена именно переработке фронта на базе Аспро) тоже не самое гибкое решение.

            Мне больше всего не понравилось в вашей статье то, что вы выдаете наработки на базе аспро за что-то уникальное.


    1. copenhagen72
      15.07.2024 17:29

      Не, не 350к. Где-то 3 года назад они писали на VC про 500к на Битриксе за чисто поставить, шаблон Аспро натянуть и настроить обмены с 1С)

      Если нужно шаг в сторону от дефолтного Битрикса и свой дизайн - это уже 1500к.

      Я напоминаю, в битриксе даже нет понятия списка брендов (категории товаров есть, брендов нет, вы не ослышались), то есть без допиливания он не работает в принципе. Ну как и сама 1С. Такая бизнес модель.


  1. N4N
    15.07.2024 17:29

    В 24м году кто-то ещё запускает собственные интернет магазины?


  1. FanatPHP
    15.07.2024 17:29

    Не очень понятна связь между темой статьи и кейсом Золло. Такое ощущение, что он притянут чисто для рекламы. При этом интересен маркетинговый выбор между "в 2 раза" и "на 97 процентов". Кейс явно писал весьма ушлый специалист.