Рубрики
Без рубрики

Переписывание приложения Drafts Ember в реакции

Это практика, которые я использовал для переписывания сложного приложения EMBER в реакции. Теги от реагирования, Ember, JavaScript.

Используя лучшие практики и инструменты React, я помогал переписать веб-приложение проекта в течение 9 месяцев. Вот обзор того, как это было достигнуто.

Клиент

Проект это ежедневная спортивная компания Fantasy, которая гордится собой На уникальные и веселые спортивные игры DFS и форматы. У них есть несколько игр для ставок для спорта от футбола до гольфа. В 2017 году они были приобретены Paddy Power Betfair, и работал как проект (Fanduel) с 2018 года. Проект в основном фокусируется на их мобильных приложениях iOS и Android, но у них также есть очень обширное веб-приложение, которое дополняет мобильные приложения, изначально встроенные в Ember.

Эта проблема

В начале 2018 года из-за отсутствия интереса к инженерной команде и отсутствию имеющихся талантов, а также новые инвестиции из PPB, проект начала процесса повторной записи своего приложения Ember в реагировании. Проект имеет устойчивый Ruby на Rails API, которые обслуживают мобильные приложения и веб-приложение; Тем не менее, принятие новых вызовов API было сокращено из-за отсутствия у Ember Work, команда выводила. Передовой клиент (веб-приложение Ember) отсутствовал на новых функциях и новых форматах игр.

Решение

Либоты Browntree изначально были наняты для работы на Ruby на Rails API в ожидании предстоящего футбольного сезона. Через 3 месяца в команде API; Тем не менее, стало ясно, что новая команда Ract React нуждалась в том, чтобы поддержать проект повторной записи на финишную линию. В очень коротком количестве времени ваши действительно работали над очень большим и сложным приложением на реагирование, реализующие функции как можно быстрее. Команда, и я использовал несколько основных концепций, чтобы быстро построить функции и поддерживать отличный код:

  • Реагировать
  • Атомная каталог Структура
  • Redux для управления государством

Реагировать

Реагировать это удивительная библиотека компонентов JavaScript, написанная Facebook. Реагировать очень легко написать многоразовые компоненты для вашего проекта.

Проект имеет много повторного использования в их веб-приложении. Представьте себе концепцию «карточки игрока». «Игрок» может быть профессиональным спортсменом, который играет в НХЛ, NBA, MLB или PGA. В повторном напишите, мы создали концепцию «игровой карты», которая заключается в том, что инкапсулирует все эти сценарии, и мы смогли поделиться им на протяжении всего приложения. Создавая твердые компоненты в реакции и повторно используя их в разных местах, мы быстро реализовали многие особенности предыдущего веб-приложения.

Атомная структура

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

atoms - molecules - organisms - templates -> pages

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

Представьте себе нашу карту игрока сверху. На самом деле есть много частей для этого компонент. У нас есть некоторые компоненты, которые охватывают несколько уровней нашего атомного Структура в нашей карточке игрок в одиночестве! У нас есть аватар игрока, который связан с Аватар атом компонент. У нас есть стол для статистики, что происходит от статист молекула компонент. И мы поставили все вместе в PlayerCard что происходит, чтобы быть Организм Компонент – компонент, который Сочетает в себе молекулы и атомы с образованием более сложной части пользовательского интерфейса.

PlayerCard Компонент может быть сгруппирован в список игроков. Этот список можно считать Шаблон Отказ И вы можете объединить эти шаблоны вместе сформировать страницу. На нашем изображении выше мы можем увидеть страницу, которая отображает выигрыши и баллы из прошлых конкурсов в проекте.

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

Redux для управления государством

Redux это удивительный инструмент для управления состоянием на протяжении всего приложения JavaScript. Взяты из redux Веб-сайт:

Redux – предсказуемый государственный контейнер для приложений JavaScript. Это поможет вам писать приложения, которые ведут себя последовательно, запускаются в разных средах (клиент, сервер и родной) и легко проверить. Кроме того, он обеспечивает отличный опыт разработчика, например, редактирование живого кода в сочетании с отладчиком для путешествий с временем

Redux работает очень хорошо с реагированием с React-redux упаковка.

В рамках проекта приложения мы хотели сохранить концепцию страницы, требующей определенного набора данных. Это отличается от некоторых других JavaScript Frameworks, которые используют модель MVC – что говорит, что модель содержит данные. Мы использовали редукторы – основную концепцию redux – нарезать наши данные в соответствующие куски для использования на данной странице в приложении. Использование данных Этот способ позволил нам легко управлять сложным набором данных через прочную конструкцию редуктора и повторное использование.

Быстрый пример был бы страница результатов, показанной выше. Когда мы делаем запрос от API, мы получаем целую кучу данных. Большинство из этих данных не требуются для страницы результатов; Тем не менее, мы можем использовать редукторы Redux для нарезания данных только к нужным подходящим штукам. Нарезание данных – отличный способ сохранить каждую страницу.

В заключение

React – это удивительная библиотека, и когда вы парите ее с правильными инструментами и концепциями, вы можете очень быстро создавать очень сложные приложения. Мы (фронтальная команда на черновике и I) использовала несколько принципов и концепций, чтобы очень быстро повторно создать целое комплексное веб-приложение в реакцию с очень жестким сроком.

Оригинал: “https://dev.to/cpow/re-writing-drafts-ember-app-in-react-58e5”