!Ralix.js


> Microframework for building and organizing your front-end :sparkles:

Ralix is a modest JavaScript framework that provides barebones and utilities to help enhance your server-side rendered webapps.

Ralix consists basically in 3 pieces:

- Controllers: Controllers are meant to be mounted under a route path, they are like page-specific (scoped) JavaScript.
- Components: Components are like widgets you will have in several pages: modals, tooltips, notifications, etc.
- Helpers: Utilities to facilitate most common operations like: selectors, manipulations, events, ajax, etc. Check it out here.

You can read more about Ralix Design, Vision and Philosophy here.

Ralix pairs well with Rails and Turbo based applications. Check out more information here.

Installation

To install Ralix in your application, add the ralix package to your JavaScript bundle.

Using npm:

``
> npm install ralix
`

Using Yarn:

`
> yarn add ralix
`

Example application

Structure:

`
source/
├── components/
│ ├── modal.js
│ └── tooltip.js
├── controllers/
│ ├── application.js
│ ├── dashboard.js
│ └── users.js
└── app.js
`

$3

It's the entrypoint for your application (source/app.js), where you should load your modules and create a RalixApp instance: new RalixApp(). Then, you can _start_ your Ralix application by calling: App.start(). Don't forget to include your entrypoint in your layout.

`js
import { RalixApp } from 'ralix'

// Controllers
import AppCtrl from './controllers/application'
import DashboardCtrl from './controllers/dashboard'
import UsersCtrl from './controllers/users'

// Components with auto-start
import Modal from './components/modal'
import Tooltip from './components/tooltip'

const App = new RalixApp({
routes: {
'/dashboard': DashboardCtrl,
'/users': UsersCtrl,
'/.*': AppCtrl
},
components: [Modal, Tooltip]
})

App.start()
`

The App object is exposed globally via the window object. You can access the _current_ controller via App.ctrl.

$3

Define your _main_ controller (AppCtrl, MainCtrl, IndexCtrl, ...):

`js
// source/controllers/app.js

export default class AppCtrl {
goBack() {
back()
}

toggleMenu() {
toggleClass('#menu', 'hidden')
}
}
`

Inherit from your _main_ controller (read more):

`js
// source/controllers/users.js

import AppCtrl from './application'

export default class UsersCtrl extends AppCtrl {
constructor() {
super()
}

goBack() {
visit('/dashboard')
}

search() {
addClass('.search-result', 'hidden')
removeClass('.spinner', 'hidden')

setTimeout(() => {
submit('.search-form')
}, 300)
}
}
`

$3

Example of a component with auto-mount:

`js
// source/components/modal.js

export default class Modal {
static onload() {
findAll('.fire-modal').forEach(el => {
on(el, 'click', () => {
const modal = new Modal(data(el, 'url'))
modal.show()
})
})
}

constructor(url) {
this.url = url
}

show() {
const modal = find('#modal')
const modalBody = find('#modal__body')
const modalClose = find('#modal__close')

addClass(document.body, 'disable-scroll')
addClass(modal, 'open')

get(this.url).then((result) => {
insertHTML(modalBody, result)
})

on(modalClose, 'click', () => {
removeClass(document.body, 'disable-scroll')
removeClass(modal, 'open')
insertHTML(modalBody, 'Loading ...')
})
}
}
`

Then, in your HTML, you just need to define a link or button like with the following attributes:

`html
Open Remote Modal
`

$3

In your regular HTML code, now you can call directly Ralix Helpers or the methods provided by the _current_ Ralix controller, using regular HTML Events.

`html
Back
Toggle Menu



`js
// In your App object, inject your templates
import * as Templates from './templates'

const App = new RalixApp({
templates: Templates
})

// Define your templates as functions
export const itemCard = ({ title, description }) =>

// Or directly insert the generated HTML in your DOM
insertTemplate(
'.cards-container',
'itemCard',
{ title: item.title, description: item.description },
'end'
)
`

Ecosystem

$3

- Full Stack Web App: Rails with Ralix and Tailwind, via esbuild: https://github.com/ralixjs/rails-ralix-tailwind
- Multi-page Static Site: Middleman with Ralix and Tailwind: https://github.com/ralixjs/middleman-ralix-tailwind
- Single Page App: Ralix and Tailwind, with Parcel: https://github.com/ralixjs/ralix-tailwind

$3

- TodoMVC built with Ralix: https://github.com/ralixjs/ralix-todomvc
- Tonic Framework: https://github.com/Subgin/tonic

$3

- Visual Studio Code plugin: https://github.com/franpb14/RalixBoost

Development

Any kind of feedback, bug report, idea or enhancement are much appreciated.

To contribute, just fork the repo, hack on it and send a pull request. Don't forget to add tests for behaviour changes and run the test suite by:

`
> yarn test
`

If you also want to see the code coverage:

`
> yarn test --coverage
``

License

Copyright (c) Ralix Core Team. Ralix is released under the MIT License.