simorgh
Release 4.2049.0
BBCワールドサービスのニュースWebサイトは、ReactJSベースのアプリケーションであるSimorghを使用してレンダリングされます。 Simorghはまた、世界サービス、公共サービスニュース、BBCスポーツのためのAMPニュース記事ページをレンダリングしています。
Simorghは、毎月世界中の何百万人もの人々が使用する高速でアクセス可能なWebエクスペリエンスを提供します（Simorghを使用したWebサイトのリストを参照）。それは定期的に維持され、十分に文書化されており、オープンソースの貢献者を歓迎します。
Simorghは主にBBC News Webエンジニアリングチームによって維持されています。現在（41言語）世界中の読者に非常に信頼できるニュースを提供しています。幅広いデバイスをサポートし、スケール、パフォーマンス、アクセシビリティに深く注意しています。私たちはアジャイルで柔軟なチームで働いており、将来の開発のためのエキサイティングなロードマップを持っています。
私たちに慣れてください：
NB関連するコードにコロン付きドキュメントがあります。上記のリストは、リポジトリのトップレベルのドキュメントのインデックスです。
BBCの記事（https://www.bbc.co.uk/news/articles/clldg965yzjo）へのリクエストは、独自のルーティングとキャッシュサービス（Mozartと呼ばれる）からSimorghアプリケーションに渡されます。
リクエストは、正規表現マッチ（ articleRegexPath || frontPageRegexPath ）を使用して、Expressサーバーのルートと一致します。 URLが記事またはフロントページの事前に定義されたRegexパターンと一致する場合、 getRouteProps関数を使用してルートからいくつかのパラマを取得します。これにより、サービス、ISAMP、ルート、マッチプロパティが返されます。ルートは、ページをレンダリングするために使用された最初のJSONを取得する方法を定義する反応ルータールートと、すなわちArticleContainerをレンダリングするための反応コンテナを定義します。これは通常、 getInitialDataと呼ばれます。
データが返されたら、ステータスコードをプルし、このデータをすべてrenderDocumentを使用してメインドキュメントにプロップとして渡します。
ドキュメントは、URL、JSONデータ、BBC Origin、ISAMP、およびメインアプリコンテナへのサービスを渡し、結果はReact独自のrenderToStringメソッドを使用して文字列にレンダリングされます。次に、この文字列は、メインアプリとしてdocumentComponentに渡され、アセットアレイ、スタイルタグ（スタイルのコンポーネントからの出力）、およびヘッドに追加する必要があるスクリプト/リンクがあります。これは、React独自のrenderToStaticMarkupを使用して静的HTMLマークアップにレンダリングされ、Static HTMLとしてユーザーに送信されます。この応答には、ユーザーデバイスがダウンロードするJSバンドルへのリンクが含まれています。
RAW HTMLがダウンロードされたので、クライアント側のJSファイルがキックインし、クライアントサイドアプリケーションで最初の応答を潤いを与えます。このプロセス中に、Reactは初期のJSONペイロード（グローバルウィンドウオブジェクトSIMORGH_DATAで利用可能）を使用して、ReactDomserverによって返された元のマークアップを補給します。 Reactは、レンダリングされたコンテンツがサーバーとクライアントの間で同一であることを期待しています（これが、SSRページで最初のJSONペイロードを送信する理由であるため、サーバーが使用したのと同じデータで水和フェーズが実行されます）。
記事のJSONペイロードは、多くのブロックで構成されています。各ブロックは、ページ上の要素を表すオブジェクトであり、これは見出し、画像、段落などです。これらのブロックにはそれぞれブロックタイプがあり、ブロックタイプはSimorgh EG BlockTypeの特定のコンテナと一致します。画像は画像コンテナと一致します。
ArticLemainコンテナは、各JSONブロックを繰り返し、対応するReactコンテナと一致させ、プロップを介してデータを渡します。これらのコンテナは、各ブロックタイプをレンダリングするためのロジックがある場所です。この時点で、Psammeadコンポーネントライブラリからインストールされているフロントエンドコンポーネントを使用しています。たとえば、画像コンテナはフィギュアコンテナをインポートし、図はpsammead-imageとpsammead-image-placeholderコンポーネントをインポートおよび使用します。記事の画像には一般にキャプションがあるため、フィギュアコンテナには、Psammeadのフロントエンドコンポーネントを含むキャプションコンテナをインポートして、画像の上にキャプションをレンダリングできます。
このプロセスは、記事内の各ブロックについて繰り返され、最終的には、Business LogicとFrontendマークアップのReactコンポーネントのReactコンテナの組み合わせを使用して、ニュース記事の本体をレンダリングします。
各レンダリングは、HOC（高次コンポーネント）のセットに渡され、ページを強化します。これらのHOCは次のとおりです。
選択したページタイプでOptimizelyの使用を可能にするページタイプの選択が渡され、OpttimizelyProviderを使用して渡されます。
バリアントHOCは、バリアント（ simp 、 lat ）を持つサービスが常に適切なバリアントをレンダリングするURLにリダイレクトすることを保証します。
ユーザーがバリアントを提供せずにURLに移動し、バリアントがCookieに設定されている場合、Cookieバリアントページがレンダリングされます。それ以外の場合、デフォルトのバリアントページがレンダリングされます
ユーザーがバリアントを使用してURLに移動し、バリアントがCookieに設定されている場合、Cookieバリアントページがレンダリングされます。それ以外の場合、要求されたバリアントページがレンダリングされます。
WithContexts Hocは、アプリケーションで利用可能なさまざまなコンテキストプロバイダーへのアクセスを提供するラッパーです。これらのコンテキストプロバイダー内の子供のコンポーネントは、USECONTEXTSフックを介してコンテキストデータにアクセスできます。
ページラッパーHOCは、記事またはフロントページのコンテナをレイアウトでラップするだけで、現在、単一のページレイアウトしかありません。このレイアウトには、ヘッダー、フッター、コンテキストプロバイダーが含まれ、メインボディがヘッダーとフッターの間の子供としてレンダリングされます。
エラーが渡されたエラープロップをチェックします。エラーが記事またはフロントページコンテナが単純に返されるように設定されている場合。
エラーがtrueに設定されている場合、エラーコンポーネントが返され、ユーザーにエラーの視覚的表示が与えられます。たとえば、500エラーページ。
他のHOCが元の記事またはFrontPageコンテナを返したと仮定すると、データHOCはデータプロップを介して渡されたJSONデータの検証チェックを実行します。すべてのチェックが満たされた場合、ArticLeContainerは単一のpageData Propで返されます。このPagedataの小道具は、JSONデータを収容し、特定の記事の最適ブロックなどのレンダリングされます。
WithhashChangeHandler HOCは、URLハッシュ値の変更をチェックするすべてのページに適用されるラッパーです。ページには、ユーザーがそうすることを選択した場合にコンテンツをスキップするアクセシビリティコントロールが含まれています。これにより、URLハッシュを使用してユーザーをページの特定の領域にスキップします。クライアント側のルーティングの性質により、URLの変更により再レンダーが表示されます。これにより、いくつかのコンポーネント、特にメディアやソーシャルエンミングのために、見苦しいUIがちらつきます。このHOCはURLにチェックを適用するため、再レンダーが必要かどうか、またはReact.memoを使用して再レンダーを防止しないかどうかを確認します。
withoptimizelyProvider HOCは、A/Bテストの実行に使用されるOptimizelyクライアントへのアクセスによって強化されたコンポーネントを返します。これは、バンドルサイズを制限するために行われます。ページタイプごとにバンドルの一部を分離するため、特定のページタイプでA/Bテストのみを実行している場合、Pase Page Typeバンドルを防ぐことができます。
withoptimizelyproviderは、applybasicpagehandlers.js内のhandlerBeforeContextsオブジェクトキーの値として追加する必要があります。ckns_mvt ckns_mvt usercontext内で設定されているため、 withOptimizelyProvider hocを正しい順序で適用する必要があります。これにより、 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}}/.jsonサフィックスを備えたページと同じルートで利用できるようにする必要がありますlocalhost:7080/igbo.jsonインデックスページを構築するためのデータが必要ですlocalhost:7080/igbomain要素をレンダリングする必要がありますflex-grow: 1; CSS宣言、これは、FlexBoxの「スティッキーフッター」の実装を使用してルートDIVであるVisual Headerとフッターの間のスペースを埋めるために成長するためです。 cypress/support/config/settings.jsで構成が必要です（新しいページタイプを未定義に設定する場合でも）cypress/integration/pages/cypress/integration/pages/の下に特注のテストが追加されている場合は、新しい仕様テストE2Eパイプライン＆ライブE2Eパイプラインを実行するためにE2Eパイプラインが更新されることを確認する必要があります。NB：この多くの手順では、新しいページタイプを追加するときに、特異な巨大なPRがないように複数のPRを持つことが提案されています。ただし、サイプレステスト（＃6）がページルーティング（＃5）と同じPRに追加されていない場合は、ページルーティングPRを直接追跡する必要があります。理想的には、これらは単一のPRで処理する必要があります。
お読みください：convributing.md
ノードをインストールします。 https://nodejs.org/en/。 .nvmrcで指定されたバージョンを使用し、ノードバージョンマネージャー（NVM）がある場合は、次のスクリプトを実行して、プロジェクトサポートバージョンに自動的に変更できます。
nvm use
Simorgh Projectは、パッケージ管理に糸を使用しています。 NPMパッケージマネージャーを介してYARNをインストールすることをお勧めします。これは、システムにインストールするときに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ここで、IDはコンテンツ管理システムによって生成されたアセットIDです。
参考までに：URLでのBBCのIDSの使用を説明する記事
これらの2つのニュース記事は、CMSのテスト環境とローカルで入手できるため、テストに使用されることがよくあります。
また、ルート/news/articles/:id.amp https://www.ampproject.orgでAMP HTMLページを提供しています
上記の形式を使用してバリアントを備えたサービスにアクセスすることはできません。代わりに、バリアントをURLで提供する必要があります。
ワールドサービスのフロントページは、フォーマット/:service serviceが世界サービスサイトを表すサービスで提供されます。
ワールドサービスのフロントページは、 /:service.ampの記事形式にも従います。
上記の形式を使用してバリアントを備えたサービスにアクセスすることはできません。代わりに、バリアントをURLで提供する必要があります。
トピックページは、公開されていない内部BBC APIを使用します。これにより、ローカルで開発するときに次の警告が表示される可能性があります。
No BFF_PATH set as environment variable, you will not have access to topics
地元でトピックページで作業する必要がある内部開発者は、アクセスのためにチームに連絡する必要があります。
ストーリーページの推奨事項は、内部BBCデータラボAPIも使用しています。 envConfig/secret.envファイルにキー/値ペアをローカルに表示するために、key/valueペアを追加する必要があります。
記事ページにローカルで作業する必要がある内部開発者は、アクセスのためにチームに連絡する必要があります。
私たちのルートとその仲間の再認識を調べることで、他のページの種類を見つけることができますが、上記から始めてから、他のルートを理解して見つけるためにアプリケーションのコアを見てみることをお勧めします。
Simorghアプリケーションから単独でコンポーネントを開発するためのストーリーブックを使用しています。 https://bbc.github.io/simorgh/でアクセスできます
地元のyarn storybookを実行するには、http：// localhost：9001/で入手できます。ストーリーブックの紹介とドキュメントはhttps://storybook.js.org/basics/introduction/をご覧ください。
ビデオストーリーをローカルに表示するときは、変更するリクエストの場所セクションで概説されているように、必ずBBCドメインを使用してください。この理由で、上記の上記のストーリーブックのホストバージョンでは動画は機能しません。
また、Chromatic QAを使用して、ストーリーでクロスブラウザーテストを実行します。
また、フォントでレンダリングされたコンポーネントを確認する場合は、キャンバスの塗り直しを強制する必要があることに注意してください。これは、フォントのすべてがoptionalのfont-displayプロパティを持っているか、ここでそれぞれのロード戦略に従ってswapためです：https：//ws-downloads.files.bbci.co.uk/fonts/index.html。塗り直しを強制する最も簡単な方法は、プレビューウィンドウの間に仕切りを移動するか、 Knobsセクションを移動するか、ブラウザウィンドウのサイズを変更することです。
ローカルネットワークからアクセスできるようにアプリケーションをホストする場合は、こちらの指示に従ってください。
このアプリケーションを生産ビルドでローカルに実行するには、 yarn build && yarn start実行します。
データと静的資産のためにLocalHostを指すアプリケーションをバンドルするyarn buildローカルに使用します。
これは主に、テストおよびライブ環境バンドルを使用してlatestデバッグに使用されます。デバッグを開始する前に、正しい環境の静的資産の場所にバンドルが存在することを確認してください。
LocalHostでテストバンドルを実行するには：
envConfig/test.envで次の値を変更しますLOG_DIR='/var/log/simorgh' to LOG_DIR='log'rm -rf build && yarn build:test && yarn startLocalHostでライブバンドルを実行するには：
envConfig/live.envで次の値を変更しますLOG_DIR='/var/log/simorgh' to LOG_DIR='log'rm -rf build && yarn build:live && yarn start一部の機能は、ユーザーが英国内にあるのか国際的に配置されているのかに依存して、異なる形態を示しています。特定のLocalHost BBCドメインを介してSimorghにアクセスして、特定のバージョンを明示的にリクエストできます。
これらのURLが機能しない場合は、ホストファイルエントリ（ /etc/hostsまたはC:WindowsSystem32driversetchosts ）を追加する必要がある場合があります。
127.0.0.1 localhost.bbc.co.uk
127.0.0.1 localhost.bbc.com
展開時には、 testとlive環境の両方にバンドルを作成するCI環境でmake buildCi実行されます。 2つの環境では、 .env.testまたは.env.liveファイルは、正しいバンドルでアプリケーションを実行するために使用される.envファイルを上書きします。
yarn buildのすべての実行は、レポのバンドル分析ファイルを更新します。バンドルサイズの内訳を表示するには、ブラウザで生成されたHTMLレポートを開きます./reports/webpackBundleReport.htmlこれは、 webpack-bundle-analyzerを介して生成されます。データは、JSON ./reports/webpackBundleReport.jsonとしても利用できます。
Airbnb StyleGuideとざっと並んでおり、Code Formatterとしてきれいなものを使用しています。それらはyarn test:lintで実行できます。
yarn test:unitで実行できるJESTユニットテストがあります。
yarn testこれらの両方のセットを実行します。
エンドツーエンドのテストにはサイプレスを使用します。煙テストをローカルで実行するには、この単一のコマンドを実行します。
yarn test:e2e
ポート7080の生産サーバーをスピンアップし、それに対してサイプレステストを実行します。煙検査をインタラクティブに実行するには、実行してください。
yarn test:e2e:interactive
これにより、テストが実行されると、ブラウザの視覚的なストリームと一緒に個々のテストを簡単に実行できるユーザーインターフェイスがロードされます。
テストスイートで使用できるいくつかの環境変数があります。
| 環境変数 | 効果 | 考えられる値 |
|---|---|---|
| cypress_only_service | 指定されたサービスのみを実行することを制限します | 単一のサービス、つまりCYPRESS_ONLY_SERVICE=urdu |
| cypress_app_env | 特定の環境でテストを実行します | test 、 local 、 live |
| cypress_smoke | 真の場合、スモークテストのみを実行します | true 、 false |
| cypress_uk | 英国でライブに対してE2Eを実行していることを参照してください | true 、 false |
| cypress_skip_eu | EU以外でE2Eを実行していることを参照してください | true 、 false |
これらのコマンドは組み合わせて実行できます。
E2Eスイート、つまりyarn test:e2eまたはyarn test:e2e:interactiveテストのサブセットを実行します。完全なスイートを実行するには：
CYPRESS_SMOKE=false yarn test:e2e
テストは、 CYPRESS_ONLY_SERVICE環境変数を使用して指定することにより、単一のサービスのみで実行されるように制限できます。例えば：
CYPRESS_ONLY_SERVICE=urdu yarn test:e2e
特定の仕様のみを実行するには、サイプレスを直接呼び出す必要があります。まず、Simorghがすでに別のタブで実行されていることを確認してから実行します（たとえば、記事テストのみを実行するため）：
npx cypress run --spec cypress/integration/pages/articles/index.js
サイプレスCLIの使用の詳細については、https：//docs.cypress.io/guides/guides/command-line.htmlをご覧ください。
これは、英国に拠点を置く開発者のみに影響を与えます（ただし、英国を介してVPNルーティングを使用している場合に影響を与える可能性があります）
Cypress .visit（）関数は、テストごとに単一のドメインにアクセスするためにロックされています。これは、 .comから.co.ukへのリダイレクトにより、英国内からE2Eテストを起動すると問題があります。デフォルトでは、サイプレステストは、英国外で実行されているかのように実行されます。英国からこれらのテストを実行するには、 UKサイプレス環境変数でテストに合格する必要があります。これにより、URLエンディングが.co.ukに置き換えられ、これらのテストを正常に実行できるようになります。
これがコマンドの例です。
CYPRESS_APP_ENV=test CYPRESS_UK=true CYPRESS_SMOKE=true yarn cypress
これは、EUに基づいた開発者に影響を与えます（ただし、EUではなく国を介してVPNルーティングを使用している場合、あなたに影響を与える可能性があります）
EU外でサイプレステストを実行しても、AMPにEUの同意バナーが表示されないため、一部のテストが失敗する可能性があります。 CYPRESS_SKIP_EU=trueを設定して、これらのテストがEU外で実行されるのを防ぎます。
例コマンドは次のとおりです。
CYPRESS_SKIP_EU=true yarn cypress:interactive
次のコマンドは、シモーグとサイプレスの両方を実行します。
CYPRESS_APP_ENV=local CYPRESS_UK=true CYPRESS_SMOKE=true yarn test:e2e
cypress_app_envは、「テスト」と「ライブ」に等しく設定することもできます。 cypress_smokeは真または偽である可能性があります。デフォルトでは真実であり、テストの特定のサブセットを実行します。
灯台を使用して、ページのパフォーマンスをテストします。しかし、これらはシモーグから私たち自身の内部CDプロセスに移動しました。これにより、Simorghのより正確な描写でこれらのテストを実行できます。クロムブラウザから自由に灯台を自分で実行するか、ノード灯台CLIを使用できます。
ペルシャの神話の鳥にちなんでシモーグと名付けられました。シモーグは、多くの鳥（および一部のアカウントでは他の動物）のアマルガムです。
幸いなことに、すべてのBBCの記事を1つのソリューションで提供するのに適していると思われるメタファーは、アプリケーションが進化してより多くのコンテンツタイプをサポートするため、おそらくさらに適切です。また、チームの国際的な性質への明確な言及でもありますが、BBCがサポートしているすべての言語のユーザーに記事（および続いているすべてのもの）が機能することを保証したいという願望への言及でもあります。
また、実用的で、より表面的には鳥がとてもきれいなユニークな名前です。
