https://github.com/frintjs/frint
Modular JavaScript framework for building scalable and reactive applications
https://github.com/frintjs/frint
dependency-injection framework javascript react reactive rxjs vue
Last synced: 5 months ago
JSON representation
Modular JavaScript framework for building scalable and reactive applications
- Host: GitHub
- URL: https://github.com/frintjs/frint
- Owner: frintjs
- License: mit
- Created: 2016-07-06T12:25:55.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-09-22T05:41:37.000Z (about 7 years ago)
- Last Synced: 2025-07-05T13:11:28.707Z (6 months ago)
- Topics: dependency-injection, framework, javascript, react, reactive, rxjs, vue
- Language: JavaScript
- Homepage: https://frint.js.org/
- Size: 2.02 MB
- Stars: 757
- Watchers: 25
- Forks: 33
- Open Issues: 61
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-micro-frontends - frint
- awesome-ccamel - frintjs/frint - Modular JavaScript framework for building scalable and reactive applications (JavaScript)
README
# frint
[](https://www.npmjs.com/package/frint)
[](http://travis-ci.org/frintjs/frint)
[](https://codecov.io/gh/frintjs/frint)
[](https://nodesecurity.io/orgs/travix-international-bv/projects/a1b03b99-d210-41f8-88c5-44313d27ab6f)
[](https://gitter.im/frintjs/frint)
[](https://greenkeeper.io/)
> The modular JavaScript framework
For documentation, visit [https://frint.js.org](https://frint.js.org).
Key characteristics and features include:
* Gives your applications a **structure**
* **Environment** agnostic (runs in browser, server, and CLI)
* **Rendering** library agnostic (integrates with React, Vue, and Preact)
* **Composable** with multiple packages as needed
* Each package is focused on doing **one thing** only and doing it well
* **Modular** architecture with Apps
* Embraces **reactive programming** with RxJS
* **Progressive** and easy to adopt in existing applications
This project adheres to the Contributor Covenant code of conduct. By participating, you are expected to uphold this code.
Please report unacceptable behavior to frintjs-conduct@googlegroups.com.
## Quick start
Install [`frint-cli`](https://frint.js.org/docs/packages/frint-cli/):
```
$ npm install -g frint-cli
```
Initialize an example app:
```
$ frint new my-directory --example kitchensink
```
Now you can install all the dependencies, and start the application:
```
$ cd my-directory
$ npm install
$ npm start
```
Find more examples [here](https://github.com/frintjs/frint/tree/master/examples).
## Packages
The framework is a collection of these packages, which can be composed together on demand:
| Package | Status | Description |
|------------------------------------|--------------------------------------------------------------------------------------|-------------|
| [frint] | [![frint-status]][frint-package] | Base for creating Apps |
| [frint-store] | [![frint-store-status]][frint-store-package] | State management with reactive stores |
| [frint-data] | [![frint-data-status]][frint-data-package] | Reactive data modelling |
| [frint-react] | [![frint-react-status]][frint-react-package] | React.js integration |
| [frint-react-server] | [![frint-react-server-status]][frint-react-server-package] | Server-side rendering of Apps |
| [frint-router] | [![frint-router-status]][frint-router-package] | Router services for building Single Page Applications |
| [frint-router-react] | [![frint-router-react-status]][frint-router-react-package] | React components for building SPAs |
| [frint-cli] | [![frint-cli-status]][frint-cli-package] | CLI runner |
| [frint-model] | [![frint-model-status]][frint-model-package] | Use `frint-data` instead |
### For library developers
These packages enable you to create packages integrating FrintJS with other rendering libraries:
* [frint-component-utils]: Utils for reactive Components
* [frint-component-handlers]: Handlers for integrating with other rendering libraries
* [frint-router-component-handlers]: Handlers for integrating `frint-router` with other rendering libraries
### Internally used
* [frint-test-utils]: Internally used test utilities
* [frint-config]: Common config for your Apps
* [frint-compat]: Backwards compatibility for older versions
[frint]: https://frint.js.org/docs/packages/frint
[frint-store]: https://frint.js.org/docs/packages/frint-store
[frint-model]: https://frint.js.org/docs/packages/frint-model
[frint-data]: https://frint.js.org/docs/packages/frint-data
[frint-react]: https://frint.js.org/docs/packages/frint-react
[frint-react-server]: https://frint.js.org/docs/packages/frint-react-server
[frint-router]: https://frint.js.org/docs/packages/frint-router
[frint-router-react]: https://frint.js.org/docs/packages/frint-router-react
[frint-cli]: https://frint.js.org/docs/packages/frint-cli
[frint-compat]: https://frint.js.org/docs/packages/frint-compat
[frint-component-utils]: https://frint.js.org/docs/packages/frint-component-utils
[frint-component-handlers]: https://frint.js.org/docs/packages/frint-component-handlers
[frint-router-component-handlers]: https://frint.js.org/docs/packages/frint-router-component-handlers
[frint-test-utils]: https://frint.js.org/docs/packages/frint-test-utils
[frint-config]: https://frint.js.org/docs/packages/frint-config
[frint-status]: https://img.shields.io/npm/v/frint.svg
[frint-store-status]: https://img.shields.io/npm/v/frint-store.svg
[frint-model-status]: https://img.shields.io/badge/status-deprecated-orange.svg
[frint-data-status]: https://img.shields.io/npm/v/frint-data.svg
[frint-react-status]: https://img.shields.io/npm/v/frint-react.svg
[frint-react-server-status]: https://img.shields.io/npm/v/frint-react-server.svg
[frint-router-status]: https://img.shields.io/npm/v/frint-router.svg
[frint-router-react-status]: https://img.shields.io/npm/v/frint-router-react.svg
[frint-cli-status]: https://img.shields.io/npm/v/frint-cli.svg
[frint-compat-status]: https://img.shields.io/npm/v/frint-compat.svg
[frint-component-utils-status]: https://img.shields.io/npm/v/frint-component-utils.svg
[frint-component-handlers-status]: https://img.shields.io/npm/v/frint-component-handlers.svg
[frint-router-component-handlers-status]: https://img.shields.io/npm/v/frint-router-component-handlers.svg
[frint-test-utils-status]: https://img.shields.io/npm/v/frint-test-utils.svg
[frint-config-status]: https://img.shields.io/npm/v/frint-config.svg
[frint-package]: https://npmjs.com/package/frint
[frint-store-package]: https://npmjs.com/package/frint-store
[frint-model-package]: https://npmjs.com/package/frint-model
[frint-data-package]: https://npmjs.com/package/frint-data
[frint-react-package]: https://npmjs.com/package/frint-react
[frint-react-server-package]: https://npmjs.com/package/frint-react-server
[frint-router-package]: https://npmjs.com/package/frint-router
[frint-router-react-package]: https://npmjs.com/package/frint-router-react
[frint-cli-package]: https://npmjs.com/package/frint-cli
[frint-compat-package]: https://npmjs.com/package/frint-compat
[frint-component-utils-package]: https://npmjs.com/package/frint-component-utils
[frint-component-handlers-package]: https://npmjs.com/package/frint-component-handlers
[frint-router-component-handlers-package]: https://npmjs.com/package/frint-router-component-handlers
[frint-test-utils-package]: https://npmjs.com/package/frint-test-utils
[frint-config-package]: https://npmjs.com/package/frint-config
## Community projects
* [frint-vue](https://github.com/frintjs/frint-vue): Vue.js integration
* [frint-react-native](https://github.com/frintjs/frint-react-native): React Native integration
## License
MIT © [FrintJS Authors](https://github.com/frintjs/frint/graphs/contributors) and [Travix International](http://travix.com)