tailor

สถานะ NPM

Tailor เป็นบริการเลย์เอาต์ที่ใช้สตรีมเพื่อเขียนเว็บเพจจากบริการแฟรกเมนต์ O'Reilly อธิบายไว้ในชื่อของโพสต์บล็อกนี้เป็น "ไลบรารีที่มีมิดเดิลแวร์ที่คุณสามารถรวมเข้ากับเซิร์ฟเวอร์ Node.js ใด ๆ " มันได้รับแรงบันดาลใจบางส่วนจาก BigPipe ของ Facebook แต่พัฒนาขึ้นในบริบทอีคอมเมิร์ซ

คุณสมบัติและประโยชน์บางอย่างของช่างตัดเสื้อ:

• เขียนมาร์กอัปที่แสดงผลล่วงหน้าบนแบ็กเอนด์ นี่เป็นสิ่งสำคัญสำหรับ SEO และทำให้การเรนเดอร์เริ่มต้น
• มั่นใจได้ถึงเวลาที่รวดเร็วในการไบต์ครั้งแรก การปรับแต่งการร้องขอชิ้นส่วนแบบขนานและสตรีมโดยเร็วที่สุดโดยไม่ต้องปิดกั้นส่วนที่เหลือของหน้า
• บังคับใช้งบประมาณประสิทธิภาพ สิ่งนี้ค่อนข้างท้าทายอย่างอื่นเพราะไม่มีจุดเดียวที่คุณสามารถควบคุมประสิทธิภาพได้
• ความทนทานต่อความผิดพลาด แสดงผลเอาท์พุทที่มีความหมายแม้ว่าชิ้นส่วนหน้าจะล้มเหลวหรือหมดเวลา

Tailor เป็นส่วนหนึ่งของ Project Mosaic ซึ่งมีจุดมุ่งหมายเพื่อช่วยให้นักพัฒนาสร้างไมโครเซิร์ตสำหรับส่วนหน้า โมเสคยังรวมถึงเราเตอร์ HTTP ที่ขยายได้สำหรับองค์ประกอบบริการ (Skipper) ที่มี API ที่เกี่ยวข้องที่เกี่ยวข้องซึ่งเก็บเส้นทาง (Innkeeper); ส่วนประกอบเพิ่มเติมอยู่ในท่อสำหรับการเปิดตัวสาธารณะ หากทีมงานส่วนหน้าของคุณกำลังเปลี่ยนรูปแบบ monolith-to-microservices คุณอาจพบว่าช่างตัดเสื้อและพี่น้องที่มีประโยชน์

ทำไมต้องเป็นบริการเลย์เอาต์?

Microservices ได้รับแรงฉุดมากในวันนี้ พวกเขาอนุญาตให้หลายทีมทำงานอย่างอิสระจากกันเลือกสแต็คเทคโนโลยีของตัวเองและสร้างวงจรการวางจำหน่ายของตัวเอง น่าเสียดายที่การพัฒนาส่วนหน้ายังไม่ได้รับประโยชน์อย่างเต็มที่จากประโยชน์ที่ไมโครไซต์เสนอ แนวทางปฏิบัติทั่วไปสำหรับการสร้างเว็บไซต์ยังคงเป็น“ เสาหิน”: codebase ส่วนหน้าเดียวที่ใช้ API หลายตัว

ถ้าเรามีไมโครเซิร์ตในส่วนหน้าล่ะ? สิ่งนี้จะช่วยให้นักพัฒนาส่วนหน้าทำงานร่วมกับแบ็กเอนด์ของพวกเขาในคุณสมบัติเดียวกันและปรับใช้ส่วนต่าง ๆ ของเว็บไซต์อย่างอิสระ -“ ชิ้นส่วน” เช่นส่วนหัวผลิตภัณฑ์และส่วนท้าย การนำ microservices ไปยังส่วนหน้าต้องใช้บริการเลย์เอาต์ที่ประกอบด้วยเว็บไซต์จากชิ้นส่วน ช่างตัดเสื้อได้รับการพัฒนาเพื่อแก้ปัญหาความต้องการนี้

การติดตั้ง

เริ่มใช้ช่างตัดเสื้อด้วย:

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 ) ; 

ตัวเลือก

• fetchContext(request) - ฟังก์ชั่นที่ส่งคืนสัญญาของบริบทนั่นคือวัตถุที่แม Promise.resolve({}) ส่วน ID ส่วนกับ URL ชิ้นส่วนเพื่อให้สามารถแทนที่ URL ของชิ้นส่วนบนหน้า
• fetchTemplate(request, parseTemplate) - ฟังก์ชั่นที่ควรดึงเทมเพลตโทร parseTemplate และส่งคืนสัญญาของผลลัพธ์ มีประโยชน์ในการใช้วิธีของคุณเองในการดึงและแคชเทมเพลตเช่นจาก S3 การใช้งานเริ่มต้น lib/fetch-template.js ดึงแม่แบบจากระบบไฟล์
• templatesPath - เพื่อระบุเส้นทางที่จัดเก็บเทมเพลตในเครื่องให้เป็นค่าเริ่มต้นเป็น /templates/
• fragmentTag - ชื่อของแท็กแฟรกเมนต์ค่าเริ่มต้นเป็น fragment
• handledTags - อาร์เรย์ของแท็กที่กำหนดเองตรวจ tests/handle-tag สำหรับข้อมูลเพิ่มเติม
• handleTag(request, tag, options, context) - รับแท็กหรือปิดแท็กและทำให้เป็นอนุกรมไปยังสตริงหรือส่งคืนสตรีม
• filterRequestHeaders(attributes, request) - ฟังก์ชั่นที่กรองส่วนหัวคำขอที่ส่งผ่านไปยังการร้องขอ lib/filter-headers ตรวจสอบการใช้งานเริ่มต้น
• filterResponseHeaders(attributes, headers) - ฟังก์ชั่นที่แมปส่วนหัวการตอบกลับที่กำหนดจากคำขอส่วนหลักไปจนถึงการตอบกลับขั้นสุดท้าย
• maxAssetLinks - จำนวนคำสั่งส่วนหัว Link สำหรับ CSS และ JS ที่เคารพต่อชิ้นส่วน - ค่าเริ่มต้นเป็น 1
• requestFragment(filterHeaders)(url, attributes, request) - ฟังก์ชั่นที่ส่งคืนคำสัญญาของการร้องขอไปยังเซิร์ฟเวอร์ lib/request-fragment
• amdLoaderUrl - URL ไปยัง AMD Loader เราใช้ requirejs จาก cdnjs เป็นค่าเริ่มต้น
• pipeInstanceName - ชื่ออินสแตนซ์ท่อที่มีอยู่ในหน้าต่างเบราว์เซอร์สำหรับการบริโภคตะขอส่วนหน้า
• pipeAttributes(attributes) - ฟังก์ชั่นที่ส่งคืนชุดแอตทริบิวต์ชิ้นส่วนที่น้อยที่สุดที่มีอยู่ในตะขอส่วนหน้า
• tracer - การใช้งานการติดตามตามมาตรฐานของ Opentracing

เทมเพลต

Tailor ใช้ Parse5 เพื่อแยกวิเคราะห์เทมเพลตซึ่งจะแทนที่แต่ละ fragmentTag ด้วยสตรีมจากเซิร์ฟเวอร์แฟรกเมนต์และ handledTags ด้วยผลลัพธ์ของฟังก์ชั่น 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 >

คุณลักษณะชิ้นส่วน

• id - ตัวระบุเฉพาะทางเลือก (Autogenerated)
• src - URL ของชิ้นส่วน
• primary - หมายถึงชิ้นส่วนที่ตั้งค่ารหัสการตอบกลับของหน้า
• timeout - การหมดเวลาการหมดเวลาของชิ้นส่วนในมิลลิวินาที (ค่าเริ่มต้นคือ 3000)
• async - เลื่อนชิ้นส่วนจนกระทั่งสิ้นสุดแท็กตัวถัง
• public - เพื่อป้องกันไม่ให้ช่างตัดเสื้อจากการส่งต่อส่วนหัวคำขอที่กรองจากต้นน้ำไปยังชิ้นส่วน
• fallback-src - URL ของชิ้นส่วนทางเลือกในกรณีที่หมดเวลา/ข้อผิดพลาดในส่วนปัจจุบัน

อนุญาตให้ใช้แอตทริบิวต์อื่น ๆ และจะถูกส่งผ่านไปยังฟังก์ชั่นที่เกี่ยวข้อง (เช่น filterRequestHeaders , filterResponseHeaders ฯลฯ )

เซิร์ฟเวอร์แฟรกเมนต์

แฟรกเมนต์เป็นเซิร์ฟเวอร์ HTTP (S) ที่แสดงผลเฉพาะส่วนหนึ่งของหน้าและตั้งส่วนหัว Link เพื่อให้ URLs ไปยังทรัพยากร CSS และ JavaScript ตรวจสอบ examples/basic-css-and-js/index.js สำหรับการใช้งานแบบร่าง

จาวาสคริปต์ของแฟรกเมนต์เป็นโมดูล AMD ที่ส่งออกฟังก์ชั่น init ซึ่งจะถูกเรียกด้วยองค์ประกอบ DOM ของชิ้นส่วนเป็นอาร์กิวเมนต์

ช่างตัดเสื้อจะไม่ติดตามการเปลี่ยนเส้นทางแม้ว่าการตอบสนองของชิ้นส่วนจะมีส่วนหัว 'ตำแหน่ง' ซึ่งมีวัตถุประสงค์ตามการเปลี่ยนเส้นทางสามารถแนะนำเวลาแฝงที่ไม่พึงประสงค์ ชิ้นส่วนที่มีแอตทริบิวต์ primary สามารถเปลี่ยนเส้นทางได้เนื่องจากมันควบคุมรหัสสถานะของหน้า

หมายเหตุ: สำหรับความเข้ากันได้กับ AWS ส่วนหัว Link สามารถส่งผ่านเป็น x-amz-meta-link

ส่งผ่านข้อมูลไปยังแฟรกเมนต์

โดยค่าเริ่มต้นคำขอขาเข้าจะถูกใช้เพื่อเลือกเทมเพลต

ดังนั้นเพื่อรับเทมเพลต index.html ที่คุณไปที่ /index

หากคุณต้องการฟัง /product/my-product-123 เพื่อไปที่เทมเพลต product.html คุณสามารถเปลี่ยน req.url เป็น /product

ส่วนหัวทุกตัวจะถูกกรองโดยค่าเริ่มต้นเพื่อหลีกเลี่ยงการรั่วไหลของข้อมูล แต่คุณสามารถให้ URI ดั้งเดิมและโฮสต์โดยเพิ่มลงในส่วนหัว, x-request-host และ x-request-uri จากนั้นอ่านส่วนหัวเพื่อทราบว่าผลิตภัณฑ์ใดที่จะดึงและแสดงผล

 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' ) ;
    } ) ;

แนวคิด

แนวคิดบางอย่างในช่างตัดเสื้อมีการอธิบายรายละเอียดเกี่ยวกับเอกสารเฉพาะ

• เหตุการณ์
• เทมเพลตฐาน
• ตะขอ
• ผลงาน

opentracing

Tailor มีเครื่องมือติดตามการติดตามแบบกระจายกับ opentracing มันจะรับบริบทการขยายใด ๆ ในคำขอ Ingress HTTP และเผยแพร่ไปยังการเรียกขั้นตอนระยะไกลที่มีอยู่ (RPCs)

ปัจจุบันมีเพียงการดึงชิ้นส่วนเท่านั้นที่มีการจัดเตรียมรายละเอียดเพิ่มเติมเช่นแท็กแฟรกเมนต์แอตทริบิวต์และการบันทึกบางส่วนเช่นการติดตามสแต็กสำหรับข้อผิดพลาด

ตัวอย่าง

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

# Change to the folder
cd tailor

# Install dependencies
yarn

• พื้นฐาน - node examples/basic
• CSS และ JS- node examples/basic-css-and-js
• ตัวอย่างหลายชิ้นและ AMD- node examples/multiple-fragments-with-custom-amd
• ประสิทธิภาพของชิ้นส่วน - node examples/fragment-performance

ไปที่ http: // localhost: 8080/ดัชนีหลังจากเรียกใช้ตัวอย่างเฉพาะ

หมายเหตุ: โปรดเรียกใช้ตัวอย่างด้วยเวอร์ชันโหนด> 6.0.0

---

นอกจากนี้ยังมีตัวอย่างแอปพลิเคชันหน้าเดียว:

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

เกณฑ์มาตรฐาน

ในการเริ่มต้นใช้งานเบนช์มาร์กเรียกใช้ npm run benchmark และรอสองสามวินาทีเพื่อดูผลลัพธ์

การบริจาค

โปรดตรวจสอบแนวทางการสนับสนุนที่นี่