←back to thread

11 points EGreg | 3 comments | | HN request time: 0s | 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 #
genezeta ◴[] No.45081686[source]
No, sorry, not at all.

That's a guide and so it has more details. What I was saying is that the README, in a way, needs less details.

Also, that guide still makes the same mistake of using generic examples and names. It's full of foo, 'bar', someOtherEvent, First.onConnect('something', 'here').handle(arg1, arg2), etc and that's not really how you should write documentation.

replies(1): >>45083446 #
1. EGreg ◴[] No.45083446[source]
Alright, so the README and documentation should really just have a ton of links to jsfiddle examples? That seems like it would be very useful, indeed.
replies(1): >>45083818 #
2. genezeta ◴[] No.45083818[source]
No, I didn't say that.

The README should have one -two, at most- simple but representative and complete example. An example that shows actual usage of something simple enough to be small. See the examples I suggested above. As a companion to that, you can put that same code in JSFiddle and link to it in the README, but keep both the code and link in the README.

As for the documentation, what I said is that the code shown should always be good code, code where names make sense. You may or may not make the effort of putting full JSFiddle examples into your documentation, but the code that you put in the docs should use meaningful names.

replies(1): >>45087198 #
3. EGreg ◴[] No.45087198[source]
Okay let's say I create a lot of examples like this

https://codepen.io/Qbix-Inc/pen/ogjamBy

How to best embed them in github? Are they helpful?