{"id":15048161,"url":"https://github.com/github/fiber-fragments","last_synced_at":"2025-10-04T07:31:37.064Z","repository":{"id":38324396,"uuid":"380953509","full_name":"github/fiber-fragments","owner":"github","description":":framed_picture: Micro fragmentation middleware for fiber :rocket: that enables to build microservice frontends.","archived":true,"fork":false,"pushed_at":"2021-08-30T10:17:22.000Z","size":178,"stargazers_count":26,"open_issues_count":0,"forks_count":5,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-09-30T00:20:18.459Z","etag":null,"topics":["fiber","fragments","go","microservices","works-with-codespaces"],"latest_commit_sha":null,"homepage":"","language":"Go","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/github.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null}},"created_at":"2021-06-28T08:04:15.000Z","updated_at":"2024-08-15T11:32:10.000Z","dependencies_parsed_at":"2022-08-30T12:50:56.277Z","dependency_job_id":null,"html_url":"https://github.com/github/fiber-fragments","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/github%2Ffiber-fragments","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/github%2Ffiber-fragments/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/github%2Ffiber-fragments/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/github%2Ffiber-fragments/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/github","download_url":"https://codeload.github.com/github/fiber-fragments/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235227462,"owners_count":18956137,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fiber","fragments","go","microservices","works-with-codespaces"],"created_at":"2024-09-24T21:08:52.164Z","updated_at":"2025-10-04T07:31:31.775Z","avatar_url":"https://github.com/github.png","language":"Go","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fragments\n\n[![main](https://github.com/github/fiber-fragments/actions/workflows/main.yaml/badge.svg)](https://github.com/github/fiber-fragments/actions/workflows/main.yaml)\n[![Go Report Card](https://goreportcard.com/badge/github.com/github/fiber-fragments)](https://goreportcard.com/report/github.com/github/fiber-fragments)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Taylor Swift](https://img.shields.io/badge/secured%20by-taylor%20swift-brightgreen.svg)](https://twitter.com/SwiftOnSecurity)\n\nFragments middleware for [Fiber](https://github.com/gofiber/fiber) enables building microservices for the frontend.\n\nA `\u003cfragment\u003e` symbolizes a part of a template that can be served by a singular microservice. Thus, making a fragment the contract between different services and teams within a large engineering organization. The middleware concurrently fetches those parts from the service and replaces it in the template. It supports `GET` and `POST` [HTTP methods](https://developer.mozilla.org/de/docs/Web/HTTP/Methods) to fetcht the content. Related resources like CSS or JavaScript are injected via the [HTTP `LINK` entity header field](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link). A `\u003cfragment\u003e` can occure in the [`body` element](https://developer.mozilla.org/de/docs/Web/HTML/Element/body) or the [`header` element](https://developer.mozilla.org/de/docs/Web/HTML/Element/header). See [Example](#example) to learn more about using fragments.\n\n[Tailor](https://github.com/zalando/tailor) by Zalando is prior art for this middleware.\n\n## Fragement(s)\n\nA `fragment` will be hybrid-polymorphic (if this is a thing). On the server it is parsed and evaluate by the middleware. 🦄 In the browser it will be a web component that received data from the middleware (**this is still work in progress ⚠️**).\n\n### Server\n\n* `src` The source to fetch for replacement in the DOM\n* `method` can be of `GET` (default) or `POST`.\n* `primary` denotes a fragment that sets the response code of the page\n* `id` is an optional unique identifier (optional)\n* `ref`is an optional forward reference to an `id` (optional)\n* `timeout` timeout of a fragement to receive in milliseconds (default is `300`)\n* `deferred` is deferring the fetch to the browser\n* `fallback` is the fallback source in case of timeout/error on the current fragment\n\n\n## Example\n\nImport the middleware package this is part of the Fiber web framework.\n\n```go\npackage main\n\nimport (\n\t\"github.com/gofiber/fiber/v2\"\n\t\"github.com/gofiber/template/html\"\n\n\t\"github.com/github/fiber-fragments\"\n)\n```\n\nAfter you initiate your Fiber app, you can plugin in the fragments middleware. The middleware draws the templates for the fragments to load from the template engine. Thus it supports using all [template](https://github.com/gofiber/template) engines supported by the Fiber team.\n\n```go\n// Create a new engine\nengine := html.New(\"./views\", \".html\")\n\n// Pass the engine to the Views\napp := fiber.New(fiber.Config{\n\tViews: engine,\n})\n\n// Associates the route with a specific template with fragments to render\napp.Get(\"/index\", fragments.Template(fragments.Config{}, \"index\", fiber.Map{}, \"layouts/main\"))\n\n// this would listen to port 8080\napp.Listen(\":8080\")\n```\n\n```html\n\u003chtml\u003e\n\u003chead\u003e\n    \u003cscript type=\"fragment\" src=\"assets\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003ch1\u003eExample\u003c/h1\u003e\n    \u003cfragment src=\"fragment1.html\"\u003e\u003c/fragment\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nThe `example` folder contains many examples. You can learn how to use a forward reference of content for fetching outer and inner content and replace either one.\n\n## Benchmark(s)\n\nThis is run on a MacBook Pro 16 inch locally. It is the `example` run.\n\n* Parsing a local template with extrapolation with the fragments\n* Parsing the fragments\n* Doing fragments\n* Inlining results and adding `Link` header resources to the output\n\n```bash\necho \"GET http://127.0.0.1:8080/index\" | vegeta attack -duration=5s -rate 2000 | tee results.bin | vegeta report\n  vegeta report -type=json results.bin \u003e metrics.json\n  cat results.bin | vegeta plot \u003e plot.html\n  cat results.bin | vegeta report -type=\"hist[0,100ms,200ms,300ms]\"\n\nRequests      [total, rate, throughput]         10000, 2000.26, 2000.15\nDuration      [total, attack, wait]             5s, 4.999s, 285.172µs\nLatencies     [min, mean, 50, 90, 95, 99, max]  183.725µs, 251.517µs, 226.993µs, 310.698µs, 394.601µs, 563.022µs, 1.347ms\nBytes In      [total, mean]                     6240000, 624.00\nBytes Out     [total, mean]                     0, 0.00\nSuccess       [ratio]                           100.00%\nStatus Codes  [code:count]                      200:10000\nError Set:\nBucket           #      %        Histogram\n[0s,     100ms]  10000  100.00%  ###########################################################################\n[100ms,  200ms]  0      0.00%\n[200ms,  300ms]  0      0.00%\n[300ms,  +Inf]   0      0.00%\n```\n\n## License\n\n[MIT](/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgithub%2Ffiber-fragments","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgithub%2Ffiber-fragments","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgithub%2Ffiber-fragments/lists"}