Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tareqk/redom-app
A simple Single Page Application Framework Built on the RE:DOM library
https://github.com/tareqk/redom-app
Last synced: 11 days ago
JSON representation
A simple Single Page Application Framework Built on the RE:DOM library
- Host: GitHub
- URL: https://github.com/tareqk/redom-app
- Owner: TareqK
- Created: 2020-03-21T19:38:09.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-04-12T22:14:54.000Z (over 4 years ago)
- Last Synced: 2024-12-08T17:41:24.006Z (19 days ago)
- Language: JavaScript
- Homepage:
- Size: 20.4 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.MD
Awesome Lists containing this project
README
[](https://badge.fury.io/js/redom-app)
# Redom App
A simple Single Page Application Framework Built on the [RE:DOM](https://github.com/redom/redom)
library.
## Installation
```bash
npm install redom-app
```
## Getting Started
In your application entry point, add
```javascript
import {App} from 'redom-app'
/*some code*/
const app = new App().routes({
home: Home,
default: Home,
}).start()
```
where ```default``` is the default view if no other views are specified and each
key:value pair is the name of the route and the View class.
Each view looks like this
```javascript
class Home {
constructor() {
this.el = el('div', [//needs to be the property this.el
el('h1','home'),
// Rest of your elements, just like in RE:DOM
]);
}
update(params) {
//Do whatever you want with the parameters
}
}
```
## Redirection
```javascript
import {goto} from 'redom-app'
//some code here
goto('view-name',['param1','param2'])
```
## Middleware
```javascript
class SomeMiddleware {
constructor() {
}
//this is what the middleware method looks like
exec(currentView, nextView, params) {
if(//some condition here){
return 'other-view'// the view to redirect to. Stops execution of other middlewares
}else{
return nextView
}
}
}
/*in your entry point*/
const app = new App().routes({
home: Home,
default: Home,
}).middlewares([new SomeMiddleware()]).start()
```
## Example URLs
* ```http://mysite.com/#default ```
* ```http://mysite.com/#orders/1243-234-134-1234/delivery ```
* ```http://mysite.com/#my-profile/edit ```
## More Examples
Examples can be found in [here](https://github.com/TareqK/redom-app/blob/master/example/app.js)