Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Marcisbee/radi
🌀Tiny (in size) front-end framework with no extra browser re-flows
https://github.com/Marcisbee/radi
dom hyperscript javascript radi radijs
Last synced: 15 days ago
JSON representation
🌀Tiny (in size) front-end framework with no extra browser re-flows
- Host: GitHub
- URL: https://github.com/Marcisbee/radi
- Owner: Marcisbee
- License: mit
- Created: 2018-01-09T17:29:23.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-04-05T09:12:45.000Z (over 1 year ago)
- Last Synced: 2024-05-21T08:13:22.106Z (6 months ago)
- Topics: dom, hyperscript, javascript, radi, radijs
- Language: JavaScript
- Homepage: https://radi.js.org
- Size: 3.02 MB
- Stars: 948
- Watchers: 45
- Forks: 34
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: changelog.json
- License: LICENSE
Awesome Lists containing this project
README
> [!IMPORTANT]
> **This project is no longer maintained!**
>
> From ashes [state management library "exome"](https://github.com/marcisbee/exome) was born. Go check it out, it works with any framework or as a vanilla standalone lib.
---
# 
**Radi** is a tiny javascript framework.
It's built quite differently from any other framework. It doesn't use any kind of diffing algorithm nor virtual dom which makes it really fast.
With Radi you can create any kind of single-page applications or more complex applications.
[](https://www.npmjs.com/package/radi)
[](https://www.npmjs.com/package/radi)
[](https://unpkg.com/radi@latest/dist/radi.js)
[](https://discord.gg/a62gfaDW2e)
## Installation
To install the stable version:
```
npm install --save radi
```
This assumes you are using [npm](https://www.npmjs.com/) as your package manager.
If you're not, you can [access these files on unpkg](https://unpkg.com/radi/dist/), download them, or point your package manager to them.
#### Browser Compatibility
Radi.js currently is compatible with browsers that support at least ES5.
## Ecosystem
| Project | Status | Description |
|---------|--------|-------------|
| [radi-router] | [![radi-router-status]][radi-router-package] | Single-page application routing |
| [radi-fetch] | [![radi-fetch-status]][radi-fetch-package] | HTTP client for Radi.js |
[radi-router]: https://github.com/radi-js/radi-router
[radi-router-status]: https://img.shields.io/npm/v/radi-router.svg?style=flat-square
[radi-router-package]: https://npmjs.com/package/radi-router
[radi-fetch]: https://github.com/radi-js/radi-fetch
[radi-fetch-status]: https://img.shields.io/npm/v/radi-fetch.svg?style=flat-square
[radi-fetch-package]: https://npmjs.com/package/radi-fetch
## Documentation
[Getting started guide](/docs)
Here are just a few examples to work our appetite.
#### Hello World example
Lets create component using JSX, tho it's not mandatory
we can just use hyperscript `r('h1', 'Hello', this.sample, '!')`. I'm using JSX for html familiarity and to showcase compatibility.
```jsx
/** @jsx Radi.r **/
class Hello extends Radi.component {
state() {
return { sample: 'World' };
}
view() {
return (
Hello { this.state.sample } !
)
}
}
Radi.mount(, document.body);
```
This example will mount h1 to body like so `
Hello World
`
#### Counter example (With Single File Component syntax)
This will be different as we'll need to update state and use actions. Only actions can change state and trigger changes in DOM.
Also we'll be using our SFC syntax for `*.radi` files
`Counter.radi`
```jsx
class {
state = {
count: 0
}
@action up() {
return {
count: this.state.count +1
}
}
@action down() {
return {
count: this.state.count -1
}
}
}
{ this.state.count }
this.down() } disabled={ this.state.count <= 0 }>-
this.up() }>+
```
## Architecture
Radi fully renders page only once initially. After that `listeners` take control. They can listen for state changes in any Radi component. When change in state is caught, listener then re-renders only that part.
Other frameworks silently re-renders whole page over and over again, then apply changes. But radi only re-renders parts that link to changed state values.
To check out [live repl](https://radi.js.org/#/fiddle) and [docs](https://radi.js.org/#/docs), visit [radi.js.org](https://radi.js.org).
## Stay In Touch
- [Twitter](https://twitter.com/radi_js)
- [Slack](https://join.slack.com/t/radijs/shared_invite/enQtMjk3NTE2NjYxMTI2LWFmMTM5NTgwZDI5NmFlYzMzYmMxZjBhMGY0MGM2MzY5NmExY2Y0ODBjNDNmYjYxZWYxMjEyNjJhNjA5OTJjNzQ)
## License
[MIT](http://opensource.org/licenses/MIT)
Copyright (c) 2017-present, Marcis (Marcisbee) Bergmanis