{"id":19903883,"url":"https://github.com/zerotohero-dev/badem","last_synced_at":"2025-11-25T09:01:32.959Z","repository":{"id":143802595,"uuid":"75905785","full_name":"zerotohero-dev/badem","owner":"zerotohero-dev","description":"[UNMAINTAINED] badem is an abstract component composer that does not require a DOM.","archived":false,"fork":false,"pushed_at":"2017-08-20T20:26:58.000Z","size":64,"stargazers_count":3,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-02T04:32:46.566Z","etag":null,"topics":["abstract","bytesized-javascript","bytesized-tv","component","demos","dom","education","javascript","json","learning","mapping","podcast","screencast","smartface","trainings","tree","tutorials","vidcast","videos","virtual-dom"],"latest_commit_sha":null,"homepage":"https://bytesized.tv/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zerotohero-dev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2016-12-08T05:21:02.000Z","updated_at":"2023-10-03T05:15:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"9ccd5a4b-0370-44a8-9675-6c1bb2a25be4","html_url":"https://github.com/zerotohero-dev/badem","commit_stats":null,"previous_names":["jsbites/badem"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerotohero-dev%2Fbadem","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerotohero-dev%2Fbadem/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerotohero-dev%2Fbadem/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerotohero-dev%2Fbadem/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zerotohero-dev","download_url":"https://codeload.github.com/zerotohero-dev/badem/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241331079,"owners_count":19945290,"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":["abstract","bytesized-javascript","bytesized-tv","component","demos","dom","education","javascript","json","learning","mapping","podcast","screencast","smartface","trainings","tree","tutorials","vidcast","videos","virtual-dom"],"created_at":"2024-11-12T20:25:49.362Z","updated_at":"2025-11-25T09:01:27.936Z","avatar_url":"https://github.com/zerotohero-dev.png","language":"JavaScript","readme":"## Unmaintained Software\n\nI’m not planning to contribute to this project for a while.\n\nIf you are interested in being a contributor, [please let me know](mailto:volkan.io).\n\nThanks,\n\nVolkan.\n\n----\n\n\n```\n  ______    ______    _____    ______    __    __\n /\\  == \\  /\\  __ \\  /\\  __-. /\\  ___\\  /\\ \"-./  \\\n \\ \\  __\u003c  \\ \\  __ \\ \\ \\ \\/\\ \\\\ \\  __\\  \\ \\ \\-./\\ \\\n  \\ \\_____\\ \\ \\_\\ \\_\\ \\ \\____- \\ \\_____\\ \\ \\_\\ \\ \\_\\\n   \\/_____/  \\/_/\\/_/  \\/____/  \\/_____/  \\/_/  \\/_/\n```\n\n`badem` is an abstract component composer that does not require a DOM.\n\n## Alpha-Stage Software Warning\n\n\u003e `badem` is in its early stages; so anything in its implementation can change.\n\u003e\n\u003e Until it hits `version 1.0`, I’ll be liberally introducing breaking changes, please keep that in mind and **fix your versions in your package.json** if you depend on `badem` in your apps.\n\u003e\n\u003e Once `badem` hits `version 1.0`, its API will stabilize, and the changes will be more backwards-compatible, as I will follow the [Semantic Versioning 2.0.0](http://semver.org/spec/v2.0.0.html) standards.\n\n## About `badem`\n\n`badem` started as a thought experiment:\n\n\u003e “What if you have to create components in an extremely-restricted environment where there is no DOM or `window`?”\n\nIn that kind of an environment, you have to create a **higher-order** mounter, that just creates a tree-like hierarchy and **delegates** the actual instantiation and initialization of the components “elsewhere” \\[1\\].\n\n\\[1\\]: “elsewhere” can be anything: A custom TV operating system, an IOC, a native application, a “Façade” to actual real-life components, like a robot’s arm.\n\n## Great Theory — Are There Any Practical Implementations?\n\nCurrently, I’m experimenting how to integrate `badem` to [smartface.io](https://smartface.io), so that you can render a **smartface.io** UI just by tracing a JSON descriptor.\n\nDefining how the UI will render and behave declaratively in a **JSON** file opens on many possibilities.\n\nOne of these possibilities is the ability to integrate a custom WYSIWYG designer to the code:\n\nSo the designer will generate a **JSON** instead of a large **code-behind** autogenerated code.\n\nThis approach has several advantages:\n\n* The footprint of the generated **JSON** is much smaller.\n* **JSON** is much declarative than your standard *code-behind* IDE code: **MUCH** easier to read and understand.\n* **JSON** is smaller in size, easier, and faster to generate.\n* You can serialize/deserialize a **JSON**, and it will reflect the same state across the boundaries of your system; you cannot do the same with an IDE-generated code, so parts of it might get “lost in translation” — Code is not serializable; data is.\n* The typical designer output is generally some form of an XML or JSON already; so it is much easier to convert it to a `badem`-compatible **JSON**.\n* The generation process is be less error-prone (see the “serialization” point above) — There are more edge cases when you generate actual source code: you can create invalid, or incomplete source code, you can have syntax errors, or logic errors that are hard to see)\n* Since `badem` JSON is an almost identical representation of the UI, it is a lot easier to spot out bugs and regressions.\n* Related to the above topic: Testing **JSON** is much easier than testing code: Once you create a proper schema-validator, you are almost there — no need to stub, or mock anything, because everything is **declarative**.\n\nThis declarative programming is **User Interface as Code**, which is (*much better and*) diagonally different from a “user-interface-generated code”.\n\n## Installation\n\nInstall using **NPM**:\n\n```bash\nnpm install badem --save\n```\n\n## The `dist` Folder\n\nThere are different `badem` distributions for various environments:\n\n* Use `require( 'badem/dist/nodejs' )` in a **Node.JS** environment.\n* Use `require( 'badem/dist/js' )` to be used in a **JavaScript** (ES6+) environment.\n\nI will add more distribution formats later.\n\n## Usage Examples\n\nHere’s how you mount components with `badem`:\n\n```js\nconst log = console.log;\n\n// Using the Node.JS distribution:\nconst mount = require( 'badem/dist/nodejs' ).mount;\n\nconst store = require( './store' );\nconst app = require( './app.json' );\n\nmount( store, app )\n    .then( () =\u003e log( 'All should have been done by now!' ) )\n    .catch( () =\u003e log( 'Oh poop!' ) );\n```\n\nSee the `./examples` folders for additional details and usage examples.\n\n## Dependencies\n\nFor development, you’ll need a recent version of [Node.JS](https://nodejs.org) and [NPM](https://npmjs.org).\n\nYou will need the **current** version of [Node.JS](https://nodejs.org/) with all the bells and whistles — [You can install it from nodejs.org](https://nodejs.org/).\n\n## Package Scripts\n\nHere are the helper npm scripts that you can run via `npm`:\n\n* `npm test`: Executes the unit tests.\n* `npm run lint`: Checks whether the source JavaScript is well-formed.\n* `npm run build:node`: Generate a **Node.JS** distribution inside the `./dist` folder.\n* `npm run build:js`: Generate a **JavaScript** (ES6+) distribution inside the `./dist` folder.\n* `npm run build`: Executes all of the `build:*` actions.\n\n## Important Files and Folders\n\n* `src`: The source files live here.\n* `dist`: Once you run the build script, distribution bundles will be placed here.\n* `bin`: Scripts that are mostly used by `npm`.\n* `CHANGELOG.md`: A log of what has been done since the last version.\n* `CODE_OF_CONDUCT.md`: Tells the collaborators to be nice to each other.\n* `README.md`: This very file.\n* `.babelrc`: Used for development; configures `babel`.\n* `.eslintrc`: Used for development; configures `eslint`.\n* `.travis.yml`: Used for CI; configures Travis.\n* `webpack.node.config.js`: Helps `webpack` to bundle a **Node.JS** distribution inside the `./dist` folder.\n\n## Wanna Help?\n\nAny help is more than appreciated.\n\nIf you want to contribute to the source code, **fork this repository** and **create a pull request**.\n\n\u003e In lieu of a formal style guide, take care to maintain the existing coding style.\n\nAlso, don’t forget to add unit tests for any new or changed functionality.\n\nIf you want to report a bug; or share a comment or suggestion, [file an issue](https://github.com/jsbites/badem/issues/new).\n\n## I’ve Found a Bug; I Have an Idea\n\n[For bug reports and suggestions, please file an issue](https://github.com/jsbites/badem/issues/new).\n\n## Contact Information\n\n* **Project Maintainer**: [Volkan Özçelik](https://volkan.io/)\n* **Project Website**: [bytesized.tv](https://bytesized.tv/)\n\n## License\n\nMIT-licensed. — [See the license file for details](LICENSE.md).\n\n## Code of Conduct\n\nWe are committed to making participation in this project a harassment-free experience for everyone, regardless of the level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, ethnicity, age, religion, or nationality.\n\n[See the code of conduct for details](CODE_OF_CONDUCT.md).\n\n## A [ByteSized.TV][vidcast] Project\n\nThis repository is a part of the [Byte-Sized JavaScript VideoCasts][vidcast].\n\nIt is a compilation of short (*around ten minutes*) screencasts about **JavaScript** and related technologies.\n\n[**Learn**, **explore**, and **have fun**][vidcast]!\n\n[vidcast]: https://bytesized.tv/ \"ByteSized.TV\"\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzerotohero-dev%2Fbadem","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzerotohero-dev%2Fbadem","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzerotohero-dev%2Fbadem/lists"}