simorgh
Release 4.2049.0
На веб -сайтах BBC World Service News отображаются с использованием приложения Simorgh, на основе ReactJS. Simorgh также отдает страницы статьи AMP News для World Service, News Service News и BBC Sport.
Simorgh предоставляет быстрый и доступный веб -опыт, используемый миллионами людей по всему миру каждый месяц (см. Список веб -сайтов с использованием Simorgh). Он регулярно поддерживается и хорошо документирован, и мы приветствуем участников с открытым исходным кодом.
Сайморг в основном поддерживается командами веб -инженерии BBC News. Он дает очень доверенные новости читателям по всему миру, в настоящее время на (41 языке). Мы поддерживаем широкий спектр устройств и глубоко заботимся о масштабе, производительности и доступности. Мы работаем в гибких, гибких командах и имеем захватывающую дорожную карту для будущего развития.
Пожалуйста, ознакомьтесь с нашим:
NB Существует дополнительная документация, колокат с соответствующим кодом. Приведенный выше список является индексом документации на высшем уровне нашего репо.
Запрос к статье BBC (https://www.bbc.co.uk/news/articles/clldg965yzjo) передается в приложение Simorgh из проприетарной службы маршрутизации и кэширования (называется Mozart).
Запрос соответствует маршруту на нашем Express Server с использованием Match Regex ( articleRegexPath || frontPageRegexPath ). Если URL-адрес соответствует предварительно определенному шаблону Regex для статьи или на первой странице, мы извлекаем некоторые параметры из маршрута, используя функцию getRouteProps . Это возвращает сервис, ISAMP, маршрут и соответствующие свойства. Маршрут-это маршрут реакционного маркировки, который определяет метод для извлечения начального JSON, используемого для отображения страницы, и контейнера React, в котором можно сделать IE ArticleContainer , это обычно называется getInitialData
Как только данные возвращаются, мы приносим код состояния и передаем все эти данные в качестве реквизита в наш основной документ, используя renderDocument .
Документ передает URL -адрес, данные JSON, BBC Origin, ISAMP и службу в основной контейнер приложения, а результат приведен в строку с использованием собственного метода renderToString . Затем эта строка передается в DocumentComponent в качестве основного приложения вместе с массивом активов, тегами стиля (вывод из стилизованных компонентов) и любыми сценариями/ссылками, которые необходимо добавить в голову. Затем это отображается в статическую HTML -разметку с использованием собственных renderToStaticMarkup и отправляется обратно пользователю в качестве статического HTML. В этот ответ включены ссылки на наши пакеты JS, которые пользовательское устройство загрузит, чтобы загрузить приложение для одной страницы (SPA) для последующих поездок.
Теперь, когда был загружен необработанный HTML, файл JS на стороне клиента начинает и увлажняет первоначальный ответ с помощью приложения на стороне клиента. В течение этого процесса React использует начальную полезную нагрузку JSON (доступна в Global Window объект SIMORGH_DATA ) для увлажнения исходной разметки, возвращаемой ReactdomServer. React ожидает, что рендерированный контент идентичен между сервером и клиентом (поэтому мы отправляем начальную полезную нагрузку JSON на странице SSR, поэтому этап гидратации работает с теми же данными, что и использовался сервер).
Полезная нагрузка JSON для статьи состоит из ряда блоков. Каждый блок представляет собой объект, который представляет элемент на странице, это может быть заголовок, изображение, абзац и т. Д. Каждый из этих блоков имеет тип блока, а тип блока будет соответствовать определенному контейнеру в Simorgh EG Blocktype: изображение будет соответствовать контейнеру изображения.
Контейнер Articlemain будет выполнять по каждому блоку JSON, сопоставить его с соответствующим контейнером React и передавать данные через реквизиты. Эти контейнеры - это место, где находится логика для рендеринга каждого типа блока. Именно в этот момент мы используем установленные компоненты Frontend из библиотеки компонентов Psammead. Например, контейнер изображения импортирует контейнер с рисунком, а рисунок импортирует и использует Psammead-Image и компоненты Psammead-Image-Place-Holder. Изображение в статье, как правило, будет иметь подпись, поэтому контейнер для фигуры импортирует контейнер для подписи, который может включать в себя больше компонентов Frontend от Psammead, чтобы представить подпись поверх изображения.
Этот процесс повторяется для каждого блока в рамках статьи, в конечном счете, представляет основную часть новостной статьи, используя комбинацию контейнеров React для бизнес -логики и реагировать компоненты для разметки фронта.
Каждое рендеринг передается через набор HOC (компоненты более высокого порядка) для улучшения страницы, эти HOC являются;
Благодаря выбору типов страниц, проходящих через OptimizelyProvider, это позволяет оптимизировать использование в выбранных типах страниц.
Вариант HOC гарантирует, что услуги, имеющие варианты (например, simp , lat ), всегда перенаправляют на URL, который делает соответствующий вариант.
Если пользователь перемещается в URL без предоставления варианта, а вариант установлен в cookie, страница варианта cookie отображается. В противном случае страница варианта по умолчанию отображается
Если пользователь перемещается в URL -адрес с вариантом, а вариант установлен в cookie, страница варианта cookie отображается. В противном случае представленная страница варианта отображается.
WithContexts HOC - это обертка, которая обеспечивает доступ к различным поставщикам контекста, доступным в приложении. Любой дочерний компонент внутри этих поставщиков контекста имеет доступ к данным контекста через крюк USECONTEXTS.
Обертка Page HOC просто завершает контейнеры для статьи или передней страницы, в настоящее время у нас есть только один макет страницы. Этот макет включает в себя заголовок, нижний колонтитул и поставщики контекста, которые делают основное тело в детстве между заголовком и нижним колонтитулом.
Ошибка HOC проверяет пропущенную ошибку, если ошибка установлена на NULL, статья или контейнер для передней страницы просто возвращается.
Если ошибка установлена на True, возвращается компонент ошибки, давая пользователю визуальную индикацию ошибки, например, страница ошибки 500.
Предполагая, что другие HOC вернули исходную статью или контейнер с передней страницей, данные HOC будут выполнять некоторые проверки проверки на данные JSON, передаваемые через предложение данных. Если все чеки будут удовлетворены, ArticleContainer будет возвращен с одной опорой pageData . В этом реквизите Pagegatata будут размещены данные JSON, например, блоки оптимизации для данной статьи.
HOC Whishchchangehandler - это обертка, применяемая на всех страницах, которые проверяют изменения в значении хэша URL. Страницы включают элементы управления доступностью для пропуска контента, если пользователь решит это сделать, это использует хэш URL для пропуска пользователей в определенные области страницы. Из-за характера маршрутизации на стороне клиента, изменения в URL-адреса приводят к повторному рендерингу. Это приводит к некоторому неприглядному мерцанию пользовательского интерфейса для некоторых компонентов, в частности, в средствах массовой информации и социальных сетях. Этот HOC применяет чеки к URL, поэтому посмотрите, необходимо ли повторное рендеринг или не предотвращение повторного рендеринга с использованием React.memo .
Компоненты hipttimizelyprovider hoc возвращают компоненты, которые были расширены с помощью доступа к клиенту с оптимизацией, который используется для запуска нашего A/B -тестирования. Это делается для ограничения размеров пучка, так как мы разделяем некоторые из наших пакетов по типу страницы, это означает, что если мы запускаем только A/B -тестирование на определенных типах страниц, мы можем предотвратить загрязняющие пакеты типа страницы с весом библиотеки SDK, которую мы используем для оптимиза.
В качестве значения объектного ключа объекта handlerBeforeContexts в рамках ApplyBasicPageHandHandlers.js должен быть добавлено withOptimizelyprovider в рамках applybaspagehandlers.js, так как ckns_mvt устанавливается в пределах UserContext, поэтому HOC withOptimizelyProvider должен быть применен в правильном порядке вместе с контекстами. Это делает ckns_mvt доступным во время первых посещений, чтобы перейти в OptimizelyProvider , наряду с такими атрибутами, как service , который используется для определения, когда оптимизируется, должен включить эксперимент.
Пример для страницы статьи:
import withOptimizelyProvider from '#app/legacy/containers/PageHandlers/withOptimizelyProvider' ;
import ArticlePage from './ArticlePage' ;
import applyBasicPageHandlers from '../utils/applyBasicPageHandlers' ;
export default applyBasicPageHandlers ( ArticlePage , {
handlerBeforeContexts : withOptimizelyProvider ,
} ) ;При добавлении нового типа страницы требуется несколько деталей.
/data/{{service}}/{{pageType}}/.jsonlocalhost:7080/igbo.json должен иметь данные для создания страницы индекса localhost:7080/igbomain элемент с помощью flex-grow: 1; Объявление CSS, это должно убедиться, что оно растет, чтобы заполнить пространство между визуальным заголовком и нижним колонтитулом, корневым Div с использованием реализации Flexbox 'Licky Liter'. cypress/support/config/settings.js для каждой службы (даже если для установки новой страницы на неопределенную)cypress/integration/pages/cypress/integration/pages/ Вы должны убедиться, что трубопроводы E2E обновляются для запуска нового Test Spec Test Pipeline & Live E2E PipelineNB: С таким количеством шагов предполагается, что при добавлении нового типа страницы есть несколько PRS, чтобы не иметь единого огромного PR. Однако, если тесты Cypress (#6) не добавляются в тот же PR, что и на маршрутизации страницы (#5), они должны немедленно следовать за PR -PR -PR, в идеале, с ними следует обрабатывать в одном PR.
Пожалуйста, прочитайте: Anplosing.md
Установите узел. https://nodejs.org/en/. Мы используем версию, указанную в .nvmrc и если у вас есть менеджер версий Node (NVM), вы можете запустить следующий скрипт для автоматического изменения в поддерживаемую проектную версию.
nvm use
Проект Simorgh использует пряжу для управления пакетами. Рекомендуется установить пряжу через диспетчер пакетов NPM, который поставляется в комплекте с node.js при установке ее в систему. Чтобы установить пряжу, запустите эту команду:
npm install --global yarn
Затем вы можете запустить следующие команды для установки Simorgh
git clone [email protected]:bbc/simorgh.git
cd simorgh
yarn install
Чтобы запустить это приложение локально, с горячей загрузкой, запустите
yarn dev
Приложение начнется на http: // localhost: 7080.
Страницы статьи обслуживаются на маршрутах формата /news/articles/:id , где идентификатор, идентификатор актива, сгенерированный системой управления контентом.
К вашему сведению: статья, объясняющая использование BBC идентификаторов в URL
Эти две новостные статьи доступны в тестовой среде нашей CMS, а также на местном уровне, поэтому часто используются для тестирования:
Мы также обслуживаем AMP HTML -страницы по маршруту /news/articles/:id.amp https://www.ampproject.org
Услуги с вариантами не могут быть доступны с помощью приведенного выше формата, вместо этого вариант должен быть предоставлен в URL.
Передние страницы мирового обслуживания обслуживаются в формате /:service , где service представляет собой сайт мирового обслуживания:
Передние страницы мирового сервиса также следуют формату статьи для усилителя, будучи доступным по адресу /:service.amp :
Услуги с вариантами не могут быть доступны с помощью приведенного выше формата, вместо этого вариант должен быть предоставлен в URL.
Тематические страницы используют внутренние API BBC, которые не доступны общедоступны. Это может привести к появлению следующих предупреждений при развитии локально:
No BFF_PATH set as environment variable, you will not have access to topics
Внутренние разработчики, которым необходимо работать на тематических страницах на местном уровне, должны связаться с командой для доступа.
Рекомендации на страницах истории также используют внутренние лаборатории данных BBC Data Labs. Требуется добавление пары ключей/значений в файле envConfig/secret.env чтобы они появились локально.
Внутренние разработчики, которым необходимо работать на страницах статьи на местном уровне, должны связаться с командой для доступа.
Вы можете найти другие типы страниц, просмотрев наши маршруты и их акции, но мы предлагаем вам начать с приведенного выше, а затем взглянуть на ядро приложения, чтобы понять и найти другие маршруты.
Мы используем сборник рассказов для разработки компонентов в изоляции от приложения Simorgh. Вы можете получить доступ к этому по адресу https://bbc.github.io/simorgh/
Чтобы запустить локальный yarn storybook , он будет доступен по адресу http: // localhost: 9001/. Введение и документация для сборника рассказов здесь: https://storybook.js.org/basics/introduction/.
При просмотре видео историй локально обязательно используйте домен BBC, как указано в разделе «Изменение местоположения запроса». Видео не будет работать в размещенной версии рассказов, связанной выше по этой причине.
Мы также используем хроматический QA для проведения кросс-браузера на наших историях.
Пожалуйста, также обратите внимание, что если вы хотите увидеть компоненты, отображаемые нашими шрифтами, вам нужно будет затопить перекрашение холста. Это связано с тем, что все наши шрифты имеют свойство font-display optional или swap в соответствии с соответствующими стратегиями загрузки здесь: https://ws-dulwloads.files.bbci.co.uk/fonts/index.html. Самый простой способ принудительного перекраски - это просто переместить разделитель между окном предварительного просмотра раздела и Knobs или изменять размер окна браузера.
Если вы хотите разместить приложение для доступности через локальную сеть, следуйте инструкциям здесь.
Чтобы запустить это приложение локально с помощью производственной сборки, запустите: yarn build && yarn start .
Мы используем локальную yarn build , которая объединяет приложение, указывающее в Localhost для данных и статических активов.
Это в основном используется для отладки latest , используя пакеты тестовой и живой среды. Убедитесь, что пакеты существуют в статическом месте актива для правильной среды перед началом отладки.
Чтобы запустить тестовые пучки на Localhost:
envConfig/test.env Измените значения:LOG_DIR='/var/log/simorgh' to LOG_DIR='log'rm -rf build && yarn build:test && yarn startЧтобы запустить живые пакеты на Localhost:
envConfig/live.env Измените ценности:LOG_DIR='/var/log/simorgh' to LOG_DIR='log'rm -rf build && yarn build:live && yarn startНекоторые функции работают по -разному в зависимости от того, находится ли пользователь в Великобритании или на международном уровне. Вы можете явно запросить конкретную версию, получив Simorgh через конкретный домен BBC Localhost:
Если эти URL -адреса не работают, вам может потребоваться добавить запись файла хоста ( /etc/hosts или C:WindowsSystem32driversetchosts ):
127.0.0.1 localhost.bbc.co.uk
127.0.0.1 localhost.bbc.com
При развертывании make buildCi работает в среде CI, которая создает пакеты как для test , так и live сред. В двух средах файлы .env.test или .env.live перезаписывают файл .env , который используется для запуска приложения с правильными пакетами.
Каждый запуск yarn build будет обновлять файлы анализа пакетов в репо. Чтобы просмотреть разбивку размера пакета, откройте сгенерированный отчет HTML в браузере ./reports/webpackBundleReport.html Это генерируется через webpack-bundle-analyzer . Данные также доступны как json ./reports/webpackBundleReport.json .
У нас есть сжигание с Airbnb StyleGuide, и мы используем краситель в качестве форматирования кода. Их можно запустить с помощью yarn test:lint .
У нас есть Jest Unit Tests, которые можно запустить с помощью yarn test:unit .
yarn test запускает оба набора из них.
Мы используем Cypress для наших сквозных тестов. Чтобы запустить тесты на дым локально, запустите эту единственную команду:
yarn test:e2e
Он раскрутит производственный сервер на порту 7080 и запустит тесты Cypress против этого. Чтобы запустить тесты на дым, интерактивно, запустите:
yarn test:e2e:interactive
Это загружает пользовательский интерфейс, который легко позволяет выполнять отдельные тесты вместе с визуальным потоком браузера, когда выполняются тесты.
Есть несколько переменных среды, которые вы можете использовать с нашим тестовым набором, а это:
| Переменная среды | Эффект | Возможные значения |
|---|---|---|
| Cypress_only_service | Ограничивает запуск только указанного сервиса | Единственная служба, то есть CYPRESS_ONLY_SERVICE=urdu |
| Cypress_app_env | Запускает тесты в определенной среде | test , local , live |
| Cypress_smoke | Запускает только тесты на дым, если это правда | true , false |
| Cypress_uk | Смотрите E2ES в Великобритании против Live | true , false |
| Cypress_skip_eu | См. Запуск E2ES за пределами ЕС | true , false |
Эти команды могут быть запущены в комбинации.
Способ по умолчанию для запуска E2E Suite AKA yarn test:e2e или yarn test:e2e:interactive запускает подмножество наших тестов, в противном случае знают как тесты на дым . Чтобы запустить полный набор:
CYPRESS_SMOKE=false yarn test:e2e
Тесты могут быть ограничены только для запуска только для одной службы, указав его с помощью переменной среды CYPRESS_ONLY_SERVICE . Например:
CYPRESS_ONLY_SERVICE=urdu yarn test:e2e
Чтобы запустить только определенную спецификацию, необходимо напрямую вызвать Cypress. Сначала убедитесь, что Simorgh уже запускается в другой вкладке, а затем запустите (например, только для запуска испытаний на статье):
npx cypress run --spec cypress/integration/pages/articles/index.js
Более подробную информацию об использовании Cypress CLI можно найти по адресу https://docs.cypress.io/guides/guides/command-line.html
Это затрагивает разработчиков только в Великобритании (но может повлиять на вас, если вы используете маршрутизацию VPN через Великобританию)
Функция Cypress .visit () заблокирована для посещения одного домена за тест. Это становится проблематичным, когда вы запускаете тесты E2E из Великобритании из -за перенаправления от .com на .co.uk . По умолчанию тесты Cypress будут работать так, как если бы они были пробежали за пределы Великобритании. Чтобы запустить эти тесты из Великобритании, вы должны пройти в UK переменную среды Cypress Environment. Это заменит окончания URL на .co.uk , что позволит вам успешно запустить эти тесты.
Вот пример команды:
CYPRESS_APP_ENV=test CYPRESS_UK=true CYPRESS_SMOKE=true yarn cypress
Это затрагивает разработчиков на основе ЕС (но может повлиять на вас, если вы используете маршрутизацию VPN через страну, не в ЕС)
Запуск тестов Cypress за пределами ЕС не будет показывать баннеры согласия ЕС на AMP, и это может привести к провалу некоторых тестов. Установите CYPRESS_SKIP_EU=true , чтобы предотвратить выполнение этих тестов, когда они за пределами ЕС.
Примером команда будет:
CYPRESS_SKIP_EU=true yarn cypress:interactive
Следующая команда запускает Simorgh и Cypress:
CYPRESS_APP_ENV=local CYPRESS_UK=true CYPRESS_SMOKE=true yarn test:e2e
Cypress_app_env также можно установить равным «тесту» и «Live». Cypress_smoke может быть истинной или ложным. Это верно по умолчанию и запускает определенное подмножество тестов.
Мы используем маяк, чтобы проверить производительность нашей страницы. Однако они были перемещены из Simorgh до наших собственных внутренних процессов CD. Это позволяет нам запускать эти тесты на более точном изображении Simorgh. Вы можете свободно запускать маяк самостоятельно из браузера Chrome или использовать CLI Node Lighthouse.
Назвал Симорг после персидской мифологической птицы. Симорг - это амальгама многих птиц (а в некоторых счетах других животных) в одну.
К счастью, метафора, которая казалась подходящей для предложения всех статей BBC в одном решении, возможно, теперь еще более уместна, поскольку приложение развивается для поддержки большего количества типов контента. Это также четкая ссылка на международный характер наших команд, а также к желанию обеспечить статьи (и все, что последовало) для пользователей на всех языках, которые поддерживает BBC.
Это также уникальное имя, которое является практичным и, более поверхностно, птица очень красивая.
