I'm deciding on a Javascript framework to use in building a real time chat application with a tiny footprint. I can't use React, Angular, Ember, or Vue because they are too large. I would build the app in vanilla Javascript, but I fear that it will become more and more difficult to maintain and I will end up reimplementing many already solved problems.<p>Some of the frameworks that I've seen that are small, fast, and well-liked are Preact, Inferno, Mithril, and Ractive. Does anyone have any experience with these, or even better, thoughts on a comparison between them?
I designed tko (<a href="https://github.com/knockout/tko" rel="nofollow">https://github.com/knockout/tko</a>) to make it easy to re-use the best parts of Knockout using tree-shaking ES6 imports.<p>When experimenting with substituting a few modules, I've gotten it down to 4.5k gzipped.<p>It's still quite early on (alpha), but already some folks are using it in production. Plus, it's mostly backwards-compatible with Knockout.<p>While it might not be an ideal, usable solution for this problem yet, it's definitely moving in the direction of filling exactly this niche (among others).
Is there a maximum file size that you're looking for? Because Vue.js is pretty small, 23K after gzip:<p><a href="https://gist.github.com/Restuta/cda69e50a853aa64912d" rel="nofollow">https://gist.github.com/Restuta/cda69e50a853aa64912d</a>
There are two that I know of that are truly tiny: Monkberry[0] and RE:DOM[1] which are respectively 1kb and 2kb in size.<p>[0]: <a href="http://monkberry.js.org/" rel="nofollow">http://monkberry.js.org/</a><p>[1]: <a href="https://redom.js.org/" rel="nofollow">https://redom.js.org/</a>
If you need tiny footprint best idea would be just to use Vanilla JS.
But you can look here for some libs/frameworks for specific parts <a href="http://microjs.com/" rel="nofollow">http://microjs.com/</a>
I like the dom wrapper this guy came up with: <a href="https://hackernoon.com/how-i-converted-my-react-app-to-vanillajs-and-whether-or-not-it-was-a-terrible-idea-4b14b1b2faff#.lcwbdi7ci" rel="nofollow">https://hackernoon.com/how-i-converted-my-react-app-to-vanil...</a><p>I adapted it for myself here:
<a href="https://gitlab.com/heycato/domjs/blob/master/dom.js" rel="nofollow">https://gitlab.com/heycato/domjs/blob/master/dom.js</a>
Vue is really small: 18kb min+gzip is tiny compared to the competition.<p>Check also <a href="http://riotjs.com/" rel="nofollow">http://riotjs.com/</a> 9.73KB (gzip)
How about basically no framework with svelte? <a href="https://svelte.technology/" rel="nofollow">https://svelte.technology/</a>
My idea would be something like this.<p>Use any tiny View Library like Preact Inferno, etc. and use the Flux Architecture without any other framework, you implement the store by hand or using some immutable lib and use a simple dispatcher. That way you have a maintainable code since Flux is pretty popular and no big framework.
One option would be to custom build jQuery and omit the parts you don't need or like. The libraries posted all have their merits; but jQuery has so much traction. That means more folks ready to hit the ground running on what you're building ... <a href="https://github.com/jquery/jquery" rel="nofollow">https://github.com/jquery/jquery</a><p>Edit Gruntfile.js to do that or try a site like: projects.jga.me/jquery-builder/<p>You can get sub-20Kb builds with just what you need. I did that recently to inline the core parts ...<p>One tip, if you use the builder, take a screenshot! The file generated will have a comment block with - in front of omitted modules, e.g. -ajax if you prefer plain old fetch & other useful info. But the screenshot shows exactly what options you set.
For virtual DOM I don't go full React, I just use Maquette with Jade templates.<p><a href="http://maquettejs.org" rel="nofollow">http://maquettejs.org</a>
<a href="https://github.com/nextorigin/gulp-pug-hyperscript" rel="nofollow">https://github.com/nextorigin/gulp-pug-hyperscript</a><p>For a small framework, I've been using SpineJS for years.
<a href="https://github.com/spine/spine/" rel="nofollow">https://github.com/spine/spine/</a><p>Example with Maquette:<p><a href="https://github.com/nextorigin/maquette-mapper" rel="nofollow">https://github.com/nextorigin/maquette-mapper</a><p>Using focused, quality components has let me upgrade my stack piece by piece over the years while retaining backwards compatibility.
Have a Look at Backbone.js. <a href="http://backbonejs.org" rel="nofollow">http://backbonejs.org</a>
I have choosen the lib for similiar reasons and i loved it
Try <a href="https://github.com/wavesoft/dot-dom" rel="nofollow">https://github.com/wavesoft/dot-dom</a><p>It looks like tiny React and is just 511b gzipped.
Shilling my own library here: <a href="http://simulacra.js.org" rel="nofollow">http://simulacra.js.org</a><p>No template syntax to learn, one function API, 5kb gzipped.
Do you need a framework at all? I think you could get away with just plain JavaScript and include Handlebars if you want a templating engine.<p>Maybe add Jquery if you want something just above plain JavaScript.<p>Edit:<p>Another benefit of Handlebars is that if you ever do decide you need a full framework, you can use Ember and leverage your Handlebars templates.
PX2: <a href="https://github.com/burtonsamograd/px2" rel="nofollow">https://github.com/burtonsamograd/px2</a><p>A better designed version of Backbone with a small footprint.
NoJS (posted few days ago):<p><a href="https://news.ycombinator.com/item?id=13816429" rel="nofollow">https://news.ycombinator.com/item?id=13816429</a>