{"id":14990381,"url":"https://github.com/nx-js/framework","last_synced_at":"2025-04-07T12:08:29.247Z","repository":{"id":57132526,"uuid":"60166966","full_name":"nx-js/framework","owner":"nx-js","description":"A modular front-end framework - inspired by the server-side and Web Components.","archived":false,"fork":false,"pushed_at":"2017-02-10T19:31:33.000Z","size":218,"stargazers_count":465,"open_issues_count":11,"forks_count":30,"subscribers_count":29,"default_branch":"master","last_synced_at":"2025-03-31T10:11:11.859Z","etag":null,"topics":["es6","framework","frontend","javascript","middlewares","webcomponents"],"latest_commit_sha":null,"homepage":"https://nx-framework.com","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/nx-js.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-06-01T10:15:11.000Z","updated_at":"2025-03-15T20:58:22.000Z","dependencies_parsed_at":"2022-09-02T10:50:06.585Z","dependency_job_id":null,"html_url":"https://github.com/nx-js/framework","commit_stats":null,"previous_names":["risingstack/nx-framework"],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nx-js%2Fframework","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nx-js%2Fframework/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nx-js%2Fframework/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nx-js%2Fframework/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nx-js","download_url":"https://codeload.github.com/nx-js/framework/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247542209,"owners_count":20955800,"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":["es6","framework","frontend","javascript","middlewares","webcomponents"],"created_at":"2024-09-24T14:20:00.631Z","updated_at":"2025-04-07T12:08:29.231Z","avatar_url":"https://github.com/nx-js.png","language":"JavaScript","readme":"# The NX framework\n\n[Home page](http://nx-framework.com), [Docs](http://nx-framework.com/docs)\n\n**NX is a modular front-end framework - built with ES6 and Web Components. The building\nblocks of NX are the core, the middlewares, the components and the utilities. These are\nall hosted in separate GitHub repos and npm packages.**\n\nThe NX core is a tiny library, responsible for one thing only. It allows you to create dumb components and to augment them with middlewares. A component executes its middlewares when it is attached to the DOM and it gains all the extra functionalities from them. NX comes with some core middlewares out of the box, which you can find listed below.\n\n- Text interpolation: Interpolate values from the code into the view dynamically or one-time. Includes optional filters.\n- Dynamic and custom attributes: Use one-time or dynamically evaluated native attributes or define some custom ones.\n- Event handling: Add inline event handlers to listen on any event. Includes optional rate limiters.\n- Visual flow: Use conditional blocks and loops inside the HTML view.\n- Data binding: One-way, one-time or two-way data binding on any event and with no edge cases.\n- Rendering: Modularize your HTML and CSS code by moving them into separate files for each component.\n- Routing: Simple, but powerful routing with automatic parameter synchronization and router events.\n- Metadata and analytics: Handle your SPA's metadata and analytics declaratively with ease.\n- Dynamic styling: Simplify styling by passing objects to the style and class attributes.\n- Animations: Create powerful animations by using only a few HTML attributes.\n- Some other low level middlewares, mentioned in the Docs.\n- Anything else you define with the simple `function middleware (elem, state, next) {}` syntax.\n\nThese can be combined to create components with the desired functionality.\nAlternatively ready made core components can be extended and used,\nto avoid boilerplate code.\n\n## Resources\n\n- [Home page](http://nx-framework.com/)\n- [Docs](http://nx-framework.com/docs)\n- [Intro app](https://github.com/nx-js/intro-example)\n- [TodoMVC](https://github.com/nx-js/todomvc-example)\n- [Hacker News clone](https://github.com/nx-js/hackernews-example)\n- [Blog](http://nx-framework.com/blog/public)\n- [Article series about writing NX](https://blog.risingstack.com/writing-a-javascript-framework-project-structuring/)\n\n## Installation\n\nYou can get NX from npm with the `npm install @nx-js/framework` command. See the\n[installation page](http://nx-framework.com/install) for other options.\n\n## Local development\n\nYou can bundle the framework locally with the `npm run build` command and minify it\nwith the `npm run minify` command. The bundled and minified files are placed in the\n`lib` folder.\n\n## Contributing\n\n[A list of contributors](/contributors.md)\n\nNX is very modular and every module is hosted in its own GitHub repository. Please\nopen the issues and PRs in the relevant repositories. For example: if you have a feature\nrequest for routing, open a new issue in the\n[route-middleware](https://github.com/nx-js/route-middleware) repo.\n\n## Sponsored by\n\n\u003ca href=\"https://trace.risingstack.com/\"\u003e\n  \u003cimg src=\"http://nx-framework.com/images/trace_colored.svg\" width=\"200\" /\u003e\n\u003c/a\u003e\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnx-js%2Fframework","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnx-js%2Fframework","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnx-js%2Fframework/lists"}