{"id":13515768,"url":"https://github.com/ralixjs/ralix","last_synced_at":"2025-03-31T05:30:56.504Z","repository":{"id":34924268,"uuid":"190735189","full_name":"ralixjs/ralix","owner":"ralixjs","description":"✨  Microframework for building and organizing your front-end","archived":false,"fork":false,"pushed_at":"2023-10-20T16:08:17.000Z","size":957,"stargazers_count":95,"open_issues_count":3,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-05-17T15:24:44.253Z","etag":null,"topics":["es6","frontend","html","javascript","lightweight","microframework","minimal","ralix","utilities"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ralix","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/ralixjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-06-07T11:49:29.000Z","updated_at":"2024-03-16T22:31:39.000Z","dependencies_parsed_at":"2023-10-20T17:37:07.037Z","dependency_job_id":null,"html_url":"https://github.com/ralixjs/ralix","commit_stats":{"total_commits":144,"total_committers":11,"mean_commits":"13.090909090909092","dds":"0.24305555555555558","last_synced_commit":"bbf1e66966cf3003875aac77fbcaa56ce811e01a"},"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ralixjs%2Fralix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ralixjs%2Fralix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ralixjs%2Fralix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ralixjs%2Fralix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ralixjs","download_url":"https://codeload.github.com/ralixjs/ralix/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246423527,"owners_count":20774795,"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","frontend","html","javascript","lightweight","microframework","minimal","ralix","utilities"],"created_at":"2024-08-01T05:01:15.783Z","updated_at":"2025-03-31T05:30:56.499Z","avatar_url":"https://github.com/ralixjs.png","language":"JavaScript","readme":"![Ralix.js](https://raw.githubusercontent.com/ralixjs/ralix/master/logos/cover.jpg)\n\n[![](https://github.com/ralixjs/ralix/actions/workflows/ci.yml/badge.svg)](https://github.com/ralixjs/ralix/actions/workflows/ci.yml)\n[![](https://img.shields.io/npm/v/ralix.svg)](https://www.npmjs.com/package/ralix)\n[![](https://api.codeclimate.com/v1/badges/8e91bd9dc7263d19291c/maintainability)](https://codeclimate.com/github/ralixjs/ralix/maintainability)\n[![](https://api.codeclimate.com/v1/badges/8e91bd9dc7263d19291c/test_coverage)](https://codeclimate.com/github/ralixjs/ralix/test_coverage)\n[![](https://img.shields.io/npm/l/ralix)](https://github.com/ralixjs/ralix/blob/master/LICENSE)\n\n\u003e Microframework for building and organizing your front-end :sparkles:\n\nRalix is a modest JavaScript framework that provides barebones and utilities to help enhance your server-side rendered webapps.\n\nRalix consists basically in 3 pieces:\n\n- `Controllers`: Controllers are meant to be mounted under a route path, they are like page-specific (scoped) JavaScript.\n- `Components`: Components are like widgets you will have in several pages: modals, tooltips, notifications, etc.\n- `Helpers`: Utilities to facilitate most common operations like: selectors, manipulations, events, ajax, etc. [Check it out here](docs/HELPERS_API.md).\n\nYou can read more about Ralix Design, Vision and Philosophy [here](docs/DESIGN.md).\n\nRalix pairs well with `Rails` and `Turbo` based applications. Check out [more information here](docs/RAILS_INTEGRATION.md).\n\n## Installation\n\nTo install Ralix in your application, add the `ralix` [package](https://www.npmjs.com/package/ralix) to your JavaScript bundle.\n\nUsing `npm`:\n\n```\n\u003e npm install ralix\n```\n\nUsing `Yarn`:\n\n```\n\u003e yarn add ralix\n```\n\n## Example application\n\nStructure:\n\n```\nsource/\n├── components/\n│   ├── modal.js\n│   └── tooltip.js\n├── controllers/\n│   ├── application.js\n│   ├── dashboard.js\n│   └── users.js\n└── app.js\n```\n\n### App object\n\nIt'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.\n\n```js\nimport { RalixApp }  from 'ralix'\n\n// Controllers\nimport AppCtrl       from './controllers/application'\nimport DashboardCtrl from './controllers/dashboard'\nimport UsersCtrl     from './controllers/users'\n\n// Components with auto-start\nimport Modal         from './components/modal'\nimport Tooltip       from './components/tooltip'\n\nconst App = new RalixApp({\n  routes: {\n    '/dashboard': DashboardCtrl,\n    '/users':     UsersCtrl,\n    '/.*':        AppCtrl\n  },\n  components: [Modal, Tooltip]\n})\n\nApp.start()\n```\n\nThe `App` object is exposed globally via the `window` object. You can access the _current_ controller via `App.ctrl`.\n\n### Controllers\n\nDefine your _main_ controller (AppCtrl, MainCtrl, IndexCtrl, ...):\n\n```js\n// source/controllers/app.js\n\nexport default class AppCtrl {\n  goBack() {\n    back()\n  }\n\n  toggleMenu() {\n    toggleClass('#menu', 'hidden')\n  }\n}\n```\n\nInherit from your _main_ controller ([read more](docs/DESIGN.md#controllers)):\n\n```js\n// source/controllers/users.js\n\nimport AppCtrl from './application'\n\nexport default class UsersCtrl extends AppCtrl {\n  constructor() {\n    super()\n  }\n\n  goBack() {\n    visit('/dashboard')\n  }\n\n  search() {\n    addClass('.search-result', 'hidden')\n    removeClass('.spinner', 'hidden')\n\n    setTimeout(() =\u003e {\n      submit('.search-form')\n    }, 300)\n  }\n}\n```\n\n### Components\n\nExample of a component with auto-mount:\n\n```js\n// source/components/modal.js\n\nexport default class Modal {\n  static onload() {\n    findAll('.fire-modal').forEach(el =\u003e {\n      on(el, 'click', () =\u003e {\n        const modal = new Modal(data(el, 'url'))\n        modal.show()\n      })\n    })\n  }\n\n  constructor(url) {\n    this.url = url\n  }\n\n  show() {\n    const modal      = find('#modal')\n    const modalBody  = find('#modal__body')\n    const modalClose = find('#modal__close')\n\n    addClass(document.body, 'disable-scroll')\n    addClass(modal, 'open')\n\n    get(this.url).then((result) =\u003e {\n      insertHTML(modalBody, result)\n    })\n\n    on(modalClose, 'click', () =\u003e {\n      removeClass(document.body, 'disable-scroll')\n      removeClass(modal, 'open')\n      insertHTML(modalBody, 'Loading ...')\n    })\n  }\n}\n```\n\nThen, in your HTML, you just need to define a link or button like with the following attributes:\n\n```html\n\u003cbutton class=\"fire-modal\" data-url=\"/example-modal\"\u003eOpen Remote Modal\u003c/button\u003e\n```\n\n### Views\n\nIn your regular HTML code, now you can call directly [Ralix Helpers](docs/HELPERS_API.md) or the methods provided by the _current_ Ralix controller, using regular HTML Events.\n\n```html\n\u003ca href=\"#\" onclick=\"goBack()\"\u003eBack\u003c/a\u003e\n\u003ca href=\"#\" onclick=\"toggleMenu()\"\u003eToggle Menu\u003c/a\u003e\n\u003cinput type=\"text\" name=\"query\" onkeyup=\"search()\"\u003e\n\u003cdiv onclick=\"visit('/sign-up')\"\u003e...\u003c/div\u003e\n```\n\n### Templates\n\nRalix provides also a minimalistic template engine, useful to DRY small snippets you need to render from your front-end. Under the hood, it uses JavaScript Functions with Template literals.\n\n```js\n// In your App object, inject your templates\nimport * as Templates from './templates'\n\nconst App = new RalixApp({\n  templates: Templates\n})\n\n// Define your templates as functions\nexport const itemCard = ({ title, description }) =\u003e `\n  \u003cdiv class=\"item-card\"\u003e\n    \u003ch1\u003e${title}\u003c/h1\u003e\n    \u003cp\u003e${description}\u003c/p\u003e\n  \u003c/div\u003e\n`\n\n// Call it via\nrender('itemCard', {\n  title: item.title,\n  description: item.description\n})\n```\n\n## Ecosystem\n\n### Starter kits\n\n- **Full Stack Web App:** Rails with Ralix and Tailwind, via esbuild: https://github.com/ralixjs/rails-ralix-tailwind\n- **Multi-page Static Site:** Middleman with Ralix and Tailwind: https://github.com/ralixjs/middleman-ralix-tailwind\n- **Single Page App:** Ralix and Tailwind, with Parcel: https://github.com/ralixjs/ralix-tailwind\n\n### Applications\n\n- TodoMVC built with Ralix: https://github.com/ralixjs/ralix-todomvc\n- Tonic Framework: https://github.com/Subgin/tonic\n\n### Others\n\n- Visual Studio Code plugin: https://github.com/franpb14/RalixBoost\n\n## Development\n\nAny kind of feedback, bug report, idea or enhancement are much appreciated.\n\nTo 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:\n\n```\n\u003e yarn test\n```\n\nIf you also want to see the code coverage:\n\n```\n\u003e yarn test --collectCoverage\n```\n\n## License\n\nCopyright (c) Ralix Core Team. Ralix is released under the [MIT](LICENSE) License.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fralixjs%2Fralix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fralixjs%2Fralix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fralixjs%2Fralix/lists"}