simorgh
Release 4.2049.0
Situs web berita BBC World Service diterjemahkan menggunakan Simorgh, aplikasi berbasis ReactJS. Simorgh juga membuat halaman artikel berita amp untuk layanan dunia, berita layanan publik, dan olahraga BBC.
Simorgh menyediakan pengalaman web yang cepat dan mudah diakses yang digunakan oleh jutaan orang di seluruh dunia setiap bulan (lihat daftar situs web menggunakan Simorgh). Ini dikelola secara teratur dan didokumentasikan dengan baik, dan kami menyambut kontributor open source.
Simorgh terutama dikelola oleh tim teknik web BBC News. Ini memberikan berita yang sangat tepercaya kepada pembaca di seluruh dunia, saat ini dalam (41 bahasa). Kami mendukung berbagai perangkat dan sangat peduli tentang skala, kinerja, dan aksesibilitas. Kami bekerja di tim yang gesit dan fleksibel, dan memiliki peta jalan yang menarik untuk pengembangan di masa depan.
Mohon biasakan diri Anda dengan kami:
NB Ada dokumentasi lebih lanjut yang dikoleksi dengan kode yang relevan. Daftar di atas adalah indeks dokumentasi tingkat atas dari repo kami.
Permintaan ke artikel BBC (https://www.bbc.co.uk/news/articles/clldg965yzjo) diteruskan ke aplikasi Simorgh dari layanan perutean dan caching milik (disebut Mozart).
Permintaan cocok dengan rute di server Express kami menggunakan Regex Match ( articleRegexPath || frontPageRegexPath ). Jika URL cocok dengan pola regex yang telah ditentukan sebelumnya untuk sebuah artikel atau halaman depan, kami mengambil beberapa param dari rute menggunakan fungsi getRouteProps . Ini mengembalikan properti layanan, isamp, rute, dan kecocokan. Rute adalah rute-react-router yang mendefinisikan metode untuk mengambil JSON awal yang digunakan untuk membuat halaman dan wadah bereaksi untuk membuat ArticleContainer , ini biasanya disebut getInitialData
Setelah data dikembalikan, kami menarik kode status dan meneruskan semua data ini sebagai alat peraga ke dokumen utama kami menggunakan renderDocument .
Dokumen tersebut melewati data URL, JSON, asal BBC, ISAMP dan layanan ke wadah aplikasi utama dan hasilnya diberikan ke string menggunakan metode renderToString reacts sendiri. String ini kemudian diteruskan ke DocumentComponent sebagai aplikasi utama bersama dengan array aset, tag gaya (output dari komponen gaya) dan skrip/tautan apa pun yang perlu ditambahkan ke kepala. Ini kemudian diterjemahkan ke markup HTML statis menggunakan reacts sendiri renderToStaticMarkup dan dikirim kembali ke pengguna sebagai html statis. Termasuk dalam respons ini adalah tautan ke bundel JS kami yang akan diunduh oleh perangkat pengguna untuk bootstrap aplikasi satu halaman (SPA) untuk perjalanan berikutnya.
Sekarang HTML mentah telah diunduh, file JS sisi klien menendang dan melembabkan respons awal dengan aplikasi sisi klien. Selama proses ini React menggunakan payload JSON awal (tersedia di objek jendela global SIMORGH_DATA ) untuk menghidrasi markup asli yang dikembalikan oleh ReactdomServer. React mengharapkan bahwa konten yang diberikan identik antara server dan klien (inilah mengapa kami mengirim muatan JSON awal dengan halaman SSR, sehingga fase hidrasi berjalan dengan data yang sama dengan yang digunakan server).
Payload JSON untuk sebuah artikel terdiri dari sejumlah blok. Setiap blok adalah objek yang mewakili elemen pada halaman, ini bisa berupa heading, gambar, paragraf dll. Masing -masing blok ini memiliki jenis blok dan tipe blok akan cocok dengan wadah spesifik dalam bloktype simorgh misalnya: gambar akan cocok dengan wadah gambar.
Wadah Articlemain akan mengulangi setiap blok JSON, mencocokkannya dengan wadah bereaksi yang sesuai dan meneruskan data melalui alat peraga. Wadah -wadah ini adalah tempat logika untuk membuat setiap jenis blok duduk. Pada titik inilah kami menggunakan komponen frontend yang diinstal dari pustaka komponen psmead. Misalnya, wadah gambar akan mengimpor wadah gambar, dan gambar akan mengimpor dan menggunakan psammead-image dan komponen pemegang pemegang PSAMMEAD-IMAGE. Gambar pada artikel umumnya akan memiliki keterangan, sehingga wadah gambar akan mengimpor wadah teks yang mungkin termasuk lebih banyak komponen frontend dari PSAMMEAD untuk membuat keterangan di atas gambar.
Proses ini diulangi untuk setiap blok dalam sebuah artikel, yang pada akhirnya menjadikan badan utama sebuah artikel berita menggunakan kombinasi wadah bereaksi untuk logika bisnis dan komponen React untuk markup frontend.
Setiap render dilewatkan melalui satu set hoc (komponen tingkat tinggi) untuk meningkatkan halaman, hoc ini adalah;
Dengan pilihan jenis halaman yang dilewati dengan opoptimizeelyprovider, yang memungkinkan penggunaan optimis pada jenis halaman yang dipilih.
Varian hoc memastikan bahwa layanan yang memiliki varian (misalnya simp , lat ) selalu mengarahkan kembali URL yang membuat varian yang sesuai.
Jika pengguna menavigasi ke URL tanpa memberikan varian, dan varian diatur dalam cookie, halaman varian cookie diberikan. Kalau tidak, halaman varian default diberikan
Jika pengguna menavigasi ke URL dengan varian, dan varian diatur dalam cookie, halaman varian cookie diberikan. Kalau tidak, halaman varian yang diminta diberikan.
HocContexts Hoc adalah pembungkus yang menyediakan akses ke berbagai penyedia konteks yang tersedia dalam aplikasi. Setiap komponen anak di dalam penyedia konteks ini memiliki akses ke data konteks melalui hook usecontexts.
Hok pembungkus halaman cukup membungkus artikel atau wadah depan dengan tata letak, saat ini kami hanya memiliki tata letak satu halaman. Tata letak ini mencakup header, footer dan penyedia konteks yang menjadikan tubuh utama sebagai seorang anak antara header dan footer.
Kesalahan HOC memeriksa prop kesalahan yang dilewati, jika kesalahan diatur ke nol artikel atau wadah depan hanya dikembalikan.
Jika kesalahan diatur ke true, komponen kesalahan dikembalikan, memberi pengguna indikasi visual dari kesalahan misalnya halaman kesalahan 500.
Dengan asumsi HOC lain telah mengembalikan artikel asli atau kontainer frontpage Hoc data akan menjalankan beberapa pemeriksaan validasi pada data JSON yang dilewati melalui prop data. Jika semua cek terpenuhi, Articlecontainer akan dikembalikan dengan satu prop pageData . Props Pagedata ini akan menampung data JSON untuk diberikan misalnya blok optimo untuk artikel yang diberikan.
Hoc withhashchangeHandler adalah pembungkus yang diterapkan pada semua halaman yang memeriksa perubahan nilai hash url. Halaman termasuk kontrol aksesibilitas untuk melewatkan konten jika pengguna memilih untuk melakukannya, ini menggunakan hash URL untuk melewatkan pengguna ke area tertentu dari halaman. Karena sifat perutean sisi klien, perubahan pada URL menghasilkan render ulang. Ini menyebabkan beberapa UI yang tidak sedap dipandang berkedip -kedip untuk beberapa komponen, khususnya media dan embed sosial. HOC ini berlaku cek ke URL jadi lihat apakah render ulang diperlukan, atau jika tidak mencegah render ulang menggunakan React.memo .
Komponen pengembalian hoc dengan optimisyprovider yang telah ditingkatkan dengan akses ke klien yang optimis, yang digunakan untuk menjalankan pengujian A/B kami. Ini dilakukan untuk membatasi ukuran bundel, karena kami memisahkan beberapa bundel kami berdasarkan jenis halaman, itu berarti jika kami hanya menjalankan pengujian A/B pada jenis halaman tertentu, kami dapat mencegah bundel jenis halaman yang berpolusi dengan berat pustaka SDK yang kami gunakan untuk optimis.
WithOptimizyelyProvider harus ditambahkan sebagai nilai objek handlerBeforeContexts di dalam ApplyBasicPageHandlers.js, karena ckns_mvt diatur dalam UserContext, sehingga HOC yang tidak dapat withOptimizelyProvider untuk diterapkan dalam urutan yang benar bersama dengan hoc dengan hoc. Hal ini membuat ckns_mvt tersedia pada kunjungan pertama kali untuk masuk ke OptimizelyProvider , bersama dengan atribut seperti service , yang digunakan untuk menentukan kapan Optimizely harus memungkinkan percobaan.
Contoh untuk halaman artikel:
import withOptimizelyProvider from '#app/legacy/containers/PageHandlers/withOptimizelyProvider' ;
import ArticlePage from './ArticlePage' ;
import applyBasicPageHandlers from '../utils/applyBasicPageHandlers' ;
export default applyBasicPageHandlers ( ArticlePage , {
handlerBeforeContexts : withOptimizelyProvider ,
} ) ;Saat menambahkan jenis halaman baru, ada beberapa bagian yang diperlukan.
/data/{{service}}/{{pageType}}/.jsonlocalhost:7080/igbo.json harus memiliki data untuk membangun halaman indeks localhost:7080/igbomain dengan flex-grow: 1; Deklarasi CSS, ini untuk memastikan ia tumbuh untuk mengisi ruang antara header dan footer visual, root div menggunakan implementasi flexbox 'sticky footer'. cypress/support/config/settings.js untuk setiap layanan (bahkan jika untuk mengatur jenis halaman baru yang tidak ditentukan)cypress/integration/pages/cypress/integration/pages/ Anda harus memastikan pipa E2E diperbarui untuk menjalankan uji spec baru pipa E2E & pipa Live E2ENB: Dengan banyak langkah ini disarankan untuk memiliki banyak PR saat menambahkan jenis halaman baru agar tidak memiliki PR besar tunggal. Namun, jika tes Cypress (#6) tidak ditambahkan dalam PR yang sama dengan routing halaman (#5) mereka harus segera mengikuti halaman perutean halaman, idealnya ini harus ditangani dalam satu PR tunggal.
Harap Baca: Kontribusi.MD
Instal Node. https://nodejs.org/en/. Kami menggunakan versi yang ditentukan dalam .nvmrc dan jika Anda memiliki Node Version Manager (NVM), Anda dapat menjalankan skrip berikut untuk secara otomatis mengubah ke versi yang didukung proyek.
nvm use
Proyek Simorgh menggunakan benang untuk manajemen paket. Disarankan untuk menginstal benang melalui NPM Package Manager, yang dilengkapi dengan node.js saat Anda menginstalnya di sistem Anda. Untuk menginstal benang, jalankan perintah ini:
npm install --global yarn
Kemudian Anda dapat menjalankan perintah berikut untuk menginstal Simorgh
git clone [email protected]:bbc/simorgh.git
cd simorgh
yarn install
Untuk menjalankan aplikasi ini secara lokal, dengan hot-reloading, jalankan
yarn dev
Aplikasi akan dimulai pada http: // localhost: 7080.
Halaman artikel disajikan di rute format /news/articles/:id di mana ID adalah ID aset yang dihasilkan oleh sistem manajemen konten.
FYI: Artikel yang menjelaskan penggunaan ID BBC dalam URL
Dua artikel berita ini tersedia di lingkungan pengujian CMS kami, serta secara lokal, jadi sering digunakan untuk pengujian:
Kami juga melayani halaman html amp di route /news/articles/:id.amp https://www.ampproject.org
Layanan dengan varian tidak dapat diakses menggunakan format di atas, sebaliknya varian harus disediakan dalam URL.
Halaman depan layanan dunia dilayani dalam format /:service di mana service mewakili situs layanan dunia:
Halaman Depan Layanan Dunia Ikuti format artikel untuk AMP juga, tersedia di /:service.amp :
Layanan dengan varian tidak dapat diakses menggunakan format di atas, sebaliknya varian harus disediakan dalam URL.
Halaman Topik Gunakan API BBC internal yang tidak dapat diakses secara publik. Ini dapat menyebabkan peringatan berikut muncul saat berkembang secara lokal:
No BFF_PATH set as environment variable, you will not have access to topics
Pengembang internal yang perlu bekerja di halaman topik secara lokal harus menghubungi tim untuk akses.
Rekomendasi di halaman cerita juga menggunakan API BBC Data Labs internal. Ini membutuhkan penambahan file kunci/nilai di file envConfig/secret.env agar mereka muncul secara lokal.
Pengembang internal yang perlu bekerja di halaman artikel secara lokal harus menghubungi tim untuk akses.
Anda dapat menemukan jenis halaman lain dengan melihat rute kami dan rekan mereka Regexes, tetapi kami sarankan Anda mulai dengan yang di atas kemudian melihat inti aplikasi untuk memahami dan menemukan rute lainnya.
Kami menggunakan Storybook untuk mengembangkan komponen secara terpisah dari aplikasi Simorgh. Anda dapat mengakses ini di https://bbc.github.io/simorgh/
Untuk menjalankan yarn storybook Lokal, kemudian akan tersedia di http: // localhost: 9001/. Pengantar dan dokumentasi untuk Storybook ada di sini: https://storybook.js.org/basics/introduction/.
Saat melihat cerita video secara lokal, pastikan untuk menggunakan domain BBC, sebagaimana diuraikan di bagian Lokasi Permintaan yang Mengubah. Video tidak akan berfungsi dalam versi Storybook yang di -host yang ditautkan di atas karena alasan ini.
Kami juga menggunakan QA kromatik untuk menjalankan pengujian lintas-browser pada cerita kami.
Harap perhatikan juga bahwa jika Anda ingin melihat komponen yang diberikan dengan font kami, Anda perlu memaksa pengecatan ulang kanvas. Ini karena semua font kami memiliki properti font-display dari optional atau swap sesuai dengan strategi pemuatan masing-masing di sini: https://ws-downloads.files.bbci.co.uk/fonts/index.html. Cara termudah untuk memaksa ulang adalah hanya untuk memindahkan pembagi di antara jendela pratinjau bagian dan Knobs atau mengubah ukuran jendela browser.
Jika Anda ingin meng -host aplikasi agar dapat diakses melalui jaringan lokal Anda, ikuti instruksi di sini.
Untuk menjalankan aplikasi ini secara lokal dengan Build Produksi, Jalankan: yarn build && yarn start .
Kami menggunakan yarn build secara lokal yang mengikat aplikasi yang menunjuk pada localhost untuk data dan aset statis.
Ini terutama digunakan untuk debugging latest menggunakan bundel tes dan lingkungan hidup. Pastikan bundel ada di lokasi aset statis untuk lingkungan yang benar sebelum mulai men -debug.
Untuk menjalankan bundel uji pada localhost:
envConfig/test.env mengubah nilai -nilai dari:LOG_DIR='/var/log/simorgh' ke LOG_DIR='log'rm -rf build && yarn build:test && yarn startUntuk menjalankan bundel langsung di localhost:
envConfig/live.env mengubah nilai -nilai:LOG_DIR='/var/log/simorgh' ke LOG_DIR='log'rm -rf build && yarn build:live && yarn startBeberapa fitur berkinerja berbeda tergantung pada apakah pengguna berada di Inggris atau internasional. Anda dapat secara eksplisit meminta versi tertentu dengan mengakses simorgh melalui domain BBC localhost tertentu:
Jika URL ini tidak berfungsi, Anda mungkin perlu menambahkan entri file host ( /etc/hosts atau C:WindowsSystem32driversetchosts ):
127.0.0.1 localhost.bbc.co.uk
127.0.0.1 localhost.bbc.com
Pada penyebaran make buildCi dijalankan di lingkungan CI yang menciptakan bundel untuk lingkungan test dan live . Pada dua lingkungan .env.test atau .env.live file menimpa file .env yang digunakan untuk menjalankan aplikasi dengan bundel yang benar.
Setiap menjalankan yarn build akan memperbarui file analisis bundel di repo. Untuk melihat rincian ukuran bundel, buka laporan HTML yang dihasilkan di browser ./reports/webpackBundleReport.html ini dihasilkan melalui webpack-bundle-analyzer . Data juga tersedia sebagai json ./reports/webpackBundleReport.json .
Kami berbaris dengan Airbnb StyleGuide dan kami menggunakan lebih cantik sebagai formatter kode. Mereka dapat dijalankan dengan yarn test:lint .
Kami memiliki tes unit jest yang dapat dijalankan dengan yarn test:unit .
yarn test menjalankan kedua set ini.
Kami menggunakan Cypress untuk tes ujung ke ujung kami. Untuk menjalankan tes asap secara lokal, jalankan perintah tunggal ini:
yarn test:e2e
Ini akan memutar server produksi di port 7080 dan menjalankan tes Cypress terhadap itu. Untuk menjalankan tes asap secara interaktif, jalankan:
yarn test:e2e:interactive
Ini memuat antarmuka pengguna yang dengan mudah memungkinkan pengujian individual dijalankan bersama aliran visual browser, saat tes berjalan.
Ada beberapa variabel lingkungan yang dapat Anda gunakan dengan test suite kami, yaitu:
| Variabel Lingkungan | Memengaruhi | Nilai yang mungkin |
|---|---|---|
| Cypress_only_service | Membatasi hanya menjalankan layanan yang ditentukan | Satu layanan yaitu CYPRESS_ONLY_SERVICE=urdu |
| Cypress_app_env | Menjalankan tes di lingkungan tertentu | test , local , live |
| Cypress_smoke | Hanya menjalankan tes asap jika benar | true , false |
| Cypress_uk | Lihat menjalankan e2es di Inggris melawan live | true , false |
| Cypress_skip_eu | Lihat menjalankan e2es di luar UE | true , false |
Perintah ini dapat dijalankan dalam kombinasi.
Cara default untuk menjalankan yarn test:e2e atau yarn test:e2e:interactive menjalankan subset dari tes kami, jika tidak dikenal sebagai tes asap . Untuk menjalankan suite penuh:
CYPRESS_SMOKE=false yarn test:e2e
Tes dapat dibatasi hanya berjalan untuk layanan tunggal dengan menentukannya menggunakan variabel lingkungan CYPRESS_ONLY_SERVICE . Misalnya:
CYPRESS_ONLY_SERVICE=urdu yarn test:e2e
Untuk menjalankan hanya spesifikasi tertentu, perlu untuk memohon Cypress secara langsung. Pertama pastikan Simorgh sudah berjalan di tab lain dan kemudian jalankan (misalnya, untuk hanya menjalankan tes artikel):
npx cypress run --spec cypress/integration/pages/articles/index.js
Rincian lebih lanjut tentang penggunaan Cypress CLI dapat ditemukan di https://docs.cypress.io/guides/guides/command-line.html
Ini mempengaruhi pengembang yang hanya berbasis di Inggris (tetapi dapat memengaruhi Anda jika Anda menggunakan routing VPN melalui Inggris)
Fungsi Cypress .visit () dikunci untuk mengunjungi domain tunggal per tes. Ini menjadi bermasalah ketika Anda meluncurkan tes E2E dari dalam Inggris, karena pengalihan dari .com ke .co.uk . Secara default tes Cypress akan berjalan seolah -olah mereka berlari di luar Inggris. Untuk menjalankan tes ini dari Inggris, Anda harus lulus di variabel lingkungan Cypress UK ke tes. Ini akan menggantikan ujung URL ke .co.uk , yang akan memungkinkan Anda untuk menjalankan tes ini dengan sukses.
Berikut adalah contoh perintah:
CYPRESS_APP_ENV=test CYPRESS_UK=true CYPRESS_SMOKE=true yarn cypress
Ini mempengaruhi pengembang yang berbasis di UE (tetapi dapat memengaruhi Anda jika Anda menggunakan routing VPN melalui negara yang tidak ada di UE)
Menjalankan tes Cypress di luar UE tidak akan menunjukkan spanduk persetujuan UE pada AMP, dan ini dapat menyebabkan beberapa tes gagal. Atur CYPRESS_SKIP_EU=true untuk mencegah tes ini berjalan saat berada di luar UE.
Perintah contoh adalah:
CYPRESS_SKIP_EU=true yarn cypress:interactive
Perintah berikut menjalankan simorgh dan cypress:
CYPRESS_APP_ENV=local CYPRESS_UK=true CYPRESS_SMOKE=true yarn test:e2e
Cypress_app_env juga dapat ditetapkan sama dengan 'tes' dan 'live'. Cypress_smoke bisa benar atau salah. Itu benar secara default dan menjalankan subset tes tertentu.
Kami menggunakan Lighthouse untuk menguji kinerja halaman kami. Namun ini telah dipindahkan dari Simorgh ke proses CD internal kami sendiri. Ini memungkinkan kami untuk menjalankan tes ini pada penggambaran simorgh yang lebih akurat. Anda bebas menjalankan mercusuar sendiri dari browser chrome Anda atau menggunakan node lighthouse cli.
Dinamai Simorgh setelah burung mitologis Persia. Simorgh adalah campuran dari banyak burung (dan dalam beberapa akun hewan lain) menjadi satu.
Untungnya, metafora yang tampaknya tepat untuk menawarkan semua artikel BBC dalam satu solusi mungkin sekarang bahkan lebih tepat karena aplikasi berkembang untuk mendukung lebih banyak jenis konten. Ini juga merupakan referensi yang jelas tentang sifat internasional dari tim kami, tetapi juga keinginan untuk memastikan artikel (dan segala sesuatu yang telah mengikuti) berfungsi untuk pengguna dalam semua bahasa yang didukung BBC.
Ini juga merupakan nama unik yang praktis dan, lebih dangkal, burung itu sangat cantik.
