9 ms·
Riot.js – A 1kb client-side MVP framework
- Sujan 13y agoUh MVP (Minimum Viable Product) vs. MVP (Model View Presenter). That will be confusing. (still nice project of course)
- danielbarla 13y agoOn HN (or another startup / business-oriented board), I'd agree it's a bit confusing. In terms of UI development, the Model-View-Presenter pattern has been around (and fairly mainstream) for a couple of decades now, so the target audience will probably assume correctly.
- mosburger 13y agoMeh, I wasn't confused 'cuz it said "framework," but I guess I'm more of a hacker than a startup junky. ^_^
- cmsd2 13y agoI still find it hard not to think "Most Valuable Player" whenever i read MVP
- bennyg 13y agoThis is the real winner of the confusing acronym debate. Thank you little league for forcing me to think that startups only need an insane athlete to start getting users and feedback to mold the product.
- maaarghk 13y agoThis looks really pretty good. I think I would miss things like ng-each, but I guess not that's not -too- hard to re-implement using $.data('each'). Maybe. I will consider using this for a site I'm building right now, see what happens.
- Yaggo 13y agoI love the refreshingly minimal approach, although jQuery dependency ruins some of the excitement, but still, great work guys!
- tipiirai 13y agoThanks. jQuery dependency is intentional since the library promotes the use of jQuery on the presenter layer.
- aniketpant 13y agoI really like this outlook. Most developers don't bother about the presentation layer and they think that jQuery is a pain but most front-end designer and developers rely on it. Great step.
- swah 13y agoHow can someone just beat Resig's or Jashkenas' code performance "that easily"?
- dchest 13y agoBy doing less.
- jashkenas 13y agohttps://github.com/moot/riotjs/blob/master/riot.js#L12-L21 https://github.com/moot/riotjs/blob/master/riot.js#L12-L21 By only supporting simple single property accesses. All that this can do is print values from an object — no loops, conditionals, filters, methods, or anything else — like the others support. Think string interpolation, not templates.
- tipiirai 13y agoYeah. The idea is to support variable substitution (string interpolation) only. The loops are supposed to be done on the Presentation layer.
- jasonlotito 13y agoYou should remove the need to wrap the replacement strings in {} so the templates don't need to be rewritten. As it stands now, you're requiring people to write a template once, than rewrite it, and then debug the final result. Better to just use basic HTML.
- woah 13y agokey feature of many frameworks is that they break if you don't follow them carefully, limiting damage from 10x developer's hacked together code. does riot provide similar functionality?
- tipiirai 13y agoDeveloping with Riot is completely different from other frameworks. It's just 3 functions and after 1.0 the API will be hardened. It's more of a design pattern than a framework. The application developer is the biggest culprit for breaking things.
- sugerman 13y agoCalling this a framework is a bit of a stretch isn't it? I don't see how a few helper functions that rely on a very large library constitute a framework for doing anything at all.
- tipiirai 13y agoYeah. I guess it's more of an library, but it promotes the use of MVP design pattern / way of coding – and can thus be interpreted as a framework. I might change it to library if it makes more sense.
- aniketpant 13y agoThat's the same thing with Rails. You don't follow a rule, it doesn't allow you to do it. You need to go by the book there, so why not here?
- tipiirai 13y agoRails is much more than just 4 methods.
- ronocod 13y agoWould be nice to have Angular, Backbone and Knockout included in the speed graph.
- hellerbarde 13y agoBackbone's Underscore was included.
- ollysb 13y agoThe current crop of frameworks do feel like they're trying to abstract away the browser a little bit. They have the feel of something like JSF1 (java), they get the job done but the abstraction is so thick that it's difficult to integrate things like jquery without jumping through a few hoops. A lighter framework that achieves the same things without all the fuss would be very welcome. The danger is that the abstraction is too thin and you end up writing half a framework yourself to plug the gaps but maybe riotjs has managed to get closer to the sweet spot.
- jashkenas 13y ago[Retracted.] ... but, if you're going to test Underscore templates for speed, you need to use the `variable` setting to avoid the `with` block.
- tipiirai 13y agoIt's compiling once before the loop.
- deleted 13y ago[deleted]
- tipiirai 13y agoThe actual loop with 200, 500, 2000 and 5000 iterations is here: https://github.com/moot/riotjs/blob/master/compare/speed/index.html#L58 https://github.com/moot/riotjs/blob/master/compare/speed/ind... The $.each has only 4 iterations and has no effect on the stats.
- esailija 13y agoI don't think that's fair since a templating engine could easily avoid the actual with statement but provide same convenience. Optimization should be done in the implementation (which is fully possible here) and not at the cost of API ergonomics.
- jashkenas 13y ago> a templating engine could easily avoid the actual with > statement but provide same convenience I'm afraid that's not possible. If you look at other micro-templating libraries that allow arbitrary JavaScript values, you'll find that there are two options. Either you can support naked variables, and you have to use "with" to bring them into scope ... or you have to prefix all of your variable accesses off a "data" object, which is less ergonomic, but faster. Underscore supports both. If you've got a patch that is able to do otherwise, I'd love to see it ;)
- 13y ago
- deleted 13y ago[deleted]
- aniketpant 13y ago@tipirai Could you please put up more posts on usage and the documentation?
- tipiirai 13y agoI'll do that on my next post. I just wanted to push out the general idea first.
- leokun 13y agoPrecompilation renders template rendering speeds...moot. What a weird factor to use for choosing a template engine. Also there already is a popular unit test framework called riot.js
- tipiirai 13y ago> Precompilation renders template rendering speeds. Not 100% sure what you mean but if you measure the time to render a HTML fragment 100 times the total time is 1 x pre-compilation + 100 x rendering. The pre-compilation has virtually no effect on the total time.
- numinos1 13y agoI think that was his point.
- leokun 13y agoI mean that if you do the HTML parsing to JavaScript portion as part of your deploy, instead of in the browser at render time, then all you're measuring is string concatenation and HTML render times, which should always be the same. Template rendering speeds in that case mean nothing.
- STRML 13y agoExactly - with the proliferation of Grunt in most modern webapp builds, it is incredibly simple to pre-compile your templates in your production builds. In fact, it's so fast (and I get useful stacktraces when my tpls have errors) that I started precompiling templates in development, too. I find the bottleneck is 99% the browser's HTML parser and 1% the actual templating library. If somebody had any tips on how to bring down the "Parse HTML" time spent in the Chrome inspector (see Timeline), I would be interested to know. Tips other than, of course, "parse less HTML".
- Iuz 13y agoThere's always room for microframeworks, thank you.
- wiremine 13y agoHere is the entire source: https://github.com/moot/riotjs/blob/master/riot.js https://github.com/moot/riotjs/blob/master/riot.js
- seanhandley 13y ago* jQuery not shown
- rimo 13y agoSeems really nice, but I would not call this a framework. Just like Backbone, it is more of a library than anything else.
- mattgreenrocks 13y agoThe lack of framework-ness is what makes it interesting: you're not handing your entire app's architecture to a framework and hoping for the best. This library knows its place, and it is happy to be there, instead of spreading itself all over your code and claiming it is helping you.
- gbaygon 13y ago[off topic] i find very distracting that the title in the page changes when "Someone is writing..." a comment.
- Jgrubb 13y agoThis is the second article I've read on this site, and the second time that I've noticed after about 5 minutes that my computer's fan sounds like it's about to take off. Disconnect gets stuck in some kind of loop on their site and I feel like it's because of that feature (edit: because I've never seen that feature or that Disconnect freakout on any other site).
- jashkenas 13y agoWhile I'd usually prefer to be nice in the mornings ... starting off with those benchmarks got my goat. So. This sort of thing is a beautiful demonstration of marketing, big promises, and bombastic rhetoric in open source. But one of the best things about open source is that you don't have to take such claims at face value. If you actually look at the source, you'll find: https://github.com/moot/riotjs/blob/29ae687ca0633b703e124331f6395052b051355b/riot.js https://github.com/moot/riotjs/blob/29ae687ca0633b703e124331... * A funny syntax for string interpolation. (Not templates) * A strange bug relating to "popstate", ignoring browser support for folks on IE. * A simple proxy to jQuery's `on`, `off`, `emit`, and `one` functions. (Why not just use jQuery events directly?) * A simple proxy to "pushstate" and "popstate". (Ditto) ... and that's about it. Calling this, "The fastest, smallest and most powerful client side framework for building large scale web applications," is pretty funny stuff — but I guess it might also be true. There's almost literally nothing here except for jQuery. That said, if this were rewritten as a "you don't need a library to do MVC" blog post, then more power to it — it would be right on. But at the moment, it's a pretty spectacular piece of puffery — the sad thing being just how effective this sort of thing can be: http://cl.ly/SFzy http://cl.ly/SFzy. "Riot.js" might be a particularly egregious example, but similar tactics can be found all over the place. As a community, it would be nice if we could spend a little more time reading source, and seeing what libraries actually do and what can be done with them, and less time just drinking down the PR. (And if this is all an elaborate joke, then I'm an ass for falling for it ;) But that's not the sense I get.)
- tipiirai 13y agoThanks for the feedback. Maybe I can use some of that on my next update. These implementation details and issues are rather easy to address. I would not write my own event library from scratch if I can take advantage of jQuery. Can you elaborate what's wrong with proxying?
- aidos 13y agoIt looks like a nice little library to me and I think it would probably be a really reasonable choice for a lot of apps. It stays close to what people are already familiar with (jquery). It handles a pain point in terms of model data change notifications. I wouldn't take the criticism to heart. The bit about bragging about how fast and small it is will always create friction - especially when another big library is needed to make it useful. Also the result isn't as expressive as, say, Angular. You say that's a good thing: "Current data-binding frameworks promote the use of spaghetti on the HTML layer. Suddenly the onclick attribute is back! (I'm looking at you, Angular)." But you neglect to mention that the tradeoff is all the boilerplate you're going to have to write. Also, you'll have to pry two-way data binding from my cold dead hands.... :)
- facorreia 13y agoI think 'once' would be a better name for the API function instead of 'one'.
- namuol 13y ago1kb (+ 93kb for mandatory jQuery dependency)
- gadr90 13y ago1kb, plus jQuery's 50. This must be a joke...
- tony_landis 13y agoIndeed. The whole reason for the existence of all these frameworks riot is being compared is to to simplify development. Angular has no dependancies. Knockout also has no dependancies, so it's actually 13k > than riot. For anyone who really serious about going minimal, here are some alternatives to jquery to build on. 9.7kb http://zeptojs.com/ http://zeptojs.com/ 3.4kb https://github.com/rpflorence/snack https://github.com/rpflorence/snack 5.0kb https://github.com/julienw/dollardom/ https://github.com/julienw/dollardom/ 10kb http://xuijs.com/ http://xuijs.com/ <1kb https://github.com/honza/140medley https://github.com/honza/140medley What a riot!
- namuol 13y agoHow hard would it be to remove the jQuery dependency? It looks like it really only needs $.on/$.off/$.one/$.emit, which could surely cut the actual size down a lot from 94kb.
- felxh 13y agoI really love the minimal approach and a lot of it echoes my experience as well. One thing that I would love to see (mostly because I haven't found good solutions for it myself) is how CSS fits into the whole thing. The way I see it, CSS touches several aspects in the MVP pattern. There is the view part, which is strictly how things look on the screen but there is also the presenter part, which includes thing like, 'now show this thing', 'animate this, and when it is done, do this'.
- CmonDev 13y agoWhich tool did you use to make those MVP diagrams? They look gorgeous!
- JLehtinen 13y agoThanks! They were drawn in Adobe Illustrator.
- api 13y agoI love minimal code. When you try to do minimal, often what you end up doing is stripping away everything you don't need -- extreme YAGNI -- and getting to the core of something. Even if the result ends up being too minimal, it's often extremely educational. To remove the jQuery dependency I'd suggest looking at this: http://minifiedjs.com/ http://minifiedjs.com/
- euphemize 13y agoI like how this looks, I definitively want to try it out. With that being said : > Here's the shocking part: a 1Kb library requires the least keystrokes to build the Todo MVC application I'll decide on my own if it's shocking or not. Also I don't care that much about keystrokes, there's nothing wrong with verbose/expressive languages. I want my code to be readable and maintainable, and then concise if possible. This project looks cool but I wish its creator(s) was/were a bit more humble.
- tipiirai 13y agoI still find it really surprising that I was able to write the Todo APP in least amount of keystrokes by using only 1kb of "framework" code. And I totally agree that the goal should be readability and maintainability – this is what the post is mostly about.
- defen 13y agoDo you have a link to the other framework implementations of the todo app? I'm fairly sure that an angular implementation should be less code than the riot version.
- STRML 13y agoExcept, that's not true - the Angular TodoMVC code is smaller and more expressive, and Angular's JS is actually smaller than Riot + jQuery. I get what you're trying to do here but please don't resort to misleading statements to prove your point. This community sees right through it and every time you say things like this, you lose credibility.
- mjackson 13y agoThere isn't very much to see here, if anything. A few meaningless microbenchmarks, and some "plain old JavaScript objects" that hijack jQuery's event subsystem so they can emit events just like DOM elements. We've been doing imperative, evented programming in the browser for years now. Even if you're inclined to argue that this style of programming doesn't lead to a giant mess (and I'm inclined to believe that it does, even if you are the most disciplined of programmers) I still don't see the benefit of adding this 1K of JavaScript to my page at all. I can duplicate $.observable with a vanilla jQuery object. To call this the "most powerful client side framework for building large scale web applications" is downright laughable.
- felxh 13y agoThis isn't just 'imperative, evented programming' though. It gives a clear answer on how to separate your code into concerns, although I agree that there isn't much forcing you to follow good practices. The problem with the typical 'jquery-type' programming was that apps were essentially an ad-hoc collection of (sometimes massive) event handlers. I think the problem boiled down to: * there wasn't much experience and consensus on how to organise javascript code (split it into module etc.) * the DOM is global, meaning you can register event handlers to anything from anywhere (To make matters worse events bubble up and down the DOM tree)! It seems like people immediately resorted to extremes to solve these issue - basically trying to abstract away the DOM and even javascript completely - whereas the solution could be something much simpler and subtler.
- christopherryan 13y agoGOSPEL ARTIST POSES NUDE! Evon Latrail is the author of a children's book "When Mommy Went to Heaven". She wrote/recorded a few songs; "Lord Bless My Enemies" and "It Is Time" happens to be two of the titles. She even has a song entitled, "Can't You See (Abortion Is Murder). She went Pro-life after having a abortion! Really???? Now here is a photo of her posing in chocolate as a "Swamp Girl". The word Hypocrite is floating around somewhere. This story has made front page news in the local paper. How can this so called "Gospel Artist" be a role model is she's posing news? For more on this story.....Go to Google or YouTube and search, Evon Latrail.
- sequoia 13y agoIt looks like the meat of $.observable is mostly just passing thru to jQuery https://github.com/moot/riotjs/blob/master/riot.js#L29-L54 https://github.com/moot/riotjs/blob/master/riot.js#L29-L54 I don't really have an opinion on whether this is good or bad but it's worth noting that jQuery is doing the heavy lifting here. A couple code notes: * why, in the observable function, are you switching functionality not by the name of the function called ('on','emit', etc.) but by the index of that function name in the array on line 32? This strikes me as brittle because adding to or rearranging that array would cause the whole function to fall apart. It's also harder to read- I'm looking at `if(i == 2)` rather than `if( fnName === 'emit' )`. Does this yield a significant performance gain or is it just to juice the final "weight" of the library (<1kb)? I ask because it sure as heck makes the code harder to read. * Using `name` & `names` as variable names makes the code harder to read, as it doesn't give any meaningful context about what the variable stores (besides the fact that it probably represents a thing that has a "name"). It looks like in this case it represents event names but more descriptive variable names would eliminate this ambiguity & it would make no difference to the code weight after minification. I bring these things up because this lib looks cool & I like the "you can easily read the whole source" point, but this obsession with brevity (that's what it looks like at least) causes code readability to suffer & greatly diminishes the benefit of being able to "easily read the whole source." Make the code more readable & more people will use the project & contribute. :)
- defen 13y agoI think it's rather disingenuous to call this a "1 kb" framework when it depends on jQuery (83,612 bytes as of 2.0.3). I don't know about the other frameworks, but the current stable version of angular is 81,447 bytes and does not depend on jQuery, and is significantly more expressive.
- danmaz74 13y agoTL;DR: "You don't need a framework for that"
- sequoia 13y agoI apologize if I'm missing something, I'm not a data visualization expert, but what the heck is going on with that graph? http://content.screencast.com/users/sequoia.m/folders/Jing/media/4571c9dc-4664-4dd4-9c3f-0c0e86647fd3/2013-11-01_0847.png http://content.screencast.com/users/sequoia.m/folders/Jing/m...
- AndreasFrom 13y agoI think the size of the bar is actually ms/x so because Riot.js does more x's in the same period of time, the bar is shorter.
- druska 13y agoThe bars are relative to data in it's own category (eg. 200x), you're comparing apples to oranges.
- sequoia 13y agommm. Well there's no scale & no explanation of this method so it's not really clear what's going on. I get what is meant now, but there really should be a scale here to make it clear or at least an explanation.
- tipiirai 13y agoThanks for the short way of explaining how it works. Will add this exact clarification on the site.
- driverdan 13y agoThis is a nice academic exercise but isn't very useful for real world apps. The logicless "views" alone make building anything complex impossible. One of the reasons this is so light is that it forces you to write boilerplate code for models. I use libs to eliminate boilerplate, not force it upon me.
- conorwade 13y agoCompletely ignoring the technical aspects of the framework. The branding being used looks like a rip-off of Riot the design and development studio in England. http://riothq.com http://riothq.com
- woah 13y agoTHEY'RE BOTH RIPPING OFF OWS http://occupywallst.org/ http://occupywallst.org/! Power to the people.
- gosukiwi 13y agoI like this idea, you can in fact build a MVP framework without writing a 1kb library, assuming he's not counting the dependencies (jQuery), you can aswell use Hogan/Mustache/Underscore templates, a router libarary, an observer library and jQuery. I just dislike the use of "new" in javascript...
- jscheel 13y agoI'm going to go ahead and assume this is satire.
- brannon 13y agoI think this looks great. Thought I'd let you know I found a typo though. In the jQuery section, last paragraph, "Riot takes a puristic approach and does not allow you to do mix any logic inside HTML views."
- dmackerman 13y agoIt looks like a nice little library. Unfortunately, most of these "micro super fast i can build a todo app in 4 lines of code" things aren't enough anymore. Most of us aren't building "Todo" apps. We're building bigger apps which require - or are more suitable - for a framework like Angular/Ember. That's just my 2 cents.
- tipiirai 13y agoMoot is a complete discussion system built with Riot / MVP. There is no other app than Todo MVC to make comparisons.
- pearjuice 13y agoOh I didn't know Cristopher Poole is a programmer! Okay, he isn't.