UX.js is a powerful and lightweight JavaScript framework designed for building both single-page applications (SPAs) and multi-page applications (MPAs) with ease. It provides a structured and efficient approach to frontend development, enabling developers to create dynamic, interactive, and highly responsive web applications for better user experiences.
Key Features of UX.js
- Automates the most common front-end development tasks
- UX Components - The framework introduces a component-based architecture
- UX Plugin Support - Extend the core functionality of UX.js with plugins
- Reactive Modules - The framework has a reactive model
With its focus on simplicity, flexibility, and performance, UX.js is an excellent choice for developers looking to build modern web applications with a clean and maintainable codebase.
Use jsdelivr for CDN hosting: https://cdn.jsdelivr.net/gh/flaneurette/UX.js@master/src/UX.js
Or download and clone the full package.
The release of UX.js v1.8 brings significant improvements, making the framework more powerful and flexible than ever. This version introduces:
- Reactive Models - A new reactivity system that ensures data updates are seamlessly reflected across the application without manual intervention. This enhancement simplifies state management and improves performance by efficiently handling UI updates.
- Plugin Support - Developers can now extend UX.js with plugins, enabling easy integration of additional features, third-party tools, and custom functionalities. This opens the door for a more modular and scalable development experience.
Components are reusable HTML fragments with a .ux extension. UX.js components separates HTML from scripts, and renders these components within a HTML page asynchronously with the :render or :route attribute. For a demo, see UX-render.html in the examples folder.
A UX component is a self-contained UI element written in .ux format. It is possible to call all UX.js one-way attribute bindings to achieve certain features.
Example of a .ux Component:
<section>
<header>
<h1>{{title}}</h1>
</header>
<nav>
<ul :loop="links">
<li>{{link}}</li>
</ul>
</nav>
</section>
A local or live webserver.
A simple example of how UX.js works.
A reactive module loader example, using the :reactive attribute to route and execute modules.
A webcomponents example, using the :shadow attribute.
An example of rendering reusable UX components from the /components/ directory.
An example of asynchronous component routing, using the :route attribute.
An example of event binding to trigger CSS transformations, using the :switch attribute.
An example to trigger a slide, using the :wheel attribute.
An example on how to move objects, using the :swipe attribute.
An example handling touch events using the :touch attribute
An example loading JSON and showing the shimmer effect
An example with a spinner loader using the :spinner attribute
An example flipping objects using the :flip attribute
An drag and drop example plugin from /plugins/
An example to trigger a different mode, light or dark.
An example showing the :observe attribute, to observe intersections
An example showing the :hamburger attribute, same as ux-toggle.
An example showing the :toggle attribute, to switch a menu on/off.
An example showing the :input attribute
An example creating a shopping cart with UX.js.
An example showing the :fade attribute to fade items into view.
An example showing the :view attribute to scroll items into view.
An example with a progressmeter, to pseudo measure page loading with the :progress attribute
An example creating a gallery through methods.
An example showing the :grow attribute, to grow elements dynamically on scroll into view.
An example showing the :animate attribute, to dynamically animate objects.
An example fetching unique JSON and displaying it.
An example lazyloading objects with :lazyload attribute
An example lazyloading images with :lazyimg attribute
An example creating evenlisteners through the :handler attribute.
An example how to bind to classes.
Listens for an event and executes a global function.
Listens for an event and executes a subscribed function (useful with :reactive)
An example to see how the IF statements in UX.js works
An example of how the loop function in UX.js works
An example to show and hide objects in HTML
An example showing the :zebra attribute, dynamically generated with UX.js
An example showing the :active URL attribute, to switch css classes dynamically
An example showing the :select attribute, to switch css classes dynamically
An example showing the :flex attribute, dynamically generated with UX.js (no CSS)
An example showing the :scroll attribute
An example showing the :void attribute
An example showing the :link attribute
An example of how form async in UX.js works
An example showing a http request
An example to trigger events
An example of how methods in UX.js works (under development)
An example showing a form, dynamically generated with UX.js
UX.js provides a reactive state system similar to Vue.js and React.js.
UX.js allows extending functionality using plugins.