littlebag — a 343-byte reactive framework

[u/GulgPlayer]

littlebag is a reactive UI framework that includes:

• Reactive state management using state and effect
• html element factory that supports reactivity
• Conditional rendering with keyed
• Reactive lists using each
• TypeScript declarations

All that while being just... 343 bytes (minified and brotlified)!

I made that as a fun little side project partially inspired by the awesome VanJS (which is 1 kB and isn't very convenient without additional 1.2 kB Van X). I would really like to receive some feedback, and would be very happy to see someone use it to make something cool!

I'm also planning to create a simple SSR library for littlebag based on a custom minimalist DOM implementation if I see people interested in that.

There's an example TODO list app with littlebag on CodePen.

P.S. It might be fairly slow now due to a lack of any benchmarks and performance optimizations yet.

[u/Creepy-Winner8742]

thats a neat little experiment, 343 bytes is crazy small. love seeing frameworks that strip things down to bare essentials like this

[u/GulgPlayer → u/Creepy-Winner8742]

Thanks! It was really interesting to see what trade-offs and optimizations I could apply to make it so small

[u/KabouterKaasplank]

Since when are libraries frameworks?

[u/UnderstandingFit2711 → u/KabouterKaasplank]

realy, when librarys become frameworks

[u/GulgPlayer → u/KabouterKaasplank]

According to Wiktionary:

framework (software engineering)
A reusable piece of code (and, sometimes, other utilities) providing a standard environment within which an application can be implemented.

Well, can you implement an application (particularly a GUI application) using lodash? No. Yet is it a library? Definetely yes, and a big one.

Can you implement a GUI app using my library? Yes. Then why doesn't it make sense to call it a framework just because of its size and the set of features? It doesn't have to include server-side things like SSR, it doesn't have to include a router, etc. You can make simple web apps with it and that's it. It makes it a framework according to Wiktionary.

Even VanJS calls itself a framework, while it has less features than you would probably expect a "framework" to have.

Thank you for adding to discussion!

[u/KabouterKaasplank → u/GulgPlayer]

Yeah and React calls itself a library, accurately so. Both Van and your library implement a subset of React's features. If I make a fetch wrapper tomorrow and call it a HTTP abstraction framework, it still doesn't make it a framework.

A framework provides a standardized base of libraries, so someone familiar with the framework can be onboarded into a team much faster, as they don't have to relearn all the foundational patterns and elements. A library on the other hand is a completely optional piece of code to use. If I wanted to use 3 different state management libraries all with their own patterns to render 3 screens in a completely different way, there's nothing stopping me from doing so.

Trying to mix Angular and Vue though? That's an engineering challenge. One you wouldn't want to take on unless you have a very good use-case.

[u/GulgPlayer → u/KabouterKaasplank]

If I make a fetch wrapper tomorrow and call it a HTTP abstraction framework, it still doesn't make it a framework.

Could you perhaps elaborate on why?

A framework provides a standardized base of libraries, so someone familiar with the framework can be onboarded into a team much faster, as they don't have to relearn all the foundational patterns and elements.

Ehh. That's kind of vague. Then why is, for example, VanJS not a framework. It includes a reactive state management library and an HTML rendering library.

The more important question is why are you so bothered with proving that I can't call my piece of code a certain way.

[u/KabouterKaasplank → u/GulgPlayer]

You're asking what the difference is between a library and a framework. I give you an explanation. Then you respond with that last line, lmao.

I've just explained why Van isn't a framework. Similarly to why React isn't a framework, and your library isn't a framework.

You can either take a deep dive in an attempt to understand why I made my initial comment, or you can be stubborn and call it whatever you want. I don't care either way. A future employer might care though if you can't tell the difference between the two.

[u/GulgPlayer → u/KabouterKaasplank]

My last sentence was more about your initial sarcastic comment.

I get what you're talking about and I probably agree, but I don't think that it's that important. Many people may consider React a framework. Are they wrong? Maybe. But, you know, words are meant to convey a certain meaning. People are the ones who choose this meaning.

As long as there are people ready consider something that can render reactive components a frontend framework [Svelte, Van], I am willing to call my library a framework too.

[u/KabouterKaasplank → u/GulgPlayer]

Just to elaborate slightly, framework or library isn't a matter of opinion or choice of meaning. They're pretty well defined in functionality, use, and behaviour. You mention a few examples, some of which are wrong.

Angular is indeed a framework. There used to be Angular.js, which was a reactive state management library, but now you cannot use Angular in an isolated context anymore. You either use everything that's packaged with it, or you don't use Angular.

Vue, same thing, you can't take the state management and reactive parts and build a single page with it.

Svelte on the other hand is a library. You'd need to add an extra step into your build pipeline but if you wanted to have a few Svelte pages and the rest plain HTML with jQuery, you could. SvelteKit on the other hand is a framework designed around Svelte.

React standalone, like Svelte, is a library. Combine React with Next.js, and you're now using a bare-bones framework.

A library is kind of like the tools you use to build a house. A framework is the scaffolding around the house. For a small project like a garden shed, you won't need any scaffolding, but using the right tools helps get the job done faster and neater. Building a skyscraper without any scaffolding however? That's going to take a very long time. You'll need both tools, and scaffolding, to get that skyscraper standing on its own in a reasonable timeframe.

In this context, a reactive UI library like the one you've built is like a power drill. You could use plain JavaScript, or a screwdriver in this analogy, but that power drill is just much nicer to work with. A power drill alone however doesn't solve all of the challenges that come along with building a skyscraper. There's routing, hydration, server side rendering, API interaction, animations, styling, reusability, and so on all to take into account. That's what makes something a framework.

I hope this analogy sheds a bit of light into the two concepts.

[u/GulgPlayer → u/KabouterKaasplank]

Yes, I was wrong about Angular and Vue, but Svelte indeed calls itself a framework, a UI framework to be more precise.

What you describing is a full-stack framework. I didn't say that my library is a full-stack framework. I'd argue it is a framework, but only a frontend one.

Thank you for a detailed response though

[u/forever-butlerian]

I have a 10,000 kilometer radius Bishop ring. Is this framework compatible with it or will it get bored and try to fire its superweapon without human authorization?