За последний год мы заменили почти всю аудио архитектуру на NPR.org. Вместо этого мы создали экосистему звука NPR.org, перспективную сеть API, веб-интерфейсов, интерфейсов, ориентированных на производительность, и возможностей расширения платформы. Постоянный проигрыватель NPR.org и NPR One Webapp 2.0 являются основными игроками в новой экосистеме, укрепляя роль государственных СМИ в новостях и инновациях в области доставки звука.
Вот как мы подошли к работе от разработчиков продукта Digital Media NPR.
Постоянный проигрыватель
Превращение NPR.org в динамическое веб-приложение для непрерывного воспроизведения звука с одновременным предоставлением пользователям возможности просматривать сайт потребовало тщательного технического планирования. Чтобы лучше управлять огромным прицелом, мы разделили его на две части, которые запустили независимо. В первом мы превратили NPR.org в одностраничное постоянное приложение. Во втором мы создали аудиоплеер и вспомогательные компоненты и интегрировали их в сайт.
Когда мы начали процесс превращения веб-сайта в одностраничное приложение, мы начали свой путь с базы кода JavaScript, которая органически росла в течение многих лет. Все файлы прикрепляли свои функции к одному объекту в глобальном пространстве имен, и было множество неявных зависимостей, которые делали изменение или удаление кода опасной задачей. И отсутствие тестов не помогло.
Чтобы прояснить наше понимание ситуации, мы провели полную инвентаризацию динамических функций на NPR.org, избавились от большого количества устаревшего кода и переписали весь необходимый нам JavaScript в виде модулей с явными зависимостями. В то же время мы работали над тем, чтобы сделать веб-сайт постоянным, написав настраиваемый уровень абстракции поверх jquery-pjax, который позволяет отдельным модулям подписываться на события жизненного цикла страницы и запускаться в контекстно-зависимой манере.
Помимо создания более понятного и легкого для понимания кода, это обновление привело к значительному повышению производительности. Когда мы выпустили наш модульный устойчивый JS, время загрузки нашей страницы NPR.org упало на 50 процентов.
Переписав JavaScript сайта для поддержки постоянного взаимодействия, мы обратили внимание на само приложение для проигрывания. После экспериментов с несколькими интерфейсными фреймворками мы остановились на React как на динамическом уровне рендеринга представления, поддерживаемом Redux для управления состоянием приложения. Мы обнаружили, что абстракции, предоставляемые этими инструментами, позволяют нам устанавливать четкие контракты между различными частями кодовой базы и быть очень продуктивными в команде. А функциональный неизменный стиль, обеспечиваемый Redux, способствовал написанию тестов, гарантирующих, что ключевая бизнес-логика работает должным образом.
Это было особенно очевидно в случае спонсорства, поскольку новый игрок сопровождался инновационными (и сложными) спонсорскими продуктами, которые было бы гораздо труднее реализовать с использованием набора технологий, менее явных в ожиданиях относительно потока данных.
Наконец, мы использовали NPR One Listening Service, API-интерфейс для первого аудио и наш API-интерфейс NPR Stations в качестве авторитетных источников аудио по запросу и потокового аудио соответственно. Это сократило значительную фрагментацию и дублирование, существовавшее в нескольких кодовых базах NPR до введения новой звуковой экосистемы на NPR.org.
NPR One Webapp 2.0
Первоначально созданное в середине 2012 года и активно разрабатывавшееся до начала 2014 года, NPR One Webapp 1.0 обеспечивало основные функции NPR One для Интернета. Однако, поскольку он перестал получать регулярные обновления, он стал все больше и больше отставать от мобильных приложений NPR One с точки зрения набора функций, шаблонов UX и языка визуального дизайна. Кроме того, его техническая инфраструктура была хрупкой, и ее трудно было поддерживать. Он был построен с использованием KnockoutJS, фреймворка внешнего интерфейса, который в значительной степени потерял популярность к началу 2015 года. Не существовало модульных или функциональных тестов, защищающих его от регрессий, а обновления браузера, которые включали изменения в базовые технологии HTML5, были часто приводя к тому, что код, который работал одну неделю, переставал работать на следующей. Наконец, постепенная смена персонала на протяжении многих лет означала, что немногие из первоначальных разработчиков и дизайнеров, которые работали над Webapp 1.0, все еще существовали.
В январе 2016 года мы предложили полную реконструкцию с нуля. Когда 31 марта был запущен Webapp 2.0, ни одна строчка кода из Webapp 1.0 не была повторно использована. Мы выбрали фреймворк Google Angular 2 в качестве нашей основной технологии из-за его соответствия современным веб-стандартам, сильной кроссплатформенной поддержки и инструментов тестирования мирового класса. Новое веб-приложение не только имеет 100% покрытие модульными тестами, но и полный набор сквозных тестов с использованием Protractor (расширение Angular популярной среды тестирования Selenium), которые проверяют все взаимодействия и поведение пользовательского интерфейса и немедленно сообщите нам, если новое обновление браузера или изменение серверного API NPR One вызвало регресс.
Хотя Webapp 2.0 построен на Angular 2, где новый Persistent Player использует React и Redux, две команды часто общались и согласовывали основные стратегии организации кода и структурирования взаимодействий между компонентами. В то время как Angular 2 не требует этого строго, Webapp 2.0 использует подход на основе состояний, в значительной степени вдохновленный Redux, но с использованием RxJs, мощной библиотеки Javascript, которая преобразует асинхронные события в наблюдаемые потоки данных. Благодаря сотрудничеству двух команд, хотя мы решили использовать две разные среды, наши разработчики могут читать и понимать код друг друга, что упрощает обмен идеями и предложение улучшений.
Наряду с техническим обновлением Webapp 2.0, дизайн и пользовательский интерфейс веб-приложения были переработаны, чтобы радовать как глубоко преданных, так и совершенно новых пользователей. Это включало подачу более четких сигналов на наши карты обмена в соцсетях о том, что нажатие на историю NPR One приведет пользователя к впечатлениям от прослушивания. С обновлением язык пользовательского интерфейса и визуального дизайна теперь соответствует нашему набору продуктов NPR One, что делает его более приятным переходом для наших кроссплатформенных пользователей, когда они переключаются между приложениями.
Чтобы удовлетворить потребности новых слушателей, которые были открыты для опыта в первую очередь со звуком, но ожидали определенного уровня контроля, мы ввели функцию Исследовать для веб-приложения. Более легкая версия, чем опыт, которым могут наслаждаться наши заядлые и преданные пользователи мобильного приложения NPR One, Explore для веб-приложения рекомендует выдающиеся эпизоды подкастов, отобранные нашими редакторами, а также персонализированные подборки шоу и местных историй.
Хотя Webapp 2.0 является самостоятельным продуктом - опытом NPR One для Интернета, - его истинная сила и потенциал заключается в нашей способности развертывать код на других платформах, поддерживающих веб-приложения HTML5. Создавая AngularJS 1 и Angular 2, Google всегда стремился предоставлять фреймворки, которые ориентированы на будущее и соответствуют стандартам, охватывая всю мощь веб-платформы, избегая при этом ненадежных хаков и обходных путей. Кроме того, наши разработчики работали в тесном сотрудничестве с нашими дизайнерами, чтобы структурировать пользовательский интерфейс Webapp 2.0 таким образом, чтобы взаимодействия и поведение по-прежнему имели смысл на других устройствах и требовали в лучшем случае смены скинов, которую легко выполнить с помощью таблиц стилей CSS.
NPR One была первым партнером по запуску, когда Amazon объявила о поддержке веб-приложений HTML5. Платформа воплотила нашу цифровую стратегию по знакомству со слушателями там, где они есть, и эта возможность позволила нам узнать, чего пользователи ожидают от первого прослушивания звука на телевизоре. Мы знаем, что нашим слушателям нравится наш контент, когда они выполняют несколько задач во время утренних и вечерних рутинных дел. Подключение к телевизору поддерживало эти привычки, не только увеличивая возможности мобильного приложения или настольного компьютера. Нам удалось создать NPR One for Fire TV так, чтобы это выглядело правильно на телевидении, и при этом сохранить восхитительное сочетание лучших аудио-историй с общественного радио.
Разработчики Persistent Player: Джастин Бачорик, Тодд Велштейн, Стивен Томпсон, Джефф Санк, Фрэнсис Ндару. QA: Суги Солаи. Дизайнеры: Скотт Страуд, Джош Осборн. Владелец продукта: Патрик Купер.
Разработчики NPR One Webapp 2.0: Нара Касберген, Джаред Билер. Дизайнер: Винсент Фаркухарсон. Владелец продукта: Ха-Хоа Хамано.
