Введение

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

  • Основные инструменты и библиотеки
  • Стайлинг
  • Компонентная организация
  • Государственное управление
  • Аутентификация
  • Графики, графики и еще раз графики!
  • Развертывание

Основные инструменты и библиотеки

Если вы в курсе последних веб-тенденций, вы не удивитесь, узнав, что интерфейс FanAI написан на TypeScript. Мы используем статическую проверку типов TypeScript для раннего выявления потенциальных проблем реализации, что позволяет нашей команде разработчиков писать код с большей уверенностью. Используя TypeScript, мы определяем наши веб-компоненты, используя мощную комбинацию React (включая хуки) и Redux.

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

Стайлинг

Давайте поговорим о стилизации веб-компонентов на FanAI. Чтобы лучше понять технологический выбор, который мы сделали в отношении стиля, полезно иметь контекст рабочего процесса с нашей командой дизайнеров. Наш дизайнер UI/UX — армия из одного человека по имени Лэнс — создает макеты в инструменте под названием Sketch ​​и экспортирует эти макеты в приложение Zeplin, которое предоставляет полезный CSS для быстрого запуска реализации стиля.

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

Компонентная организация

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

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

Государственное управление

Приложение FanAI использует гибридный подход к управлению состоянием. Для состояния, которое является общим для многих компонентов в приложении, таких как состояние аутентификации и информация о пользователе, мы используем наблюдаемый контейнер состояния Redux, который позволяет нам создавать действия и распространять события на другие компоненты в системе. Redux предлагает гораздо больше, чем просто управление состоянием. Это также позволяет использовать полезное промежуточное программное обеспечение, такое как наше собственное @fanai/request-redux-middleware для получения состояния из серверной части, а также отличные инструменты браузера, такие как redux-devtools, которые предоставляют нам интерактивное представление текущее состояние приложения с первого взгляда, что может служить инструментом отладки, экономящим время.

Хотя Redux предоставляет отличные возможности и функциональность для глобального состояния приложения, у нас есть много состояний, которые более локализованы. В этих случаях мы используем хуки React, такие как useState и useContext, для хранения и предоставления состояния в более локализованном контексте.

Аутентификация

Теперь, когда мы рассмотрели основы и стиль, давайте перейдем к аутентификации. Основные требования FanAI к аутентификации довольно просты: нам нужны учетные записи на основе пароля и строгая безопасность. Для удовлетворения этих требований мы используем Google Firebase.

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

Диаграммы, диаграммы и многое другое

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

Развертывание

Когда приходит время создавать и выпускать наши новейшие функции, команда FanAI использует Google Cloud Build для непрерывной интеграции и автоматического развертывания. Мы используем Cloud Build для запуска наших автоматических тестов и связывания наших активов с помощью Webpack перед развертыванием в различных промежуточных средах. После того, как мы прошли квалификацию нашего релиза как с автоматическим, так и с ручным тестированием, мы развертываем его в сервисе Firebase Hosting.

Хоть Firebase Hosting уже соответствует некоторым другим нашим технологиям, он предлагает некоторые серьезные преимущества, такие как упрощенная настройка, молниеносная служба CDN и бесплатные SSL-сертификаты, которые делают его достойным внимания.

Закрытие

Зная больше о внешнем стеке технологий FanAI, вы можете задаться некоторыми трудными вопросами, такими как «Должен ли я переключиться на использование пакета X?» или «Каковы преимущества использования пакета X по сравнению с пакетом Y?» Важно помнить, что более идеальное решение всегда будет на горизонте и станет очевидным после того, как вы выйдете далеко за рамки начала проекта. Наш совет — оставаться прагматичными; рассмотреть возврат инвестиций от изменения направления; и, самое главное, сосредоточьтесь на выпуске отличных продуктов!

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