الصفحة الرئيسية>موارد بناء الموقع>بيانات الموقع
تنزيل

حالة NPM

Tailor هي خدمة تخطيط تستخدم تدفقات لتكوين صفحة ويب من خدمات الأجزاء. يصفها O'Reilly في عنوان منشور المدونة هذا بأنه "مكتبة توفر برامج وسيطة يمكنك دمجها في أي خادم Node.js." إنه مستوحى جزئيًا من BigPipe على Facebook ، ولكنه تم تطويره في سياق التجارة الإلكترونية.

بعض ميزات وفوائد الخياط:

  • تتألف ترميز تم تقديمه مسبقًا على الواجهة الخلفية . هذا مهم لكبار المسئولين الاقتصاديين وربط العرض الأولي.
  • يضمن وقت سريع للبايت الأول . يطلب خياط الشظايا بالتوازي ويقوم بتدفقها في أقرب وقت ممكن ، دون منع بقية الصفحة.
  • يفرض ميزانية الأداء . هذا أمر صعب للغاية ، لأنه لا توجد نقطة واحدة يمكنك من خلالها التحكم في الأداء.
  • التسامح مع الخطأ . تقديم الإخراج ذي معنى ، حتى إذا فشل جزء الصفحة أو توقيته.

الخياط هو جزء من Mosaic Project ، الذي يهدف إلى مساعدة المطورين على إنشاء الخدمات الدقيقة للواجهة الأمامية. يتضمن الفسيفساء أيضًا جهاز توجيه HTTP قابل للتمديد لتكوين الخدمة (Skipper) مع واجهة برمجة التطبيقات المريحة ذات الصلة التي تخزن الطرق (Innkeeper) ؛ المزيد من المكونات في خط الأنابيب للإفراج العام. إذا كان فريقك الأمامي يقوم بالانتقال إلى Monolith إلى 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) - الوظيفة التي تُرجع وعدًا بالسياق ، وهو كائن يعين معرف الجزء إلى عنوان URL ، ليكون قادرًا على تجاوز عناوين URL الخاصة بالشظايا على الصفحة ، والافتراضات على Promise.resolve({})
  • 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. نستخدم requistjs من 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 - معرف فريد اختياري (تلقائي)
  • src - عنوان URL من الشظية
  • primary - يدل على جزء يحدد رمز الاستجابة للصفحة
  • timeout - مهلة اختيارية للشظية بالميلي ثانية (الافتراضي هو 3000)
  • async - يؤجل الجزء الشظية حتى نهاية علامة الجسم
  • public - لمنع خياط توجيه الرؤوس المصفاة من المنبع إلى الشظايا.
  • fallback-src - عنوان URL لشظية العودة في حالة المهلة/الخطأ على الشظية الحالية

يُسمح filterRequestHeaders الأخرى وسيتم تمريرها أيضًا إلى الوظائف ذات filterResponseHeaders (على سبيل المثال

خادم جزء

الشظية هي خادم HTTP (S) الذي يجعل فقط جزء الصفحة ويقوم بتعيين رأس Link لتوفير عناوين URL لموارد CSS و JavaScript. تحقق examples/basic-css-and-js/index.js لمسودة التنفيذ.

javaScript من الجزء هو وحدة 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

يخرج الخياط من صندوق التتبع الموزعة مع 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
  • node examples/basic-css-and-js
  • شظايا متعددة و AMD- node examples/multiple-fragments-with-custom-amd
  • أداء الجزء - node examples/fragment-performance

انتقل إلى http: // localhost: 8080/index بعد تشغيل المثال المحدد.

ملاحظة: يرجى تشغيل الأمثلة مع إصدارات العقدة> 6.0.0

تتوفر أيضًا أمثلة تطبيق صفحة واحدة:

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

معيار

لبدء تشغيل القياس القياسي ، قم بتنفيذ npm run benchmark وانتظر بضع ثوان لمعرفة النتائج.

المساهمة

يرجى التحقق من المبادئ التوجيهية المساهمة هنا.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل