←back to thread

11 points EGreg | 1 comments | | HN request time: 0.001s | source

Q.js is a lightweight JS framework that I recently distilled from our in-house Qbix platform that I’ve been building since 2011. It powers many of our social apps, which have all the features of Facebook, LinkedIn, X, etc.

We’re not a big company like Google or Meta, so we never released it publicly. Now I’d like to, and thought it would be a good idea to post it on HN and gather some feedback.

Q.minimal.js was designed to be dropped into any website. It lazy-loads all your components only as they are needed and appear on the screen. The minimal file is meant as a starting point for developers, and if you later want more features from the Qbix platform, you can simply swap it out for the larger Q.js file instead.

Here are some advantages of Q.minimal.js compared to React, Angular, Vue, or whatever you might be using now:

40KB gzipped, smaller than React (without ReactDOM), smaller than Vue runtime, far smaller than Angular

No build step, just drop it in; works with plain .html <template> files or with JS/Handlebars templates

Components & tools, like React components or Vue directives, but attachable as behaviors to any DOM element

Faster rendering with requestAnimationFrame and .rendering(), no giant virtual DOM reconciliation

Built-in power: batching, caching, lazyloading, routing, slot-based page activation, all included in core

Universal dev model: designers can use pure HTML, developers can use JS, both work interchangeably

Incremental: drop it into an existing site without rewriting or compiling anything

If you have a free hour, give it a try! Play around with it, and let me know what you think. It's 100% free and open source under MIT license and I'm looking to polish up any rough edges before letting developers know about it.

Show context
genezeta ◴[] No.45081030[source]
I don't want to sound too harsh and I hope you take this the right way but I have to say it clearly: That README you have is worse than useless. I bet it actively pushes people away from your project. The problem is there's just too much in that README that shouldn't be there and then... what should be there isn't.

So what shouldn't be there? Well, most of it. You don't need a whole section of "Advantages over other frameworks" and then a table comparing to other frameworks.

You don't need most of the overview you have. Just picking something random: there's a full table with methods of Q.event. These are details; it's simply too much information that is not helpful to someone who wants a general overview of your project. The same can be said for most of the stuff there. The section on templates is useless for a README: It shows some very specific details (like the fact that there's a Q.Template.load.options.dir) without actually showing a real-world example, because foo, bar, baz, Some/name, and the code actually shown is all synthetic and abstract.

And that's the other problem: It's generic info. And so we get to what the README is missing: A simple, complete, minimal, working example.

And, yes, you end up the README with "Putting it all together", I know. But again, it's an abstract and generic thing. It shows a bunch of code ideas just thrown together for the shake of showing them. Even the comments in that code say things like "you could do this", "you could do that". It doesn't really help.

What you really need is something like a counter and two buttons to increment/decrement, or an input box and a list that gets filtered as you type, or whatever. Something silly and small... but complete and working. You don't need to show off all the features in that example. Just make sure that the code in the example clearly represents the typical way you'd write it and that you can hopefully keep it under 20-25 lines. Make it so simple and self-explanatory that you don't need to add many comments or any at all if possible. Ideally, make it so that you can actually just put that code into CodePen/JSFiddle/JSBin/CodeSandbox/Plunker/WhateverYouPrefer and then link it with "See this example live".

Again, it won't show all the features available and that is fine. But it will give the reader a fairly good idea of the general approach and the feel of using your framework. Because right now, with so much information the README gives a feeling that your framework it's anything but small, that is something complex with lots of abstract options and ways of doing things.

replies(5): >>45081146 #>>45081154 #>>45081356 #>>45081465 #>>45081478 #
EGreg ◴[] No.45081146[source]
Would this be more along the lines of what you might want: https://qbix.com/platform/guide/javascript
replies(2): >>45081458 #>>45081686 #
chrisandchris ◴[] No.45081458[source]
Not OP, vut take a look at Zustand: https://zustand-demo.pmnd.rs . IMHO one of the best ways I've seen to showcase a library. It's simple, understandable and even reproducable (code is all there).
replies(1): >>45081569 #
1. zenmac ◴[] No.45081569{3}[source]
Or just jump to package.json then you know all the deps and what you really dealing with here.