Show HN: Q.js – Smaller than React/Vue, yet more powerful (40KB gzipped)
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.
No comments yet
Some example working with other frameworks will be very helpful!
Does it work with JSX?
EDIT: just saw that it only supports .js and .html
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.
With all this talk about the README, has no one even tried including the js file and USING the framework before commenting?
I should have it up on a CDN, that’s true. How best to include it in one of the JS CDNs? That way people can literally just include it, or click on a jsfiddle link and play around with examples.
I thought the “overview” section was supposed to cover progressively all the main use cases of how to use the framework. So you would get the idea and try it yourself.
I don't like the `Namespace/another/view` that is in there. Just build something else, for all I care even a todo app so I can see what these values would be in a real-life example.
It kind of does, however "user" is the one who loads the site with the framework here, not the developer.
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.
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.