{"id":13393708,"url":"https://github.com/puzzle-js/puzzle-js","last_synced_at":"2025-12-29T23:33:46.710Z","repository":{"id":38421807,"uuid":"126609777","full_name":"puzzle-js/puzzle-js","owner":"puzzle-js","description":"⚡ Micro frontend framework for scalable and blazing fast websites.","archived":false,"fork":false,"pushed_at":"2024-03-25T15:49:53.000Z","size":3895,"stargazers_count":631,"open_issues_count":37,"forks_count":43,"subscribers_count":28,"default_branch":"master","last_synced_at":"2024-05-19T08:01:13.752Z","etag":null,"topics":["backend-for-frontend","fragments","framework","front-end-microservice","isomorphic","javascript","micro-frontends","microservice-framework","nodejs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/puzzle-js.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"docs/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2018-03-24T14:54:50.000Z","updated_at":"2024-05-17T16:47:17.000Z","dependencies_parsed_at":"2024-03-25T17:06:26.376Z","dependency_job_id":null,"html_url":"https://github.com/puzzle-js/puzzle-js","commit_stats":{"total_commits":826,"total_committers":34,"mean_commits":"24.294117647058822","dds":0.5556900726392252,"last_synced_commit":"f77b7cc2743adba249dc9a02c5af63550f4e0080"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/puzzle-js%2Fpuzzle-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/puzzle-js%2Fpuzzle-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/puzzle-js%2Fpuzzle-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/puzzle-js%2Fpuzzle-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/puzzle-js","download_url":"https://codeload.github.com/puzzle-js/puzzle-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243469196,"owners_count":20295705,"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":["backend-for-frontend","fragments","framework","front-end-microservice","isomorphic","javascript","micro-frontends","microservice-framework","nodejs"],"created_at":"2024-07-30T17:00:59.000Z","updated_at":"2025-12-29T23:33:46.656Z","avatar_url":"https://github.com/puzzle-js.png","language":"TypeScript","funding_links":[],"categories":["Tools","微前端框架","Uncategorized","Resources","TypeScript"],"sub_categories":["Uncategorized","Frameworks"],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://image.ibb.co/jM29on/puzzlelogo.png\" alt=\"PuzzleJs Logo\" width=\"300\" /\u003e\n\u003c/p\u003e\n\n# PuzzleJs Framework\nMicro frontend framework for scalable and blazing fast websites.\n\n[![CircleCI](https://circleci.com/gh/puzzle-js/puzzle-js/tree/master.svg?style=svg)](https://circleci.com/gh/puzzle-js/puzzle-js/tree/master) \n[![npm](https://img.shields.io/npm/dt/puzzle-microfrontends.svg)](https://www.npmjs.com/package/@puzzle-js/core) \n[![npm](https://img.shields.io/npm/v/puzzle-microfrontends.svg)](https://www.npmjs.com/package/@puzzle-js/core) \n[![Known Vulnerabilities](https://snyk.io/test/github/puzzle-js/puzzle-js/badge.svg)](https://snyk.io/test/github/puzzle-js/puzzle-js)\n[![codecov](https://codecov.io/gh/puzzle-js/puzzle-js/branch/master/graph/badge.svg)](https://codecov.io/gh/puzzle-js/puzzle-js) \n\n## *New documentation and demo is under development*\n\n## [Live Demo](http://178.128.201.193:4444/) - [Repository](https://github.com/puzzle-js/PuzzleJs-Demo)\n\nPuzzleJs makes it easy to create gateways and storefront projects that talk each other. It is inspired by Facebook's [BigPipe](https://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919/), developed with lots of great features and passion.\n\n### Why?\nThe traditional model is very inefficient for modern websites.\n* Multiple teams working on the same code make everything harder to manage.\n* Time to first byte is as fast as the slowest api.\n* While backend is collecting data, user browser is wasting time waiting for first byte.\n* Features can't be online as soon as it is fully developed and tested, because other teams' features are not ready yet.\n* You can't use different technologies except from the existing one.\n* You can't scale specific process, because you are dependent to whole system.\n\n### Features\n* **First Time To Byte** PuzzleJs compiles html template into javascript function on compile time. This operation is fully independent from the request, so PuzzleJs can send the first chunk using this function.\n* **Seo Friendly** PuzzleJs is fully SEO friendly, as everything is prepared and rendered on server side.\n* **Extensibility** It is easy to extend PuzzleJs with your custom functions.\n* **Easy** You can easily create a gateway or storefront and connect them by providing a configuration file.\n* **Independent** You can use any technology on your gateways, PuzzleJs is fully independent from your technologies. ReactJs, Vue or anything else.\n* **Scalable** PuzzleJs can create storefront and gateways independent from each other. So you can easily scale single project on Dockerized environments.\n* **Fail-Safe** When your api required by a fragment is down, PuzzleJs guarantees other page fragments will be still working.\n\n### Getting Started\n\nCheckout [quick start guide](./docs/quick.md) for fastest implementation.\n\n 1. Create one or more gateway projects.\n 2. Create fragments and api on gateway projects.\n 3. Create a storefront project and connect gateways with a config file.\n 4. Create pages on storefront project and provide html files with desired fragments.\n\nPlease check the [guide](./docs/guide.md) for full documentation.\n\n### How PuzzleJs works?\n\n*Compile time*\n1. Gateways start exposing their fragments, api and gateway information.\n2. Storefront fetches registered gateways' information.\n3. Storefront downloads and caches required fragments, dependencies and assets.\n4. Storefront compiles html into in memory javascript function for fastest template rendering.\n\n*On Request*\n1. Storefront sends a chunked response with the compiled function but doesn't close the connection. Users are now able to see your website with static contents and placeholders. It also sends backend requests to gateways to recieve rendered fragments.\n2. After any fragment is recieved from gateway, it sends it to browser as a chunk and replaces previously sended placeholder with the content.\n3. When all fragments are sent, PuzzleJs closes connection.\n\n### Documentation\nRead the [guide](./docs/guide.md) to familiarize yourself with how PuzzleJs works.\n\n* [Puzzle Architecture](./docs/guide.md#architecture)\n* [Installing PuzzleJs](./docs/guide.md#installing-puzzlejs)\n* [Storefront](./docs/guide.md#storefront)\n* [Configurator](./docs/guide.md#configurator)\n* [Core Configuration](./docs/guide.md#core-configuration)\n\n### [Changelog](./CHANGELOG.md)\n\n### Showcases\n\n\u003cp align=\"center\"\u003e\n\t\u003ca href=\"#\"\u003e\n\t\t\u003cimg alt=\"trendyol international mweb\" src=\"https://user-images.githubusercontent.com/32804505/196795499-17e7132f-9646-41c3-9296-8cc8d076ecb2.png\"\u003e\n\t\t\u003cbr\u003e\n\t\u003c/a\u003e\n\t\u003cem\u003e\n\t\u003cspan\u003etrendyol international\u003ca href=\"https://www.trendyol.com/de\"\u003e mobile web site\u003c/a\u003e \u003cp align=\"center\"\u003e(Please turn on devtool mobile emulator mod to view mweb site)\u003c/p\u003e\u003c/span\u003e\n\t\u003c/em\u003e\t\t\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\t\u003ca href=\"#\"\u003e\n\t\t\u003cimg alt=\"trendyol international web\" src=\"https://user-images.githubusercontent.com/32804505/196795543-2c3449e6-d0d1-418f-963b-9d03f9e9a9aa.png\"\u003e\n\t\t\u003cbr\u003e\n\t\u003c/a\u003e\n\t\u003cem\u003e\n\t\u003cspan\u003etrendyol international \u003ca href=\"https://www.trendyol.com/de\"\u003e web site\u003c/a\u003e\u003c/span\u003e\n\t\u003c/em\u003e\t\t\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\t\u003ca href=\"#\"\u003e\n\t\t\u003cimg alt=\"trendyol turkey mweb\" src=\"https://user-images.githubusercontent.com/32804505/196795524-0ca97ab8-0da5-4e5c-846c-50eab77af131.png\"\u003e\n\t\t\u003cbr\u003e\n\t\u003c/a\u003e\n\t\u003cem\u003e\n\t\u003cspan\u003etrendyol turkey \u003ca href=\"https://www.trendyol.com\"\u003e mobile web site\u003c/a\u003e \u003cp align=\"center\"\u003e(Please turn on devtool mobile emulator mod to view mweb site)\u003c/p\u003e\u003c/span\u003e\n\t\u003c/em\u003e\t\t\n\u003c/p\u003e\n\n\n\n### Contributions\nFeel free to contribute to PuzzleJs, please read [Contributions](./docs/CONTRIBUTING.md) for detailed information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpuzzle-js%2Fpuzzle-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpuzzle-js%2Fpuzzle-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpuzzle-js%2Fpuzzle-js/lists"}