{"id":18412880,"url":"https://github.com/rproenza86/jsx-micro-ui-poc","last_synced_at":"2026-05-04T05:31:23.055Z","repository":{"id":96672909,"uuid":"163046029","full_name":"rproenza86/jsx-micro-ui-poc","owner":"rproenza86","description":"Web app to show how to use Micro UI architecture an to use an event distribution system to communicate apps events between Micro UI apps","archived":false,"fork":false,"pushed_at":"2018-12-27T04:08:13.000Z","size":430,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-12T23:47:32.626Z","etag":null,"topics":["micro-frontend","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://micro-ui-system.firebaseapp.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rproenza86.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-12-25T04:29:40.000Z","updated_at":"2019-02-05T22:04:31.000Z","dependencies_parsed_at":"2023-03-17T14:15:41.929Z","dependency_job_id":null,"html_url":"https://github.com/rproenza86/jsx-micro-ui-poc","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rproenza86%2Fjsx-micro-ui-poc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rproenza86%2Fjsx-micro-ui-poc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rproenza86%2Fjsx-micro-ui-poc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rproenza86%2Fjsx-micro-ui-poc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rproenza86","download_url":"https://codeload.github.com/rproenza86/jsx-micro-ui-poc/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248647256,"owners_count":21139081,"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":["micro-frontend","reactjs","typescript"],"created_at":"2024-11-06T03:43:56.640Z","updated_at":"2026-05-04T05:31:18.029Z","avatar_url":"https://github.com/rproenza86.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @rproenza/jsx-micro-ui-poc\n\n\u003e [Online demo](https://micro-ui-system.firebaseapp.com/)\n\n## Description\n\nWeb app to show how to use Micro UI/Micro Frontends architecture an use an event distribution system to communicate apps events.\n\nThe idea behind [Micro Frontends](https://micro-frontends.org/) is to think about a website or web app as a composition of features which are owned by independent teams. Each team has a distinct area of business or mission it cares about and specializes in. A team is cross functional and develops its features end-to-end, from database to user interface.\n\n## Web app concepts\n\n### Micro UI\n\n[@rproenza/appointment-date-picker](https://github.com/rproenza86/appointment-date-picker) is a Micro UI created to showcase this architectural solution. It was developed as an npm module flexible enough to adapt its style and behavior.\n\n#### Ex. of it use\n\n```javascript\nimport AppointmentDatePicker from '@rproenza/appointment-date-picker';\nimport { EventsDistributor } from './../../index';\n\nconst { createStore, initApp, appName } = AppointmentDatePicker;\nconst AppointmentDatePickerInitialState = {\n    appointmentData: {\n        day: '2018-12-19T16:39:14.953Z',\n        email: 'raul@gmail.com',\n        firstName: 'Raul',\n        lastName: 'Proenza',\n        time: 'Morning'\n    }\n};\nconst appointmentStore = createStore(AppointmentDatePickerInitialState);\nEventsDistributor.registerStore(appName, appointmentStore);\ninitApp(appointmentStore, 'MicroUICmp', EventsDistributor);\n```\n\n#### Screenshot\n![image](docs/MicroUI_app.png)\n\n### Event communication system\n\n[@rproenza/events-distributor](https://github.com/rproenza86/events-distributor) is a npm module create to support the communication between Micro UI apps. Its architecture is inspired by the \"Pub/Sub\" architecture pattern allowing to the apps subscribe its stores to the `events-distributor` an dispatch events at convenience broadcasting/publishing actions to all subscribed apps or targeting specific ones.\n\nEx.:\n\n```javascript\nconst resetState = {\n    type: 'INIT_SUCCESS',\n    payload: {\n        appointmentData: {\n            day: '2018-12-10T16:39:14.953Z',\n            hasError: false,\n            time: 'Morning'\n        }\n    },\n    meta: { appSource: 'ParentApp', eventType: 'BROAD_CAST_ACTION' }\n};\n\nEventsDistributor.dispatch(resetState);\n```\n\n#### Screenshot\n\n\u003e Action dispatched on the onClick event of the reset button\n\n![image](docs/Reset_button.png)\n\n## Installation\n\n```sh\ngit clone git@github.com:rproenza86/jsx-micro-ui-poc.git\n\ncd jsx-micro-ui-poc\n\nnpm ci\n```\n\n## Usage\n\n```sh\nnpm start\n```\n\n## Test\n\n```sh\nnpm run test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frproenza86%2Fjsx-micro-ui-poc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frproenza86%2Fjsx-micro-ui-poc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frproenza86%2Fjsx-micro-ui-poc/lists"}