@qbix/q.js - npm

npm

Search<br>Sign UpSign In

@qbix/q.js<br>1.0.0 • Public • Published a minute ago<br>Readme<br>Code Beta<br>0 Dependencies<br>0 Dependents<br>1 Versions<br>Q.js

All-In-One Front-End Web Framework from Qbix, alternative to jQuery, Angular, Vue etc.

Size: ~40KB (Minified + GZipped), compare to other frameworks

How to use: copy contents of dist into your project, and then include it like this:

File Type<br>Code to Use

.html files<br>import { Q } from 'https://unpkg.com/@qbixplatform/q.js@1.0.16/dist/Q.js

.js or .ts files<br>import Q from 'https://unpkg.com/@qbixplatform/q.js@1.0.17/dist/Q.js';

Full documentation here: https://qbix.com/platform/guide/javascript

This is part of the much larger full-stack Qbix Platform that contains many pre-built reusable tools, plugins, and requires PHP and Node.js on the back-end. If you want to build an entire full-stack social network like Facebook you're well-advised to go with that. But if you just want to use the lightweight front-end core, with your own back-end and other frameworks, then start with this framework here.

🌟 Advantages of Q.js vs other frameworks

1. No build step

React/Vue/Angular need bundlers, transpilers, tree-shakers, and hydration layers. Q.js works with plain .html and .js — drop it in and it runs.

2. Tiny footprint (~40KB gzipped)

Q.minimal.js is smaller than React (even without ReactDOM), Vue runtime, and far smaller than Angular. Yet it packs components, events, routing, caching, batching, i18n, animations, IndexedDB, service workers, and more — all in core.

3. Direct DOM updates (no Virtual DOM overhead)

No diffing, no reconciler. Q.js uses requestAnimationFrame and .rendering() hooks for high-performance, granular updates.

4. Autoloading methods & tools

Any method, template, or tool can be defined in its own file and is only loaded when first used. No code-splitting configs, no manual lazy-loading hacks — it’s automatic.

5. Tools = components + behaviors

Like React components or Vue directives, but attachable as behaviors to any DOM element. Multiple tools can live on the same element, making composition more flexible than “one component per node.”

6. Built-in batching & caching

APIs like Q.getter() and Q.batcher() deduplicate, throttle, and combine calls automatically. If multiple parts of the UI request the same object, it’s fetched once and everyone gets the result.

7. Templates that Just Work™

Use Handlebars, .html files (Vue-style), or JS-defined templates. Designers can work in HTML, devs can work in JS — both paths integrate seamlessly.

8. First-class events & lifecycle

Events are observable, chainable (a.and(b), a.or(b), a.until(b)), and auto-clean up when a tool or page unloads. No more memory leaks or dangling listeners.

9. Progressive enhancement & SEO-friendly

Pages can render server-side HTML and Q.js simply activates tools as needed. No “blank page until hydration” problem — works with or without JS.

10. Unified, full-stack philosophy

It’s not just a front-end library. Q.js is part of the larger Qbix platform, which powers real social apps (with accounts, feeds, groups, payments, etc.). You can start small with Q.minimal.js, and later plug into the full stack without rewriting.

Q.js is smaller than jQuery, faster than React, easier than Vue, and more complete than Angular .

🔍 Features

Despite its size, Q.js implements many features not found in other front-end frameworks.<br>Here is an overview of the main ones:

Class Name<br>Description

Q.Tool<br>reusable components, activate with Q.activate(element)

Q.Page<br>HTML pages, for your SPA, routes, browser history

Q.Event<br>events and handlers, loaded and unloaded automatically

Q.Template<br>for rendering templates, integrates with Handlebars

Q.Text<br>for loading internationalized translations and text for templates

Q.Method<br>defines methods loading JS files asynchronously as needed

Q.Visual<br>managing the front end interface, standard hints, as well as Q.Mask

Q.Animation<br>for animating using native Javascript animation

Q.Audio<br>speaking, loading and playing audio, etc.

Q.IndexedDB<br>for easy interaction with the built-in IndexedDB

Q.ServiceWorker<br>to manage service workers in a standard way

Requests

Q.request(), Q.handle(), Q.loadUrl(), Q.addScript(), Q.addStylesheet()

Flow

Q.chain(), Q.getter(), Q.batcher(), Q.promisify(), Q.debounce()

Helpers

Q.find(), Q.activate(), Q.cookie(), Q.handle()

Overview

Main functionality

// Core<br>.init(options)<br>.activate(element, options)<br>.replace(element, source)<br>.extend(target, ...sources)<br>.copy(object, fields, levels)<br>.exports(fn)<br>.require(src, callback)<br>.import(src)<br>.handle(eventOrURL, context, args)

// Events<br>Q.Event<br>.add(handler, key)<br>.set(handler, key)<br>.remove(key)<br>.removeAllHandlers()<br>.factory(name)<br>.and(otherEvent)<br>.or(otherEvent)<br>.until(otherEvent)<br>.then()<br>.filter(testFn)<br>.map(transformFn)<br>.debounce(ms)<br>.throttle(ms)<br>.queue(ms)

// Tools<br>Q.Tool<br>.define(name, constructor, defaults, methods)<br>.prepare(elementOrTag, toolName,...