5 ms·
Show HN: Monkberry – a JavaScript library for building web user interfaces
- ruler88 10y agowhat problem does this library solve that reactjs does not solve?
- lizardskull 10y agoA more awesome name
- snissn 10y agoWhat problem does reactjs solve? Why are javascript libraries used instead of generating HTML server side? I feel I'm out of touch, could someone give me a quick primer?
- guptaneil 10y agoThe biggest advantage of client-side rendering is that clicking a link doesn't require a full-page reload. Dynamically updating small portions of a page allows for a more snappy experience, especially when on a cellular data connection.
- yuchi 10y agoRight and wrong. If that’s all you need to do search for SennaJS or PJAX. What really f/e frameworks and libraries help you build is complex interactive interfaces. If you don’t see their use then means you don’t need them.
- andybak 10y agoYes. If people are using full MVC frameworks for the sole reason of avoiding page reloads then they really need to look at PJAX etc. I can add PJAX to existing Django sites in about half an hour. It degrades gracefully, allows me to carry on generating my HTML on the server in a language I prefer and carries a very small cognitive overhead. I understand TurboLinks in Rails is essentially the same concept?
- yuchi 10y agoYeah, TurboLinks is the Rails counterpart. To clarify a little: I personally use SennaJS a lot and React. They are two different things for different goals.
- vortico 10y agoReact minified is 147kb, which is actually significant if all you need is the functionality offered in Monkberry.
- Torn 10y agoLooking at the gzipped size on cdnjs - react minified 43.2kb - react-dom minified 723b
- ch4s3 10y agoBeing 1kb. Not to be pedantic, but 147kb is a lot on a crappy connection, so if you have users in rural places with slow internet or tiny data caps, a small library like this may be useful.
- drusepth 10y agoWouldn't you just use a CDN that your visitor's browser would pull a cached copy from if you were worried about large assets? They're only downloaded once*, might as well re-use the one downloaded the last time you visited a site with React. Or do I not understand how browser caching works?
- jacobr 10y agoThis is nice in theory, but... A user visits site A. To get a cached version of React the following need to be true: 1. A user has to have visited a site, site B, with React recently. 2. The site with React needs to be using a publicly available CDN. 3. Site A and Site B must use the same CDN. 4. The versions of React must match exactly. There are already about a dozen alpha/patch/rc versions of the React 15.x.x series alone. In practice, this does not happen very often: https://www.stevesouders.com/blog/2013/03/18/http-archive-jquery/ https://www.stevesouders.com/blog/2013/03/18/http-archive-jq...
- JustSomeNobody 10y agoYeah, we need to save that 146kb so we can do dumb stuff like animate stars.
- deleted 10y ago[deleted]
- sesm 10y agoThis library uses two-way data binding like angular, vue.js and many others. Two-way data binding libraries/frameworks are easier to use on small websites, but don't scale well to large single page applications.
- shash7 10y agoAh so its a templating engine.
- maxpert 10y agoI think it's kinda MVC not full but good for micro projects where you want a clean code but not a bloated framework :D
- 3D4y0 10y agoOT: Can somebody please tell em, to stop the excessive use of css animations(the moving star field background). It pegs one of my cores, and raises my laptops temperature to the point where i can feel it. Worse still, it really adds nothing to the ability to peruse information, if anything I find it distracting! </rant>
- pygy_ 10y agoThe background is in its own div with classeslike "stars"and "js-stars", just before the footer. You can delete the div using the DOM inspector to remove them.
- cel1ne 10y agoOr code it is as a vertex-shader to run on the GPU. https://aerotwist.com/tutorials/an-introduction-to-shaders-part-1/ https://aerotwist.com/tutorials/an-introduction-to-shaders-p...
- wtf_srsly 10y agoI think it isn't the animation itself but the blatant abuse of box-shadow to create all the stars. Using an image for example should greatly reduce the required performance.
- lucideer 10y agoGiven this is a website by someone purporting to be providing a "blazingly fast" JS UI lib, comments on UI perf. seem pretty on-topic. Given the general lack of info on the site about why one should choose this library over others (beyond reiterating that it's "blazingly fast"), a showcase of one's claims of speed should be a pretty important aspect of the site. This is not to criticise the library itself, but these kinds of first impressions are significant.
- christophilus 10y agoYeah. It's annoying. Just go straight to the GH page: https://github.com/monkberry/monkberry https://github.com/monkberry/monkberry Looks like a pretty good lib, actually.
- supernintendo 10y agoJust some advice, that star animation slows the page to an incredibly sluggish state (latest Chrome on late 2013 retina MacBook Pro). Removing the `stars` and `js-stars` classes from the main div speeds the page up significantly and conveys the "blazingly fast" point more effectively.
- geekodour 10y agoWhat it can do that VanillaJs can't?
- datashaman 10y agoThis looks like it belongs on http://microjs.com http://microjs.com. Instructions in the footer.
- Kred 10y agoThis first thing I thought to compare this to was VueJS. It seems like the next step up if you were to need a bit more from your framework. Or is this an unfair comparison?
- Rapzid 10y agoLove Phuket. This looks pretty cool too :)
- voiper1 10y agoI'm using riotjs (http://www.riotjs.com http://www.riotjs.com) which is closer to this than React, but it's "standard" HTML templates with controllers _with_ the template so all relevant code is together. (When I see react's complete divergence from HTML I get really worried...) It's about 9kb gzipped, so it's 9x bigger, but does much more than Monkberry.
- atmin 10y agoI did something quite similar couple years ago [jtmpl.com]. Main difference is Monkberry uses Jinja-inspired templating language and jtmpl uses Mustache (with slightly changed semantics, so, for example, a partial can be dynamically requested via XHR). jtmpl is a bit bigger and provides a bit more features.
- gnuchu 10y agoIn the example <button type="submit">Add #{{ todos.length }}</button> should probably be <button type="submit">Add #{{ todos.length + 1 }}</button> :-)
- smegel 10y agoThose checkboxes respond with noticeable delay. I hope that is more to do with the website than the library.
- lhorie 10y agoDamn, so much negativity. This library actually looks well designed (and I'm saying this as a virtual dom library author)
- epidemian 10y agoAbsolutely! I started a comment yesterday about what i found interesting skimming through the code of this library, but abandoned midways because i could almost see the snarky "oh, so just another templating library" response. Too be fair, that response would be somewhat justified. After all, the code of the client-side library is so small[1] because it doesn't actually do much there. And that is in fact what i find interesting in comparison to other client-side rendering libraries like React (or Mithril ;). There's quite a lot more code in the repo though[2], and that has to do with the processing of the view files, and compiling them to plain JS functions at build time. These plain JS, however, are not like most JS functions generated by templating engines, which usually involve generating a bunch of HTML (taking care to escape text as necessary) and then inserting into the DOM via `innerHTML` or a similar method. Monkberry actually parses the HTML bits of the templates and generates functions that construct the DOM using the JS DOM API. For the example on the homepage, it generates code similar to (you can see this on the browser devtools just by visiting that page): // Create elements var li0 = document.createElement('li'); var input1 = document.createElement('input'); ... // Construct dom input1.setAttribute("type", "checkbox") li0.appendChild(input1); // Update functions this.__update__ = { todo: function (todo) { var result; input1.checked = todo.complete; ... }, ... } Notice that the DOM elements are themselves cached and re-used each time the view is updated. And the update function does very direct stuff like setting `input.checked = todo.complete`. TL;DR: seems like a solid library. Interesting idea and good execution. [1] https://github.com/monkberry/monkberry/blob/master/monkberry.js https://github.com/monkberry/monkberry/blob/master/monkberry... [2] https://github.com/monkberry/monkberry/tree/master/src https://github.com/monkberry/monkberry/tree/master/src
- hitr 10y agoActually a clean library .Github has more details on why it is faster than React >Monkberry is 10 times faster, sometimes 100 times faster. It's because Monkberry will do only necessary dom updates, and does it in a completely different way than React does. Monkberry compiles template to plain JavaScript to gain an advantage by using v8 hidden classes and reduce call stack. There is no virtual dom (in general, an react app have to keep 3 virtual doms), for example next template will be generated to JavaScript code which will do only necessary dom updates on state changes. and also some benchmarks comparing against it. http://monkberry.js.org/benchmark/ http://monkberry.js.org/benchmark/ I always enjoy reading why someone developed new library or tool because they wanted to improve something about a library they were using.It may not be a big thing but it surely gives one or two flaws about your favorite library you are so fond of .
- gldev 10y agoThe site presenting it has issues but the library itself seems pretty decent. Keep it up man.