Когда я провожу время с другими разработчиками - на встречах или встречах со старыми друзьями, - один из первых вопросов, который я задаю: «С каким стеком вы работаете?» Технологии быстро меняются, поэтому мне всегда интересно узнать, что используют мои коллеги. Признаюсь, что не так весело слышать о поддержке устаревшего фреймворка или приложения - другого приложения jQuery или Drupal в мире - вместо чего-то нового и современного! Иногда в этот момент разговора я не могу не надеть шляпу хвастовства и взволнованно рассказать о том, над чем мы работаем в O’Reilly и как мы структурируем наши услуги с точки зрения внешнего интерфейса.
Если вы когда-нибудь задумывались, как устроена внутренняя структура нашего сайта электронного обучения, эта статья для вас.
React-Redux
Если вы не догадались (или не просмотрели наш исходный код), наш интерфейсный фреймворк - React-Redux. Вы, наверное, слышали об этой многоразовой библиотеке пользовательского интерфейса на основе JavaScript, но если нет, вам стоит послушать ее сейчас. React делает ваши веб-сайты молниеносно быстрыми, а код легко использовать повторно. Кроме того, он позволяет повторно использовать компоненты во всей кодовой базе. Это сохраняет одностраничные приложения СУХИМИ, сохраняя при этом эффективность разработки.
Вариант использования React прост: создание повторно используемых компонентов упрощает распространение среди команд; удобство работы конечного пользователя улучшается за счет превосходного времени рендеринга; улучшения доступности распространены по всему сайту; и как разработчик, инструменты и сообщество, стоящие за React, просто впечатляют.
Мы внедряем React в наших системах с 2015 года, и хотя на нашей платформе все еще есть службы, которые используют ванильный JS и чистый HTML и CSS, большинство из них было перенесено в библиотеки React небольшого размера. И, если вы беспокоитесь о тестировании - а вам следует беспокоиться - весь наш код, написанный на React, развертывается со 100% покрытием модульного тестирования, поддерживаемым Jest и Enzyme.
Библиотека пользовательского интерфейса
В O’Reilly мы используем систему проектирования компонентов пользовательского интерфейса. Такие компании, как AirBnb, Shopify, Pinterest, Uber и многие другие приняли эту методологию - и не зря. Последовательное использование компонентов на нашей платформе помогает пользователям ориентироваться и взаимодействовать с нашим сайтом, обеспечивая при этом ощущение предсказуемости.
Все наши фронтенд-инженеры обращаются к нашей внутренней системе проектирования в поисках базовых компонентов и макетов, из которых состоит наш веб-сайт. Единые стили и повторно используемые компоненты избавляют от необходимости вручную создавать адаптивные кнопки или искать шестнадцатеричные коды.
Как и во многих других компаниях, наша внутренняя система возникла из статического руководства по стилю и превратилась в систему, которую можно легко импортировать. От проектировщиков требуется, чтобы при создании новых проектов использовались компоненты системы. Это устраняет большую двусмысленность при передаче проектов между разработчиком и дизайнером и значительно упрощает процесс разработки. Для тех частей нашего веб-сайта, которые были созданы без наших внутренних компонентов, выполняется переход на новую систему, чтобы принять ее.
У нас также есть специальная команда по архитектуре внешнего интерфейса, которая постоянно выпускает обновления для нашей внутренней библиотеки пользовательского интерфейса. В духе O’Reilly они также приветствуют отзывы, предложения и пожелания от других команд. Наша библиотека хорошо документирована и использует экземпляры сборников рассказов, которые предоставляют примеры развернутых компонентов для проверки. Новые выпуски публикуются почти еженедельно и обновляются в упрощенном шаблоне микросервисов.
Эй, к слову о микросервисах ...
Легко развертываемые микросервисы
В O’Reilly мы твердо верим в важность разделенных микросервисов и надежности / расширяемости, которые дает наша кодовая база. В качестве нового сотрудника одной из первых вещей, над которой мы работали как часть RAMP team, было развертывание простого приложения hello world с нашим заранее определенным клиентским и серверным шаблонным приложением. От начала до конца новый микросервис с полным стеком может быть развернут в отделе контроля качества менее чем за час, что устраняет большие накладные расходы в отношении конфигурации веб-пакета, внутренней аутентификации и непрерывной интеграции.
И наши внешние микросервисы поставляются в комплекте с нашей собственной библиотекой пользовательского интерфейса, React / Redux и конфигурацией веб-пакета, готовой к работе!
Для меня, как для новичка в инженерии, эта упаковка значительно сэкономила время. В дополнение ко всему вышеперечисленному у нас есть группа разработчиков внутренней архитектуры, которая поддерживает, обновляет и обслуживает наше шаблонное приложение - почти так же, как у нас есть группа архитектуры внешнего интерфейса для поддержки нашей библиотеки пользовательского интерфейса.
Хотите узнать больше о преимуществах микросервисной архитектуры? Обязательно подпишитесь на Основы микросервисов, организованный 16 октября, или ознакомьтесь с нашей программой обучения Масштабирование микросервисов.
Короче говоря, работа с микросервисами резко улучшила качество моей жизни как инженера. Наша среда дает мне возможность действительно сосредоточиться на том, что я люблю, - на строительстве вещей. Напротив, настройка и стандартизация при отсутствии микросервисов могут стать повторяющимися и требовать много времени. Не говоря уже о том, что при участии совместной команды процесс понимания того, как структурировано каждое приложение, становится проблемой до внесения вклада. Я очень рад и горжусь тем, что являюсь частью команды, которая инвестирует в новые технологии и дает возможность своим сотрудникам использовать их.
Какие вопросы у вас есть к нам после того, как вы узнали больше о внутренней работе наших практик фронтенд-разработки и кодовой базы? Мы хотели бы узнать, есть ли у вас похожая (или разная!) Среда и какие инструменты оказались успешными на вашем рабочем месте!
