tailor

estado de NPM

Sastor es un servicio de diseño que utiliza transmisiones para componer una página web a partir de servicios de fragmentos. O'Reilly lo describe en el título de esta publicación de blog como "una biblioteca que proporciona un middleware que puede integrar en cualquier servidor Node.js". Está parcialmente inspirado en BigPipe de Facebook, pero se desarrolló en un contexto de comercio electrónico.

Algunas de las características y beneficios del sastre:

• Compone el marcado pre-renderizado en el backend . Esto es importante para el SEO y fija el renderizado inicial.
• Asegura un momento rápido al primer byte . El sastre solicita fragmentos en paralelo y los transmite lo antes posible, sin bloquear el resto de la página.
• Haga cumplir el presupuesto de rendimiento . De lo contrario, esto es bastante desafiante, porque no hay un solo punto en el que pueda controlar el rendimiento.
• Tolerancia a fallas . Renderiza la salida significativa, incluso si un fragmento de página ha fallado o tiempo en tiempo.

Tailor es parte de Project Mosaic, cuyo objetivo es ayudar a los desarrolladores a crear microservicios para el frontend. El mosaico también incluye un enrutador HTTP extensible para la composición del servicio (patrón) con API relajante relacionada que almacena rutas (posadero); Más componentes están en proceso para la liberación pública. Si su equipo front-end está haciendo que la transición de monolito a microservicios, es posible que sean beneficiosos a medida y sus hermanos disponibles.

¿Por qué un servicio de diseño?

Los microservicios tienen mucha tracción en estos días. Permiten que múltiples equipos trabajen de forma independiente entre sí, elijan sus propias pilas de tecnología y establecen sus propios ciclos de liberación. Desafortunadamente, el desarrollo frontend aún no ha capitalizado por los beneficios que ofrecen los microservicios. La práctica común para construir sitios web sigue siendo "el monolito": una única base de código frontend que consume múltiples API.

¿Qué pasaría si pudiéramos tener microservicios en la interfaz? Esto permitiría a los desarrolladores frontend trabajar junto con sus contrapartes de backend en la misma característica e implementar independientemente partes del sitio web: "fragmentos" como encabezado, producto y pie de página. Traer microservicios al interfaz requiere un servicio de diseño que compone un sitio web con fragmentos. Se desarrolló sastre para resolver esta necesidad.

Instalación

Empiece a usar sastre con:

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

Opción

• fetchContext(request) : función que devuelve una promesa del contexto, que es un objeto que mapea la identificación de fragmentos a la URL de fragmentos, para poder anular las URL de los fragmentos en la página, predeterminado es Promise.resolve({})
• fetchTemplate(request, parseTemplate) : función que debe obtener la plantilla, llamar parseTemplate y devolver una promesa del resultado. Útil para implementar su propia forma de recuperar y almacenar en caché las plantillas, por ejemplo, de S3. Implementación predeterminada lib/fetch-template.js obtiene la plantilla del sistema de archivos
• templatesPath : para especificar la ruta donde las plantillas se almacenan localmente, el valor predeterminado a /templates/
• fragmentTag - Nombre de la etiqueta de fragmento, predeterminado es fragment
• handledTags : una variedad de etiquetas personalizadas, verifique tests/handle-tag para obtener más información
• handleTag(request, tag, options, context) : recibe una etiqueta o etiqueta de cierre y la serializa a una cadena o devuelve una transmisión
• filterRequestHeaders(attributes, request) : función que filtra los encabezados de solicitud que se pasan a la solicitud de fragmento, verifique la implementación predeterminada en lib/filter-headers
• filterResponseHeaders(attributes, headers) : función que mapea los encabezados de respuesta dados de la solicitud de fragmento primario a la respuesta final
• maxAssetLinks - Número de directivas de encabezado de Link para CSS y JS respetado por fragmento - predeterminado a 1
• requestFragment(filterHeaders)(url, attributes, request) : función que devuelve una promesa de solicitud a un servidor de fragmentos, verifique la implementación predeterminada en lib/request-fragment
• amdLoaderUrl - URL a AMD Loader. Utilizamos necesarias de CDNJS como predeterminado
• pipeInstanceName : nombre de instancia de tubería que está disponible en la ventana del navegador para consumir ganchos frontend.
• pipeAttributes(attributes) : función que devuelve el conjunto mínimo de atributos de fragmentos disponibles en los ganchos frontend.
• tracer : la implementación del trazador que cumple con el cumplimiento.

Plantilla

Tailor usa PARSE5 para analizar la plantilla, donde reemplaza cada fragmentTag con una transmisión del servidor de fragmentos y handledTags con el resultado de la función 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 >

Atributos de fragmento

• id - Identificador único opcional (autogenerado)
• src - URL del fragmento
• primary : denota un fragmento que establece el código de respuesta de la página
• timeout : tiempo de espera opcional de fragmentos en milisegundos (el valor predeterminado es 3000)
• async : pospone el fragmento hasta el final de la etiqueta del cuerpo
• public : para evitar que el sastre se reenvíe los encabezados de solicitud filtrados desde aguas arriba hasta los fragmentos.
• fallback-src - URL del fragmento de retroceso en caso de tiempo de espera/error en el fragmento actual

Otros atributos se permiten y se pasarán también a las funciones relevantes (por ejemplo, filterRequestHeaders , filterResponseHeaders , etc.)

Servidor de fragmentos

Un fragmento es un servidor HTTP (S) que renderiza solo la parte de la página y establece el encabezado Link para proporcionar URL a los recursos CSS y JavaScript. Verifique examples/basic-css-and-js/index.js para un borrador de implementación.

Un JavaScript del fragmento es un módulo AMD, que exporta una función init , que se llamará con el elemento DOM del fragmento como argumento.

El sastre no seguirá las redireccionamientos incluso si la respuesta al fragmento contiene el encabezado de 'ubicación', que es a propósito ya que las redireccionamientos pueden introducir una latencia no deseada. Los fragmentos con el atributo primary pueden hacer una redirección ya que controla el código de estado de la página.

Nota: Para la compatibilidad con AWS, el encabezado Link también se puede pasar como x-amz-meta-link

Pasar información a fragmentos

Por defecto, la solicitud entrante se utilizará para seleccionar la plantilla.

Entonces, para obtener la plantilla index.html , irá /index .

Si desea escuchar /product/my-product-123 para ir a la plantilla product.html , puede cambiar el req.url a /product .

Cada encabezado se filtra de forma predeterminada para evitar fugas de información, pero puede dar el URI y el host original agregándolo a los encabezados, x-request-host y x-request-uri , luego leyendo en el fragmento los encabezados para saber qué producto buscar y mostrar.

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

Conceptos

Algunos de los conceptos en el sastre se describen en detalle en los documentos específicos.

• Eventos
• Plantillas base
• Manos
• Actuación

Certificado

El sastre tiene una instrumentación de rastreo distribuida fuera de la caja con cosecha. Recogerá cualquier contexto de tramo en la solicitud HTTP de ingreso y lo propagará a las llamadas de procedimiento remoto (RPC) existentes.

Actualmente, solo la obtención de fragmentos se instrumenta que proporcionan algunos detalles adicionales como la etiqueta de fragmentos, los atributos y algunas carga útil de registro, como la traza de la pila para errores.

Ejemplos

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

# Change to the folder
cd tailor

# Install dependencies
yarn

• Básico - node examples/basic
• CSS y JS- node examples/basic-css-and-js
• Fragmentos múltiples y AMD- node examples/multiple-fragments-with-custom-amd
• Rendimiento del fragmento - node examples/fragment-performance

Vaya a http: // localhost: 8080/índice después de ejecutar el ejemplo específico.

Nota: Ejecute los ejemplos con versiones de nodo> 6.0.0

---

También están disponibles ejemplos de aplicaciones de una sola página:

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

Punto de referencia

Para comenzar a ejecutar Benchmark, ejecute npm run benchmark y espere a un par de segundos para ver los resultados.

Que contribuye

Consulte las pautas de contribución aquí.