В соавторстве с: Вандерлей Сильва, Габриэль Оливерио.

Соавторы:Данило Безерра, Диего Соуза

Введение

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

Получи своего покемона

Прежде всего ознакомьтесь с нашей живой демонстрацией Pokemon Battle и взгляните на исходный код.

В этой статье мы собираемся изучить его конструкцию, ориентированную на VueJS и PHP Lumen.

Внешний интерфейс

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

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

Когда вы передаете простой объект JavaScript экземпляру Vue в качестве параметра данных, Vue просматривает все его свойства и преобразует их в геттеры/сеттеры с помощью Object.defineProperty. Геттеры и сеттеры невидимы, но под капотом они позволяют Vue выполнять отслеживание зависимостей и уведомление об изменениях при доступе к свойствам или их изменении. Таким образом, мы легко достигаем реактивности и отделения данных от DOM.

Его легко и быстро реализовать, потому что он основан на компонентах. Нет необходимости глубоко разбираться в шаблонах проектирования и связанных с ними материалах (конечно, это еще лучше, если вы их понимаете, но это не обязательное требование для разработки отличных приложений с помощью Vue). Каждый компонент состоит из HTML-файла, CSS-файла и JS-файла (или их препроцессоров/транспилеров) и всего остального.

Бэкэнд

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

В основном предусмотрено 3 маршрута:

  • Получить всех покемонов
  • Выберите покемона игрока
  • Ударь своего противника

«Тяжелая» часть — это когда мы делаем расчеты, чтобы определить, какой урон нанесет/получит ваш покемон. Он рассматривает преимущества и недостатки традиционных типов покемонов. Кроме того, мы добавили промах/критические ситуации, когда случайное значение может привести к тому, что ваш покемон не сможет нанести урон своему противнику или нанесет почти вдвое больше своего обычного урона.

Покемоны и их атаки хранились в отдельном файле JSON и были реализованы репозиториями для их извлечения по имени и случайным образом. Класс Pokemon инкапсулирует данные, полученные PokemonRepository, а также обеспечивает поведение при попадании в другого покемона. Модификатор типа и расчет урона от нанесенных атак были реализованы конкретными классами. TypeModifierCalculator использует таблицу типов — множители, которые учитывают тип нанесенной атаки и тип покемона противника, чтобы модифицировать нанесенный урон. DamageCalculator реализует официальную формулу, которая использует TypeModifier, возвращаемый TypeModifierCalculator. Тесты были реализованы для всех значимых классов, чтобы обеспечить их ожидаемое поведение, достигнув 84% покрытия тестами.

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

Гибкая методология

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

Оставайтесь на связи

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

Подпишитесь на нашу RSS-ленту и будьте в курсе: Rafael Monteiro, Vanderlei Silva

Смотрите и ставьте звезды на Github!!