tailor
3.9.2
Tailor est un service de mise en page qui utilise des flux pour composer une page Web à partir des services de fragments. O'Reilly le décrit dans le titre de ce billet de blog comme "une bibliothèque qui fournit un middleware que vous pouvez intégrer dans n'importe quel serveur Node.js". Il est partiellement inspiré par Bigpipe de Facebook, mais développé dans un contexte de commerce électronique.
Certaines fonctionnalités et avantages de tailleur:
Tailor fait partie de Project Mosaic, qui vise à aider les développeurs à créer des microservices pour le frontend. La mosaïque comprend également un routeur HTTP extensible pour la composition de service (skipper) avec une API reposante associée qui stocke les routes (Innkeeper); Plus de composants sont en cours pour libération publique. Si votre équipe frontale fait la transition du monolithe-à-microservices, vous pouvez trouver des frères et sœurs disponibles et ses frères et sœurs disponibles.
Les microservices reçoivent beaucoup de traction ces jours-ci. Ils permettent à plusieurs équipes de travailler indépendamment les uns des autres, de choisir leurs propres piles technologiques et d'établir leurs propres cycles de libération. Malheureusement, Frontend Development n'a pas encore entièrement capitalisé sur les avantages que les microservices offrent. La pratique courante pour la création de sites Web reste «le monolithe»: une seule base de code Frontend qui consomme plusieurs API.
Et si nous pouvions avoir des microservices sur le frontend? Cela permettrait aux développeurs de frontend de travailler avec leurs homologues backend sur la même fonctionnalité et de déployer indépendamment des parties du site Web - des «fragments» tels que l'en-tête, le produit et le pied de page. Apporter des microservices au frontend nécessite un service de mise en page qui compose un site Web à partir de fragments. Tailor a été développé pour résoudre ce besoin.
Commencez à utiliser Tailor avec:
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) - fonction qui renvoie une promesse du contexte, c'est un objet qui mappe l'ID de fragment à URL de fragment, pour pouvoir remplacer les URL des fragments sur la page, par défaut Promise.resolve({})fetchTemplate(request, parseTemplate) - fonction qui devrait récupérer le modèle, appeler parseTemplate et renvoyer une promesse du résultat. Utile pour implémenter votre propre façon de récupérer et de mettre en cache les modèles, par exemple de S3. Implémentation par défaut lib/fetch-template.js récupère le modèle à partir du système de fichierstemplatesPath - Pour spécifier le chemin où les modèles sont stockés localement, par défaut /templates/fragmentTag - Nom de la balise de fragment, par fragmenthandledTags - un tableau de balises personnalisées, vérifiez tests/handle-tag pour plus d'informationshandleTag(request, tag, options, context) - reçoit une balise ou une balise de fermeture et la sérialiser dans une chaîne ou renvoie un fluxfilterRequestHeaders(attributes, request) - Fonction qui filtre les en-têtes de demande qui sont transmises à la demande de fragment, vérifiez l'implémentation par défaut dans lib/filter-headersfilterResponseHeaders(attributes, headers) - fonction qui mappe les en-têtes de réponse donnés de la demande de fragment primaire à la réponse finalemaxAssetLinks - Nombre de directives d'en-tête de Link pour CSS et JS respectées par fragment - par 1requestFragment(filterHeaders)(url, attributes, request) - fonction qui renvoie une promesse de demande à un serveur de fragments, vérifiez l'implémentation par défaut dans lib/request-fragmentamdLoaderUrl - URL vers AMD Loader. Nous utilisons les obligations de CDNJ par défautpipeInstanceName - Nom d'instance de tuyau qui est disponible dans la fenêtre du navigateur pour consommer des crochets frontaux.pipeAttributes(attributes) - Fonction qui renvoie l'ensemble minimal d'attributs de fragments disponibles sur les crochets Frontend.tracer - Implémentation de traceur conforme à l'offre. Tailor utilise PARSE5 pour analyser le modèle, où il remplace chaque fragmentTag par un flux du serveur de fragments et handledTags avec le résultat de la fonction 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 - identifiant unique en option (autoogénéré)src - url du fragmentprimary - désigne un fragment qui définit le code de réponse de la pagetimeout - délai de fragment facultatif en millisecondes (par défaut est 3000)async - Posée le fragment jusqu'à la fin de l'étiquette corporellepublic - pour empêcher Tailor de transmettre les en-têtes de demande filtrés de l'amont aux fragments.fallback-src - URL du fragment de secours en cas de délai / erreur sur le fragment actuel
filterResponseHeadersautres attributs sont autorisés et seront également adoptés aux fonctions pertinentes (par exemplefilterRequestHeaders
Un fragment est un serveur HTTP (S) qui ne fait que la partie de la page et définit l'en-tête Link pour fournir des URL aux ressources CSS et JavaScript. Vérifiez examples/basic-css-and-js/index.js pour un projet d'implémentation.
Un javascript du fragment est un module AMD, qui exporte une fonction init , qui sera appelée avec un élément Dom du fragment comme argument.
Tailor ne suivra pas les redirectes même si la réponse aux fragments contient de l'en-tête «emplacement», c'est-à-dire exprès car les redirectes peuvent introduire la latence indésirable. Les fragments avec l'attribut primary peuvent effectuer une redirection car il contrôle le code d'état de la page.
Remarque: Pour la compatibilité avec AWS, l'en-tête de Link peut également être passé sous le nom de x-amz-meta-link
Par défaut, la demande entrante sera utilisée pour sélectionner le modèle.
Donc, pour obtenir le modèle index.html , vous accédez à /index .
Si vous souhaitez écouter /product/my-product-123 pour aller sur le modèle product.html , vous pouvez modifier la req.url en /product .
Chaque en-tête est filtré par défaut pour éviter de divulguer des informations, mais vous pouvez donner l'uri et l'hôte d'origine en l'ajoutant aux en-têtes, x-request-host et x-request-uri , puis en lisant dans le fragment les en-têtes pour savoir quel produit chercher et afficher.
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' ) ;
} ) ;Certains des concepts de Tailor sont décrits en détail sur les documents spécifiques.
Tailor a une instrumentation de traçage distribuée hors de la boîte avec une option. Il ramassera n'importe quel contexte de portée sur la demande HTTP entrée et le propagera aux appels de procédure distante existants (RPC).
Actuellement, seule la récupération des fragments est instrumentée fournissant des détails supplémentaires comme la balise de fragments, les attributs et une charge utile de journalisation comme la trace de pile pour les erreurs.
# Get a copy of the repository
git clone https://github.com/zalando/tailor.git
# Change to the folder
cd tailor
# Install dependencies
yarnnode examples/basicnode examples/basic-css-and-jsnode examples/multiple-fragments-with-custom-amdnode examples/fragment-performanceAllez sur http: // localhost: 8080 / index après avoir exécuté l'exemple spécifique.
Remarque: veuillez exécuter les exemples avec des versions de nœud> 6.0.0
Des exemples d'application à une page sont également disponibles:
Pour commencer à exécuter Benchmark, exécutez npm run benchmark et attendez quelques secondes pour voir les résultats.
Veuillez vérifier les directives contributives ici.
