simorgh
Release 4.2049.0
Os sites da BBC World Service News são renderizados usando o Simorgh, um aplicativo baseado em ReactJS. Simorgh também renderiza as páginas do artigo do AMP News para o Serviço Mundial, Notícias do Serviço Público e BBC Sport.
O Simorgh fornece uma experiência na web rápida e acessível usada por milhões de pessoas em todo o mundo a cada mês (consulte a lista de sites usando o Simorgh). É mantido regularmente e bem documentado, e recebemos colaboradores de código aberto.
Simorgh é mantido principalmente pelas equipes de engenharia da Web da BBC News. Ele oferece notícias altamente confiáveis aos leitores de todo o mundo, atualmente em (41 idiomas). Apoiamos uma ampla gama de dispositivos e cuidamos profundamente sobre escala, desempenho e acessibilidade. Trabalhamos em equipes ágeis e flexíveis e temos um roteiro emocionante para o desenvolvimento futuro.
Por favor, familiarize -se com o nosso:
NB Há uma documentação adicional colocada com código relevante. A lista acima é um índice da documentação de nível superior do nosso repositório.
Uma solicitação para um artigo da BBC (https://www.bbc.co.uk/news/articles/clldg965yzjo) é repassado ao aplicativo Simorgh a partir de um serviço de roteamento e cache de propriedade (chamado Moszarto).
A solicitação corresponde a uma rota em nosso servidor expresso usando uma correspondência regex ( articleRegexPath || frontPageRegexPath ). Se o URL corresponder ao padrão regex predefinido para um artigo ou uma primeira página, buscamos alguns parâmetros da rota usando a função getRouteProps . Isso retorna o serviço, Isamp, rota e correspondência de propriedades. A rota é uma rota de reagência que define um método para buscar o JSON inicial usado para renderizar a página e o recipiente de reação para renderizar, ou seja, ArticleContainer , isso é tipicamente chamado de getInitialData
Depois que os dados são retornados, puxamos o código de status e passamos todos esses dados como adereços para o nosso documento principal usando renderDocument .
O documento passa o URL, JSON Data, BBC Origin, Isamp e o Serviço para o contêiner principal do aplicativo e o resultado é renderizado a uma string usando o método renderToString próprio reage. Essa sequência é passada para o DocumentComponent como o aplicativo principal junto com a matriz de ativos, tags de estilo (a saída de componentes estilizados) e quaisquer scripts/links que precisam ser adicionados à cabeça. Isso é então renderizado para a marcação estática HTML usando o reage renderToStaticMarkup e enviado de volta ao usuário como HTML estático. Incluídos nesta resposta estão os links para nossos pacotes JS, que um dispositivo de usuários baixará para Bootstrap o aplicativo de página única (SPA) para viagens subsequentes.
Agora que o HTML bruto foi baixado, o arquivo JS do lado do cliente entra em ação e hidrata a resposta inicial com o aplicativo do lado do cliente. Durante esse processo, o React usa a carga útil inicial do JSON (disponível no objeto global da janela SIMORGH_DATA ) para hidratar a marcação original retornada pelo ReactDomServer. O React espera que o conteúdo renderizado seja idêntico entre o servidor e o cliente (é por isso que enviamos a carga útil JSON inicial com a página SSR, portanto a fase de hidratação é executada com os mesmos dados que o servidor renderiza).
A carga útil do JSON para um artigo consiste em vários blocos. Cada bloco é um objeto que representa um elemento na página, isso pode ser um título, uma imagem, um parágrafo etc. Cada um desses blocos possui um tipo de bloco e um tipo de bloco corresponderá a um contêiner específico no Simorgh, por exemplo, blocktype: a imagem corresponderá ao contêiner de imagem.
O contêiner ArticleMain irá iterar em cada bloco JSON, combinará com seu contêiner React correspondente e passará os dados por meio de adereços. Esses contêineres são onde fica a lógica para renderizar cada tipo de bloco. É nesse ponto que usamos os componentes de front -end instalados na biblioteca de componentes do PSAMMEAD. Por exemplo, o contêiner de imagem importará o contêiner da figura e a figura importará e usará os componentes de imagem PSAMMEAD e PSAMMEAD-REMAGEM-PLATEPLOTER. Uma imagem em um artigo geralmente terá uma legenda, para que o contêiner da figura importe o contêiner de legenda, que pode incluir mais componentes de front -end do Psammead para renderizar uma legenda na parte superior da imagem.
Esse processo é repetido para cada bloco dentro de um artigo, renderizando o corpo principal de um artigo de notícias usando uma combinação de contêineres do React para a lógica de negócios e componentes de reação para a marcação de front -end.
Cada renderização é passada através de um conjunto de hoc (componentes de ordem superior) para aprimorar a página, esses hoc são;
Com uma seleção de tipos de página passados com o OptimizelyProvider, que permite o uso de otimizamente nos tipos de página selecionados.
A variante Hoc garante que os serviços que tenham variantes (por exemplo, simp , lat ) sempre redirecionem para um URL que torna a variante apropriada.
Se um usuário navega para um URL sem fornecer a variante e a variante será definida no cookie, a página da variante de cookie será renderizada. Caso contrário, a página da variante padrão é renderizada
Se um usuário navegar para um URL com uma variante e a variante for definida no cookie, a página da variante de cookie será renderizada. Caso contrário, a página variante solicitada é renderizada.
O WithContexts Hoc é um invólucro que fornece acesso aos diferentes provedores de contexto disponíveis no aplicativo. Qualquer componente infantil dentro desses provedores de contexto tem acesso aos dados de contexto através do useContexts Hook.
O hoc de wrapper de página simplesmente envolve o artigo ou os contêineres da página frontal com um layout, atualmente temos apenas um layout de página. Esse layout inclui os provedores de cabeçalho, rodapé e contexto, renderizando o corpo principal quando criança entre o cabeçalho e o rodapé.
O erro hoc verifica o erro de erro passado, se o erro for definido como anular o artigo ou o contêiner da página frontal for simplesmente retornado.
Se o erro for definido como true, o componente de erro será retornado, dando ao usuário uma indicação visual do erro, por exemplo, uma página de erro 500.
Supondo que os outros hoc retornassem o artigo original ou o contêiner da página frontal, o Hoc de dados executará algumas verificações de validação nos dados JSON passados através do suporte de dados. Se todos os cheques forem satisfeitos, o ArticleContainer será devolvido com um único suporte pageData . Esses adereços da Pagedata abrigarão os dados do JSON a serem renderizados, por exemplo, os blocos Optimo para um determinado artigo.
O hoc do WithHashChangeHandler é um invólucro aplicado a todas as páginas que verifica as alterações no valor do hash de URL. As páginas incluem controles de acessibilidade para pular o conteúdo, caso o usuário opte por fazê -lo, isso utiliza o hash de URL para pular os usuários para áreas específicas da página. Devido à natureza do roteamento do lado do cliente, as alterações no URL resultam em uma renderização. Isso causa alguns truques desagradáveis da interface do usuário para alguns componentes, especificamente mídia e incorporações sociais. Este hoc aplica verificações ao URL, portanto, veja se uma renderização é necessária, ou se não impedir uma renderização de renda usando React.memo .
Os componentes do WithOptimizelyProvider retorna componentes que foram aprimorados com o acesso a um cliente otimizamente usado para executar nossos testes de A/B. Isso é feito para limitar o tamanho do pacote, pois separamos alguns de nossos pacotes por tipo de página, isso significa que, se estivermos executando apenas testes A/B em determinados tipos de página, podemos evitar feixes de tipo de página poluindo com o peso da biblioteca SDK que usamos para otimizar.
WithOtimizelyProvider deve ser adicionado como o valor da chave do objeto handlerBeforeContexts no ApplyBasicPageHandlers.js, pois o ckns_mvt é definido dentro da UserContext, portanto, o hoc com o hoc withOptimizelyProvider precisa ser aplicado na ordem correta ao lado do CONTECTS HOC. Isso disponibiliza o ckns_mvt nas visitas iniciantes para passar para o OptimizelyProvider , juntamente com atributos como service , que é usado para determinar quando o Optimizely deve ativar um experimento.
Exemplo para a página do artigo:
import withOptimizelyProvider from '#app/legacy/containers/PageHandlers/withOptimizelyProvider' ;
import ArticlePage from './ArticlePage' ;
import applyBasicPageHandlers from '../utils/applyBasicPageHandlers' ;
export default applyBasicPageHandlers ( ArticlePage , {
handlerBeforeContexts : withOptimizelyProvider ,
} ) ;Ao adicionar um novo tipo de página, são necessárias várias peças.
/data/{{service}}/{{pageType}}/.jsonlocalhost:7080/igbo.json deve ter os dados para construir a página de índice localhost:7080/igbomain com um flex-grow: 1; Declaração do CSS, para garantir que cresça para preencher o espaço entre o cabeçalho visual e o rodapé, o Div Root usando a implementação do FlexBox 'pegajosa rodapé'. cypress/support/config/settings.js para cada serviço (mesmo que defina o novo tipo de página como indefinido)cypress/integration/pages/cypress/integration/pages/ você deverá garantir que os oleodutos E2E sejam atualizados para executar o novo Teste de especificação E2E Pipeline & LIVE E2E PipelineNB: Com essas etapas, sugere -se ter vários PRs ao adicionar um novo tipo de página para não ter um enorme RP singular. No entanto, se os testes do Cypress (#6) não forem adicionados no mesmo PR que o roteamento da página (#5), eles devem seguir imediatamente o roteamento de página PR, idealmente, eles devem ser tratados em um único PR.
Por favor, leia: Contribuindo.md
Instale o nó. https://nodejs.org/en/. Usamos a versão especificada no .nvmrc e se você tiver um Node Version Manager (NVM), poderá executar o seguinte script para alterar automaticamente para a versão suportada pelo projeto.
nvm use
O Projeto Simorgh usa fios para gerenciamento de pacotes. Recomenda -se instalar fios através do NPM Package Manager, que vem com o Node.js quando você o instala no seu sistema. Para instalar o fio, execute este comando:
npm install --global yarn
Então você pode executar os seguintes comandos para instalar o Simorgh
git clone [email protected]:bbc/simorgh.git
cd simorgh
yarn install
Para executar este aplicativo localmente, com reloadia a quente, execute
yarn dev
O aplicativo começará em http: // localhost: 7080.
As páginas do artigo são servidas em rotas do formato /news/articles/:id onde o ID é o ID do ativo gerado pelo sistema de gerenciamento de conteúdo.
FYI: artigo explicando o uso de IDs pela BBC em URL
Esses dois artigos de notícias estão disponíveis no ambiente de teste de nosso CMS e localmente, por isso são frequentemente usados para testar:
Também estamos servindo páginas de amp html na rota /news/articles/:id.amp https://www.ampproject.org
Serviços com variantes não podem ser acessados usando o formato acima; em vez disso, a variante deve ser fornecida no URL.
As páginas de frente do Serviço Mundial são servidas no formato /:service em que service representa um site de serviço mundial:
As páginas de frente do Serviço Mundial também seguem o formato do artigo para amplificador, estar disponível em /:service.amp :
Serviços com variantes não podem ser acessados usando o formato acima; em vez disso, a variante deve ser fornecida no URL.
As páginas de tópicos usam APIs internas da BBC que não são acessíveis ao público. Isso pode fazer com que os seguintes avisos apareçam ao desenvolver localmente:
No BFF_PATH set as environment variable, you will not have access to topics
Os desenvolvedores internos que precisam trabalhar nas páginas de tópico localmente devem entrar em contato com a equipe para acessar.
As recomendações nas páginas da história também usam as APIs internas dos laboratórios de dados da BBC. Requer adicionar o par de chaves/valores no arquivo envConfig/secret.env para que eles apareçam localmente.
Os desenvolvedores internos que precisam trabalhar nas páginas do artigo localmente devem entrar em contato com a equipe para acessar.
Você pode encontrar outros tipos de páginas, olhando através de nossas rotas e seus associados Regexes, mas sugerimos que você comece com o acima e dê uma olhada no núcleo do aplicativo para entender e encontrar as outras rotas.
Usamos o Storybook para o desenvolvimento de componentes isoladamente do aplicativo Simorgh. Você pode acessar isso em https://bbc.github.io/simorgh/
Para executar yarn storybook localmente, ele estará disponível em http: // localhost: 9001/. Introdução e documentação para o StoryBook Is aqui: https://storybook.js.org/basics/introduction/.
Ao visualizar histórias de vídeo localmente, use um domínio BBC, conforme descrito na seção de localização de solicitações de mudança. O vídeo não funcionará na versão hospedada do Storybook Linked acima por esse motivo.
Também usamos o controle de qualidade cromático para executar testes de navegador cruzado em nossas histórias.
Observe também que, se você deseja ver os componentes renderizados com nossas fontes, precisará forçar uma repintura da tela. Isso ocorre porque todas as fontes têm a propriedade font-display de optional ou swap de acordo com as respectivas estratégias de carregamento aqui: https://ws-doscoads.files.bbci.co.uk/fonts/index.html. A maneira mais fácil de forçar uma repintura é apenas mover o divisor entre a janela de visualização da seção e Knobs ou redimensionar a janela do navegador.
Se você deseja hospedar o aplicativo para estar acessível através da sua rede local, siga as instruções aqui.
Para executar este aplicativo localmente com uma construção de produção, execute: yarn build && yarn start .
Utilizamos yarn build localmente, o que agrupa o aplicativo apontando para localhost para obter dados e ativos estáticos.
Isso é usado principalmente para depurar latest usando os pacotes de teste e ambiente ao vivo. Certifique -se de que os pacotes existam no local estático de ativos para o ambiente correto antes de começar a depurar.
Para executar pacotes de teste no host:
envConfig/test.env altera os valores de:LOG_DIR='/var/log/simorgh' para LOG_DIR='log'rm -rf build && yarn build:test && yarn startPara executar pacotes ao vivo no host de localhost:
envConfig/live.env Altera os valores de:LOG_DIR='/var/log/simorgh' para LOG_DIR='log'rm -rf build && yarn build:live && yarn startAlguns recursos têm um desempenho diferente dependendo de um usuário estar localizado no Reino Unido ou internacionalmente. Você pode solicitar explicitamente uma versão específica acessando o Simorgh por meio de um domínio BBC específico da BBC:
Se esses URLs não funcionarem, pode ser necessário adicionar uma entrada de arquivo de hosts ( /etc/hosts ou C:WindowsSystem32driversetchosts ):
127.0.0.1 localhost.bbc.co.uk
127.0.0.1 localhost.bbc.com
Na implantação, make buildCi é executado no ambiente de IC, que cria pacotes para os ambientes test e live . Nos dois ambientes, os arquivos .env.test ou .env.live substituem o arquivo .env que é usado para executar o aplicativo com os pacotes corretos.
Toda corrida de yarn build atualizará os arquivos de análise de pacote no repositório. Para visualizar um detalhamento do tamanho do pacote, abra o relatório HTML gerado em um navegador ./reports/webpackBundleReport.html Isso é gerado via webpack-bundle-analyzer . Os dados também estão disponíveis como json ./reports/webpackBundleReport.json .
Temos o linhagem com o Airbnb StyleGuide e usamos mais bonito como formatador de código. Eles podem ser executados com yarn test:lint .
Temos testes de unidade de brincadeira que podem ser executados com yarn test:unit .
yarn test executa os dois conjuntos desses.
Usamos o CYPRESS para nossos testes de ponta a ponta. Para executar os testes de fumaça localmente, execute este comando único:
yarn test:e2e
Ele aumentará um servidor de produção na porta 7080 e executará os testes do Cypress contra isso. Para executar os testes de fumaça interativamente, execute:
yarn test:e2e:interactive
Isso carrega uma interface de usuário que permite facilmente que testes individuais sejam executados ao lado de um fluxo visual do navegador, conforme os testes executam.
Existem várias variáveis ambientais que você pode usar com nossa suíte de teste, que são:
| Variável de ambiente | Efeito | Valores possíveis |
|---|---|---|
| Cypress_only_service | Restringe a execução apenas do serviço especificado | Um único serviço, ou seja, CYPRESS_ONLY_SERVICE=urdu |
| Cypress_app_env | Executa os testes em um ambiente específico | test , local , live |
| Cypress_smoke | Executa apenas testes de fumaça se for verdade | true , false |
| Cypress_uk | Veja a execução de E2es no Reino Unido contra o Live | true , false |
| Cypress_skip_eu | Veja a execução de E2es fora da UE | true , false |
Esses comandos podem ser executados em combinação.
A maneira padrão de executar o E2E Suite, também conhecido como yarn test:e2e ou yarn test:e2e:interactive executa um subconjunto de nossos testes, caso contrário, conhecido como testes de fumaça . Para executar a suíte completa:
CYPRESS_SMOKE=false yarn test:e2e
Os testes podem ser restritos a executar apenas um único serviço, especificando -o usando a variável de ambiente CYPRESS_ONLY_SERVICE . Por exemplo:
CYPRESS_ONLY_SERVICE=urdu yarn test:e2e
Para executar apenas uma especificação específica, é necessário invocar o cipreste diretamente. Primeiro, certifique -se de que o Simorgh já está em execução em outra guia e depois execute (por exemplo, para executar apenas os testes de artigo):
npx cypress run --spec cypress/integration/pages/articles/index.js
Mais detalhes sobre o uso da CLI do Cypress podem ser encontrados em https://docs.cypress.io/guides/guides/command-line.html
Isso afeta os desenvolvedores baseados apenas no Reino Unido (mas pode afetá -lo se você estiver usando um roteamento de VPN no Reino Unido)
A função Cypress .Visit () é bloqueada para visitar um único domínio por teste. Isso se torna problemático quando você inicia os testes E2E de dentro do Reino Unido, devido a redirecionamentos de .com para .co.uk . Por padrão, os testes do Cypress serão executados como se tivessem sido executados fora do Reino Unido. Para executar esses testes do Reino Unido, você deve passar na variável de ambiente do Cypress UK para os testes. Isso substituirá as extremidades do URL para .co.uk , que permitirá que você execute esses testes com sucesso.
Aqui está um comando de exemplo:
CYPRESS_APP_ENV=test CYPRESS_UK=true CYPRESS_SMOKE=true yarn cypress
Isso afeta os desenvolvedores baseados na UE (mas podem afetá -lo se você estiver usando um roteamento de VPN através de um país não na UE)
A execução de testes de cipreste fora da UE não mostrará os banners de consentimento da UE no AMP, e isso pode causar a falha de alguns testes. Defina CYPRESS_SKIP_EU=true para impedir que esses testes sejam executados quando fora da UE.
Um comando de exemplo será:
CYPRESS_SKIP_EU=true yarn cypress:interactive
O comando a seguir executa o Simorgh e o Cypress:
CYPRESS_APP_ENV=local CYPRESS_UK=true CYPRESS_SMOKE=true yarn test:e2e
Cypress_App_env também pode ser definido igual a 'teste' e 'viva'. Cypress_smoke pode ser verdadeiro ou falso. É verdade por padrão e executa um subconjunto específico de testes.
Usamos Lighthouse para testar o desempenho da nossa página. No entanto, estes foram retirados de Simorgh para nossos próprios processos internos de CD. Isso nos permite executar esses testes em uma representação mais precisa do Simorgh. Você é livre para correr por farol por conta própria do seu navegador Chrome ou usar a CLI do Lighthouse do nó.
Nomeado Simorgh após o pássaro mitológico persa. O Simorgh é o amálgama de muitos pássaros (e em alguns relatos de outros animais) em um.
Felizmente, uma metáfora que parecia adequada para oferecer todos os artigos da BBC em uma solução agora é ainda mais apropriada à medida que o aplicativo evolui para suportar mais tipos de conteúdo. É também uma referência clara à natureza internacional de nossas equipes, mas também ao desejo de garantir que os artigos (e tudo o que se seguem) funcionem para usuários em todos os idiomas que a BBC suporta.
É também um nome único que é prático e, mais superficialmente, o pássaro é muito bonito.
