{"id":28173423,"url":"https://github.com/memeddev/mdhub","last_synced_at":"2025-07-28T20:08:52.402Z","repository":{"id":41124978,"uuid":"195589045","full_name":"MemedDev/mdhub","owner":"MemedDev","description":"A javascript library to create micro front-end applications","archived":false,"fork":false,"pushed_at":"2022-12-06T17:22:26.000Z","size":59,"stargazers_count":14,"open_issues_count":6,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-28T20:03:29.286Z","etag":null,"topics":["javascript","library","microfrontend","microfrontends"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/MemedDev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-06T22:43:46.000Z","updated_at":"2024-12-02T18:36:27.000Z","dependencies_parsed_at":"2023-01-24T21:00:09.347Z","dependency_job_id":null,"html_url":"https://github.com/MemedDev/mdhub","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MemedDev/mdhub","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MemedDev%2Fmdhub","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MemedDev%2Fmdhub/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MemedDev%2Fmdhub/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MemedDev%2Fmdhub/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MemedDev","download_url":"https://codeload.github.com/MemedDev/mdhub/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MemedDev%2Fmdhub/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267578003,"owners_count":24110351,"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","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["javascript","library","microfrontend","microfrontends"],"created_at":"2025-05-15T20:13:31.029Z","updated_at":"2025-07-28T20:08:52.382Z","avatar_url":"https://github.com/MemedDev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MdHub\n\n\u003e A javascript library to create micro front-end applications\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/2197005/60761959-86abfe00-a02a-11e9-85a7-dc76f77a695c.png\" alt=\"mdhub\" /\u003e\u003c/p\u003e\n\n## Install\n\nYou can get it on npm.\n\n```\nnpm install mdhub --save\n```\n\n## Why\n\n`MdHub` was created in 2015, when [Memed](https://memed.com.br) faced a challenge building the new version of its SPA (Single Page Application):\n\n\u003e We need to integrate some \"screens\" of our new SPA on third-party SPAs, something like `modules` (Memed CTO, 2015)\n\nSome requirements was listed:\n\n1. Avoid CSS conflict\n2. Avoid JS libraries conflict\n3. Easy to use\n4. Only load what will be used\n\nPutting the SPA into an `iframe` solves the problems with CSS/JS conflicts. \n\nTo be easy to use, a JS Library can be made to create the `iframe` and exposes some methods to communicate with it using `postMessage`.\n\nTo only load what will be used, the SPA can have custom compilations (one for each third-party SPA), but will be hard to mantain. Other solution was to split the SPA into `modules`, and create an `iframe` for each module - this is what `MdHub` does and why it was created.\n\n`MdHub` takes care of:\n\n- Creating an `iframe` for each module\n- `iframe` styling\n- Communication between each module using commands and events (something like CQRS/ES) over `postMessage`\n- `iframe` displaying control (show or hide a module)\n- Management of modules dependencies (if `module.one` depends on `module.two`, `MdHub` will load it automatically)\n\n## Micro front-end is good?\n\nYes, but it's not a silver bullet. Some advantages:\n\n- Isolation (if a module breaks, other modules can continue working)\n- Follows the Single Responsibility Principle\n- Separate deployment\n- Separate development (team autonomy)\n- Easy to use different frameworks/libraries\n\nSome references:\n\n- [What are Micro Frontends?](https://micro-frontends.org/)\n- [awesome-micro-frontends](https://github.com/rajasegar/awesome-micro-frontends)\n- [Understanding Micro Frontends](https://hackernoon.com/understanding-micro-frontends-b1c11585a297)\n- [My experience using micro frontends](https://medium.com/passionate-people/my-experience-using-micro-frontends-e99a1ad6ed32)\n- [3 tips for scaling large Vue.js application](https://dev.to/maxpou/3-tips-for-scaling-large-vuejs-application-2edi)\n- [Slides from Usabilla - Micro Frontends](https://www.slideshare.net/spyrosioakeimidis/micro-frontends-86962142)\n- [Thoughtworks Technology Radar - Micro frontends - Adopt!](https://www.thoughtworks.com/radar/techniques/micro-frontends)\n- [Ask HN: What do you use to build micro-front ends?](https://news.ycombinator.com/item?id=13009285)\n\n## Special Thanks\n\nThank you for all the contributors of versions 1 and 2: Danilo Santos, Gabriel Couto, Cloves Santos, João Sales, Felipe Sousa, Rômulo Argolo, William Espindola, Carlos Júnior.\n\n## License\n\n[MIT](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmemeddev%2Fmdhub","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmemeddev%2Fmdhub","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmemeddev%2Fmdhub/lists"}