Борис Стоянов

Компания Decathlon, хорошо известная своими магазинами и спортивными товарами, долгое время ассоциировалась с розничной торговлей. Цифровые и физические границы меняют то, как традиционные компании достигают своей аудитории, как они взаимодействуют с ними.

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

Внешнее приложение и Vue.js

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

Подумайте о приложении, которое определяет ваше местоположение и предоставляет в режиме реального времени информацию о местах вокруг вас, где вы можете попробовать себя в новом виде спорта во время отпуска? Захватывающе! Это Сообщество Decathlon.

Для этого нужно было выбрать технологию для фронтенд-разработки. Как небольшая команда, несущая это видение, мы должны были действовать быстро. Имея опыт работы с React, Angular и Vue.js, наша команда по интерфейсу призвала принять Vue.js : плавное обучение, отличная документация, многообещающий новый интерфейс командной строки (с поддержкой PWA и скоро SSR!). Мы также пришли к выводу, что внедрение новых членов команды во фреймворк Vue не займет много времени, что позволит нам действовать быстро.

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

PWA, Кордова, React Native

Часть стека, используемого для фронтенд-разработки, мобильная была большой частью. Возможность нанять разработчиков iOS и Android была быстро забыта: множественная кодовая база и сложное управление процессами, что было бы доказательством концепции. Итак, мы рассмотрели следующие варианты:

  • React native: более крутая кривая обучения.
  • PWA: может быть менее интересным, поскольку отсутствует в магазинах iOS и Android, но все же очень эффективен для рыночного тестирования веб-приложений, но очень быстрая реализация. , легкий и относительный доступ к встроенным функциям. Исчерпывающий список здесь.
  • Кордова: следующий шаг после PWA, но нам нравится думать, что у PWA светлое будущее.

Сообщество Decathlon, доказательство концепции

В качестве хорошего доказательства концепции мы использовали Vue.js для разработки Decathlon Community, одностраничного приложения, использующего наши API (мы рассмотрим конкретное приложение в следующем разделе).

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

Особенности

  • Мощные однофайловые компоненты. Vue.js позволяет писать в одном файле HTML, Javascript / TypeScript / CSS. Поскольку Vue.js полностью не зависит от шаблона, вы можете использовать JSX или ES6. HTML и CSS легко повторно использовать в разных проектах.
  • Сообщество и ресурсы. По-прежнему не самое большое сообщество по сравнению с React, но отличная документация, которую нужно пройти, прежде чем погрузиться в нее. Чтобы начать ее писать, не требуется времени.
  • Наем. React издавна является языком, используемым в большинстве современных интерфейсных проектов / компаний, поэтому внедрение разработчиков Vue.js может напугать ИТ-команды из-за отсутствия разработчиков. У нас есть опыт найма опытных разработчиков React и их адаптации очень быстро. Бонус: после нескольких недель работы над Vue.js кажется, что он стал более интуитивно понятным.
  • CLI. Vue новый интерфейс командной строки укрепил наше доверие к фреймворку. Мощные готовые функции при запуске нового проекта, поддержка PWA и скоро рендеринг на стороне сервера ...

Мелочи, которые делают вашу жизнь проще

Простая система двустороннего связывания, предлагаемая директивой v-model.

А затем в вашем методе data. Обратите внимание на использование TypeScript здесь. Итак, как только ваш ввод изменится, данные будут обновлены.

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

А затем в своем скрипте объявите свой метод.

Он отправит событие желаемому компоненту. В нашем случае это диалог. Обратите внимание на v-model , содержащий значение open.

Довольно простое управление магазином благодаря Getters, Actions и Mutations. Все еще предполагая, что вы используете TypeScript, это будет выглядеть так:

Заключение

Короче говоря, нам нравится, как Vue.js развивается и насколько прост в использовании. Адаптация людей оказывается легкой задачей, писать ее - весело. Быстрая итерация и возможность создать базу кода, которую можно поддерживать в долгосрочной перспективе, что позволяет внутренним разработчикам быстро перейти к проекту, что делает Vue.js, несомненно, отличным фреймворком.