tailor

Status NPM

Penjahit adalah layanan tata letak yang menggunakan aliran untuk menyusun halaman web dari layanan fragmen. O'Reilly menjelaskannya dalam judul posting blog ini sebagai "perpustakaan yang menyediakan middleware yang dapat Anda integrasikan ke dalam server node.js apa pun." Ini sebagian terinspirasi oleh bigpipe Facebook, tetapi dikembangkan dalam konteks eCommerce.

Beberapa fitur dan manfaat penjahit:

• Menyusun markup pra-render pada backend . Ini penting untuk SEO dan mengikat render awal.
• Memastikan waktu cepat untuk byte pertama . Penjahit meminta fragmen secara paralel dan mengalirkannya sesegera mungkin, tanpa memblokir sisa halaman.
• Menegakkan anggaran kinerja . Ini cukup menantang sebaliknya, karena tidak ada satu titik tunggal di mana Anda dapat mengontrol kinerja.
• Toleransi kesalahan . Render output yang bermakna, bahkan jika fragmen halaman telah gagal atau diatur waktunya.

Penjahit adalah bagian dari Project Mosaic, yang bertujuan untuk membantu pengembang membuat layanan mikro untuk frontend. Mosaic juga mencakup router HTTP yang dapat diperpanjang untuk Komposisi Layanan (Skipper) dengan API REST terkait yang menyimpan rute (penjaga penginapan); Lebih banyak komponen yang ada dalam pipa untuk rilis publik. Jika tim front-end Anda membuat transisi monolith-to-microservices, Anda mungkin menemukan penjahit dan saudara kandungnya bermanfaat.

Mengapa layanan tata letak?

Layanan microser mendapatkan banyak daya tarik akhir -akhir ini. Mereka memungkinkan banyak tim untuk bekerja secara mandiri satu sama lain, memilih tumpukan teknologi mereka sendiri dan membangun siklus rilis mereka sendiri. Sayangnya, pengembangan Frontend belum sepenuhnya dikapitalisasi pada manfaat yang ditawarkan layanan mikro. Praktik umum untuk membangun situs web tetap "monolith": basis kode frontend tunggal yang mengkonsumsi beberapa API.

Bagaimana jika kita bisa memiliki layanan mikro di frontend? Ini akan memungkinkan pengembang Frontend untuk bekerja sama dengan rekan -rekan backend mereka pada fitur yang sama dan secara mandiri menggunakan bagian -bagian situs web - "fragmen" seperti header, produk, dan footer. Membawa layanan mikro ke frontend membutuhkan layanan tata letak yang membentuk situs web dari fragmen. Penjahit dikembangkan untuk menyelesaikan kebutuhan ini.

Instalasi

Mulailah menggunakan penjahit dengan:

yarn add node-tailor

 const http = require ( 'http' ) ;
const Tailor = require ( 'node-tailor' ) ;
const tailor = new Tailor ( { /* Options */ } ) ;
const server = http . createServer ( tailor . requestHandler ) ;
server . listen ( process . env . PORT || 8080 ) ; 

Opsi

• fetchContext(request) - Fungsi yang mengembalikan janji konteks, yaitu objek yang memetakan ID fragmen ke URL fragmen, untuk dapat mengganti URL fragmen pada halaman, default ke Promise.resolve({})
• fetchTemplate(request, parseTemplate) - fungsi yang harus mengambil templat, hubungi parseTemplate dan mengembalikan janji hasilnya. Berguna untuk mengimplementasikan cara Anda sendiri untuk mengambil dan menyimpan template, misalnya dari S3. Implementasi default lib/fetch-template.js mengambil templat dari sistem file
• templatesPath - Untuk menentukan jalur di mana templat disimpan secara lokal, default ke /templates/
• fragmentTag - Nama tag fragmen, default ke fragment
• handledTags - Array tag khusus, periksa tests/handle-tag untuk info lebih lanjut
• handleTag(request, tag, options, context) - Menerima tag atau tag penutup dan serialisasi ke string atau mengembalikan aliran
• filterRequestHeaders(attributes, request) - Fungsi yang menyaring header permintaan yang diteruskan ke permintaan fragmen, periksa implementasi default di lib/filter-headers
• filterResponseHeaders(attributes, headers) - Fungsi yang memetakan header respons yang diberikan dari permintaan fragmen utama ke respons akhir
• maxAssetLinks - Jumlah arahan header Link untuk CSS dan JS dihormati per fragmen - default ke 1
• requestFragment(filterHeaders)(url, attributes, request) - Fungsi yang Mengembalikan Janji Permintaan ke Server Fragmen, Periksa Implementasi Default di lib/request-fragment
• amdLoaderUrl - URL ke AMD Loader. Kami menggunakan persyaratan dari CDNJS sebagai default
• pipeInstanceName - Nama instance pipa yang tersedia di jendela browser untuk mengonsumsi kait frontend.
• pipeAttributes(attributes) - Fungsi yang mengembalikan set minimal atribut fragmen yang tersedia di hook frontend.
• tracer - Implementasi pelacak yang sesuai dengan opentracing.

Templat

Penjahit menggunakan Parse5 untuk menguraikan templat, di mana ia menggantikan setiap fragmentTag dengan aliran dari server fragmen dan handledTags dengan hasil fungsi handleTag .

 < html >
< head >
    < script type =" fragment " src =" http://assets.domain.com " > </ script >
</ head >
< body >
    < fragment src =" http://header.domain.com " > </ fragment >
    < fragment src =" http://content.domain.com " primary > </ fragment >
    < fragment src =" http://footer.domain.com " async > </ fragment >
</ body >
</ html >

Atribut fragmen

• id - Pengidentifikasi unik opsional (Autogenerated)
• src - URL fragmen
• primary - menunjukkan fragmen yang menetapkan kode respons halaman
• timeout - Timeout opsional fragmen dalam milidetik (default adalah 3000)
• async - menunda fragmen sampai akhir tag tubuh
• public - Untuk mencegah penjahit meneruskan header permintaan yang difilter dari hulu ke fragmen.
• fallback-src - URL dari fragmen fallback jika terjadi batas waktu/kesalahan pada fragmen saat ini

Atribut lain diizinkan dan akan diteruskan juga ke fungsi yang relevan (mis. filterRequestHeaders , filterResponseHeaders , dll.)

Server fragmen

Sebuah fragmen adalah server HTTP (S) yang hanya membuat bagian dari halaman dan menetapkan tajuk Link untuk menyediakan URL ke CSS dan JavaScript Resources. Periksa examples/basic-css-and-js/index.js untuk implementasi rancangan.

Javascript dari fragmen adalah modul AMD, yang mengekspor fungsi init , yang akan dipanggil dengan elemen DOM dari fragmen sebagai argumen.

Penjahit tidak akan mengikuti pengalihan bahkan jika respons fragmen berisi header 'lokasi', yang sengaja terjadi karena pengalihan dapat memperkenalkan latensi yang tidak diinginkan. Fragmen dengan atribut primary dapat melakukan pengalihan karena mengontrol kode status halaman.

Catatan: Untuk kompatibilitas dengan AWS header Link juga dapat dilewati sebagai x-amz-meta-link

Meneruskan informasi ke fragmen

Secara default, permintaan yang masuk akan digunakan untuk memilih templat.

Jadi untuk mendapatkan templat index.html Anda pergi ke /index .

Jika Anda ingin mendengarkan /product/my-product-123 untuk pergi ke Template product.html , Anda dapat mengubah req.url ke /product .

Setiap header disaring secara default untuk menghindari informasi bocor, tetapi Anda dapat memberikan URI dan tuan rumah asli dengan menambahkannya ke header, x-request-host dan x-request-uri , kemudian membaca di fragmen header untuk mengetahui produk apa yang akan diambil dan ditampilkan.

 http
    . createServer ( ( req , res ) => {
        req . headers [ 'x-request-uri' ] = req . url
        req . url = '/index'

        tailor . requestHandler ( req , res ) ;
    } )
    . listen ( 8080 , function ( ) {
        console . log ( 'Tailor server listening on port 8080' ) ;
    } ) ;

Konsep

Beberapa konsep dalam penjahit dijelaskan secara rinci pada dokumen tertentu.

• Acara
• Template dasar
• Kait
• Pertunjukan

Opentracing

Penjahit memiliki instrumentasi penelusuran terdistribusi di luar kotak dengan opentracing. Ini akan mengambil konteks rentang apa pun pada permintaan HTTP Ingress dan menyebarkannya ke panggilan prosedur jarak jauh yang ada (RPC).

Saat ini, hanya pengambilan fragmen yang diinstrumentasi memberikan beberapa detail tambahan seperti tag fragmen, atribut dan beberapa muatan logging seperti jejak tumpukan untuk kesalahan.

Contoh

 # Get a copy of the repository
git clone https://github.com/zalando/tailor.git

# Change to the folder
cd tailor

# Install dependencies
yarn

• Basic - node examples/basic
• CSS dan JS- node examples/basic-css-and-js
• node examples/multiple-fragments-with-custom-amd
• Kinerja Fragmen - node examples/fragment-performance

Pergi ke http: // localhost: 8080/index setelah menjalankan contoh spesifik.

Catatan: Harap jalankan contoh dengan versi node> 6.0.0

---

Contoh aplikasi satu halaman juga tersedia:

• https://github.com/vignesheshanmugam/tailor-spa
• https://github.com/tsnolan23/tailor-react-spa
• https://github.com/shershen08/tailor-vue-demo

Benchmark

Untuk mulai menjalankan benchmark, Execute npm run benchmark dan tunggu beberapa detik untuk melihat hasilnya.

Berkontribusi

Silakan periksa pedoman yang berkontribusi di sini.