Riot – A React-like, 2.5K user interface library

https://muut.com/riotjs/

by tipiirai • 12 years ago

388 214 12 years ago

muut.com

ola2• 12 years ago

Is this the same Riot.js as the 1kb framework or is this just named the same?

tipiirai46• 12 years ago

Yes. It's the same library, but with a new (major) version.

It's inspired by React so the views are build differently than in 1.0.

ola2• 12 years ago

Ok, now I understand, sometimes there are several javascript projects with same name.

maemre• 12 years ago

According to Google cache, it is. The size change may be due to rewrite (version 2.0):

This is the biggest change from Riot 1.0 to 2.0. JavaScript and HTML are now part of the same module.

konradb2• 12 years ago

I'd be really interested in the views from people who were much more into JS than I am. I've used Angular for a couple of small cases now and I like it, but have been hearing lots of good stuff about React (and even Om, I'm quite Clojure inclined). How does this stack up against React in terms of power, brevity, etc?

tipiirai46• 12 years ago

Maybe you can find the answer from the comparison section:

https://muut.com/riotjs/compare.html

konradb2• 12 years ago

Thanks, in my haste I didn't see this. Helps a lot!

yaddayadda2• 12 years ago

Maybe I'm missing something, but that comparison looks like apples versus oranges, or more specifically JavaScript-side versus HTML-side. The React example looks like the JS-side only, while the Riot example looks like the HTML-side only. What am I missing?

edit: I see a touch of embedded script (i.e. handleSubmit) in the Riot example, but not nearly enough to replicate the JS code in the React example. And there is a <script> call, but it looks more like an Angular partial than an actual script.

grabcocque• 12 years ago

Oh a new Javascript framework. I'd been getting worried, it'd been 40ms since the last one.

tipiirai46• 12 years ago

Haha. No kidding.

On the other hand Riot is over 1 year old project and this is a new/improved version.

JonnieCache• 12 years ago

They do seem to be getting closer to sanity with each one though. With the advancements in browsers, in a few years the experience of web development may not be completely awful!

fdsary• 12 years ago

Well, Riot is pretty old... This is a major upgrade, and as such font-page-worthy I'd say.

Touche• 12 years ago

Oh a dismissive comment on HN upvoted to the top. I'd been getting worried, it'd been 1 post since the last one.

it_learnses• 12 years ago

Oh a strawman comment on HN...

punkbit2• 12 years ago

This looks amazing! I work with angularjs, been testing reactjs, but this looks simpler and minimal to code ? Probably less documentation or community online ?!

daemonk• 12 years ago

Does this support nesting custom tags? How do I communicate between different tags? Is the opts variable accessible outside the definition of the tag?

tipiirai46• 12 years ago

Unlimited nesting is supported. You pass options with HTML attributes:

  <child arg={ data } />

  this.data = { foo: 'bar' }

</parent>

vidarh• 12 years ago

Is that only when defining a custom tag, or when using it as well? All the examples seems to be of nesting when defining a custom tag. If it supports it when using the tag, how do you get access to the nested content?

Freyskeyd• 12 years ago

Hey,

I'm just curious about performance with fucking large app. It's always the main issue for me, a todo list can't show use performance. If your framework is fast with 3 items in a list, what's the point with, like, 1000?

I'm gonna try

tipiirai46• 12 years ago

Haven't tried with such large datasets. Very curious about the results!

Should be fast, since Riot uses compiled and cached expressions and updates DOM nodes only if there is a change.

If there is a performance bottleneck, it can be fixed.

We'll be doing performance tests and comparisons later.

qwtel• 12 years ago

Looks nice. React really is more of a pattern or (if you will) a design philosophy, so anything along those lines is appreciated. However, I don't think being ~10x smaller is enough. It needs to be ~10x better as a whole, which in my view it isn't. The improvements seem more cosmetic than substantial.

dirtyaura• 12 years ago

Looks promising. Is this battle-tested yet? I.e. is there a web app with a non-trivial amount of traffic that is using Riot at the moment?

The main selling point of React is that it is actually tested against millions of users and browser configurations as a part of Facebook UI.

tipiirai46• 12 years ago

muut.com uses Riot for authentication, signups and for forum settings which is a fairly large application. The site is fairly popular.

Of course React is much more tested and probably more solid at this point and Riot 2.0 is just released.

But one major benefit for Riot is that there is indeed 24x less code to maintain and so much less weak spots to take care of.

therealunreal• 12 years ago

Do you think that the 24x less code is because of its exceptional design? Or is it missing some features?

coding4all• 12 years ago

I feel sorry for people who have to write native JS at this point. I can't imagine a JS job interview where you didn't have to know of/about yet another framework.

woah3• 12 years ago

Great to have some innovation on the frontend for once. We're getting closer and closer to a place where we can write flexible, performant interfaces without the heavy frameworks and tooling of native frontend dev.

otikik3• 12 years ago

One of React's selling points is that it uses a virtual DOM to minimize the amount of manipulations it does to the real DOM - http://facebook.github.io/react/docs/reconciliation.html.

The virtual DOM is an implementation detail (riot could re-render everything on each change), but it's what makes React fast, and good for handling big apps.

I don't think you can call a lib "react-like" if it doesn't have something like the virtual dom diff. You could say it has react-like syntax, maybe.

That said, I have been following riot for a while and I always liked its minimalistic approach. Maybe I will give it another look now that it is 2.0

EDIT: I somehow missed the big subtitle which says "Virtual DOM" on the website. It clearly states that Riot has something similar to React's. I can't explain know how I managed to not see it. Thanks to everyone who called me out.

yuchi• 12 years ago

It’s advertised as having a Virtual DOM.

otikik3• 12 years ago

You are right, I will have to investigate more. I don't know how much of react's virtual dom diff can you cram in 2.5kb though :)

tipiirai46• 12 years ago

Riot virtual DOM is a simple expression -> DOM node map. It's much different than what React has.

Riot cannot make random sub-tree replacements. It's best for situations where the tag HTML structure is fixed (no tag name changes for example).

Riot virtual DOM minimizes the work and makes less DOM manipulations than React on each update cycle.

Loops and conditionals can change the structure.

unsoundInput2• 12 years ago

I agree that calling it "React-like" seems misleading. When I read about a 'x'-like library I expect something that could actually replace 'x' and provide nearly the same features.

Pete Hunt did a great talk on what actually makes React / virtualdom different from other databinding approaches.[1] Using this definition Riot.js looks a lot more like Angular, Ember et al. to me.

[1] https://www.youtube.com/watch?v=-DX3vJiqxm4

tipiirai46• 12 years ago

Virtual DOM implementation is indeed different.

The biggest reason for calling it "React-like" is the basic idea of components, where related HTML and JS are combined together.

"Build components, not templates"

http://www.slideshare.net/floydophone/react-preso-v2

I think this is the "what" of React and virtual DOM is the "how".

coldtea2• 12 years ago

I don't think you can call a lib "react-like" if it doesn't have something like the virtual dom diff. You could say it has react-like syntax, maybe.

Sorry, I don't follow. The Riot.js project site DOES tout "Virtual DOM" as one of its features.

You say it doesn't actually have that?

otikik3• 12 years ago

I somehow missed that (quite incredible, being one of the main subsections), and I simply assumed that you can't cram something like that in 2.5kb - I apologize.

thomasfl• 12 years ago

I like the use of a virtual DOM and the custom tags. Custom tags is what makes Angular easy to use. But I would like to see some benchmarks. I'm afraid parsing every single byte of every single html template is slow.

Riot also needs widgets. Lots of lots of widgets for material design widgets for making desktop and mobile apps, and twitter bootstrap like widgets. Good developers are lazy developers. They don't want to make an entire eco system.

tipiirai46• 12 years ago

Benchmarks are definitely coming.

In theory Riot is super fast. The DOM is parsed once when a tag is initialized and after that the text nodes and attributes are only updated if the expression results to a different value. The expressions are compiled and cached.

Any performance bottleneck can be fixed.

masklinn5• 12 years ago

Benchmarks are definitely coming.

Beware the way you're benchmarking, e.g. immutable structures and pure (& immutable-state-aware) components can make a pretty huge difference in react.

rcarmo• 12 years ago

I've been using Riot 1.0 for a number of simple things (including a few dashboards) and it's a lot less hassle than most other JS frameworks.

This looks like a very nice upgrade, in the sense that the previous templating was a bit ugly. I hope the virtual DOM let me handle SVG as well...

tipiirai46• 12 years ago

SVG should be no problem if loops and conditionals are enough for the logic. Never tried though.

mtarnovan• 12 years ago

A link to the github repo would be useful.

tipiirai46• 12 years ago

Here you go:

https://github.com/muut/riotjs

It's on the download page. Admittedly not very visible.

jpgvm• 12 years ago

Should whack one of those "Fork me on github" ribbon things on there.

tipiirai46• 12 years ago

Ribbon is now there.

Thank you!

danabramov3• 12 years ago

It would be cool to summarize the kind of stuff you can or can't do with Riot vs React.

I still don't get how state works, whether state changes propagate down the components as prop changes like in React, etc.

tipiirai46• 12 years ago

Each component maintains it's own state. Think them as functions with isolated scope. The tags accept arguments via HTML attributes and each tag has a reference to it's parent.

Instance variables and method are assigned to the scope and you have direct access to them on the HTML expressions. Once the scope changes and tag's `update()` method is called the expressions are calculated and DOM nodes are updated. Nested children are also updated.

You can update all tags at the same time with a global `riot.update()` method.

Hope this helps.

odiroot• 12 years ago

Great, another framework mixing concerns and doing custom HTML.

What's wrong with React?

tipiirai46• 12 years ago

The point of React is to mix HTML and JS together. They deliberately mix templates with logic, which is actually the main inspiration for Riot.

But we felt that what React does could be simplified. We didn't need full diffing and batching of HTML and we didn't like the verbosity on how components are created.

minimalism is where Riot starts from.

mjackson• 12 years ago

The point of React is to mix HTML and JS together.

In React, there are no "templates." There's just JavaScript, and then more JavaScript that looks kind of like HTML (JSX). But it's all still JavaScript.

Also, FWIW, I find that one of the largest benefits of React is to have the logic and the representation of the markup inline, together in the same file. It really helps productivity by eliminating the context switching going from js to markup.

We didn't need full diffing and batching of HTML

^^^ That's the point of React. You don't have to do the diff in your head (or in your code).

invarinat• 12 years ago

it should be nice if it was like react( html in js)

chrisfarms• 12 years ago

Fantastic intro doc. I read the entire thing without really thinking. I like the aim, and I think I could learn to accept the weird looking javascript floating in the root node (though I think it might look easier on my eye if wrapped in a <script> tag, even if that tag is redundant)

But, I would _really_ love to see some render time benchmarks with large (2K+) loops adding/removing deeply nested nodes. This is where React really shines in my opinion, and I'm struggling to believe that Riot can compare with the implementation described.

hokkos• 12 years ago

Seems more like Angular than React with the template expression, why compare it with React then ? Angular is now a dirty word ?

sebastianconcpt4• 12 years ago

Angular has nothing to do with MVP, why would be compared to it?

tipiirai46• 12 years ago

React is closer to Riot than Angular because of HTML/JS components backed with virtual dom. The HTML syntax is perhaps closer to Angular than JSX.

I'm sure there will be a Angular comparison here as well:

https://muut.com/riotjs/compare.html

Ember too, because of HTMLBars (DOM based templating) and FastBoot (later).

tmaly• 12 years ago

seeing figures like 2.5K makes me think back to the days of programming assembly in 4K space on an HC12

STRML• 12 years ago

Very cool project! I have used nearly every framework under the sun and React is, by far, my favorite. It's getting better every release. The concepts it introduces are sound, and I don't think I'd ever do frontend development any other way.

That said, Riot is a very encouraging take on React - and I think it may have a very solid place in apps that need to be very light and fast. Perhaps it's perfect for prototyping. I will try to find a small project for it.

One question; is there any way to render to a string so Riot can be used server-side?

tipiirai46• 12 years ago

Server side rendering is on the roadmap among other things. Look for the last item on the FAQ:

https://muut.com/riotjs/faq.html

jarpineh2• 12 years ago

Hm. How does this compare to Mithril JS (http://lhorie.github.io/mithril/)?

I just looked at the doc and read this thread (at 61 comments).

Same:

* virtual dom * has its own tag syntax * Mithril has MSX, but also supports regular JS data structure with m("tag", {attr:val, onclick: func, [more tags, "text"]} * router

Different:

* Where Mithril allows you to build and transform resulting template structure before virtual DOM generation, Riot mixes HTML tags and JS, builds tags from that which can be composed * Uses a compiler, Mithril without MSX can work directly in the browser * Probably other stuff, too, I'm just reading the examples, at least is not supported Ajax/XHR

Speed is a big question. Mithril is plenty fast (there's a benchmark on the home page, and somewhere I saw a TodoMVC comparison which put Mithril near the top few months back).

I have not yet formed an opinion, but RiotJS' size and web component approach intrigue me. More example apps, plz, with client/server communication and CRUD ops.

tipiirai46• 12 years ago

Definitely some similarities exist like you listed.

Riot offers following to the (massive) client-side table:

1. Custom tags (with unscary HTML + JS syntax)

2. Minimalism (both size and API surface)

3. Performance (minimizing DOM operations with virtual DOM)

The 3rd item is not battle-tested / benchmarked yet and there is probably room for improvements.

jarpineh2• 12 years ago

Thank you for your comment.

Me thinks Mithril is fairly minimal, too, but this point can't be completely objective. If API allows to do things I find complicated to do myself, then I happily accept a little bloat here and there.

I will be looking at Riot custom tags and how they might help (or hinder) creating components out of functionality. There is currently an interesting discussion on the Mithril mailing list about these things. Also it's what attracted me to Angular long time back (and what drove me away from it, as well).

woah3• 12 years ago

I love the differing thought patterns apparent in the length of your and lhorie's response to this question. Like the framework, this response is minimal.

lhorie5• 12 years ago

Hi, Mithril author here.

A few important differences as far as I can tell:

- Riot apparently requires a compile step (at least as far as being able to follow the docs goes), Mithril doesn't

- Riot has no AJAX support, Mithril does (plus promises, plus an idiomatic workflow to work with async ajaxy stuff: `var prop = m.request(...)`)

- I could not find anything about keys in the Riot docs. Keys are a very important part of the virtual dom diff algorithm (basically it's the mechanism that lets you sort tables without rebuilding the whole thing from scratch)

- Riot's router appears to support only hash mode. Mithril's also supports HTML5 mode (which allows you to skip the # symbol), and a querystring mode that is step in between the two in terms of tradeoffs.

- Both Riot and Mithril redraw by default on events, but Riot appears to lack APIs to control when NOT to redraw. This is kind of a big deal with cases like expensive oninput, complex event bubbling behavior, etc.

Other than that, I just have a small nitpick:

Riot mixes HTML tags and JS, builds tags from that which can be composed

As far as I can tell, Riot components can be nested, but I'm not sure they can be composed per se. Real composition would allow you, for example, to have lazy components (i.e. pass a component A to another component B and evaluate A at a specific point in B's virtual dom tree). A modal is an example of this.

RiotJS' size and web component approach intrigue me

Mithril supports the `is` attribute, and I saw someone using custom elements with a polyfill ( https://github.com/WebReflection/document-register-element ) and Mithril. It's basically "Web components, the good parts". Worth looking into.

tipiirai46• 12 years ago

riot.mountTo() lets you "lazily" render a tag on a specific node.

Thanks for the analysis.

jrmiii• 12 years ago

Thanks for the comparison. If you look in the demo code, you'll see you don't necessarily need the compile step, just write your custom tags with riot.tag and use strings for the would-be compiled part.

jf22• 12 years ago

I'm suspicious of libraries who showcase their size as a reason to go with them.

Its the motion of the ocean in the library that matters.

tipiirai46• 12 years ago

Size is multiple things:

1. simplicity

2. maintanability

3. API surface and learning curve

Riot also about minimalism, especially in syntax.

Less proprietary stuff (and keystrokes).

lukeasrodgers• 12 years ago

In my experience with Backbone, another relatively small js library, the fact that the library is smaller and "does less for you" also means that you end up in one of these scenarios: you need to figure out how to solve a lot of things that other, larger libraries handle out of the box; or, you need to glue libraries together that provide those solutions; or, you have a bunch of prior experience with the library in question, have solved those problems before, and can bring that expertise (and often that code) to each new project.

These all bring with them their own issues of simplicity (tying libraries together?), maintainability (what happens when I realize my library/framework additions are inadequate, and/or buggy?), and learning curve (instead of learning the API I am learning how to do things with a very minimal API).

To some degree, a small library doesn't solve these problems, it offloads them to you--which isn't necessarily a bad thing. It, like basically everything in software development, is about being aware of the tradeoffs and figuring out the best balance.

muraiki3• 12 years ago

Suspicion might be warranted if the page only discussed size. However, it lists many features.

danesparza2• 12 years ago

One of the biggest selling points for React/Flux for me was the fact that it had been proven by Facebook and Instagram on some very large projects.

What has this been used on?

sebastianconcpt4• 12 years ago

Welcome to the "Nobody was fired by hiring IBM" of the new century.

danesparza2• 11 years ago

Please don't misunderstand. I was only trying to make the distinction between "somebody's pet project that might work" and "this stuff HAS to work for millions of views and hundreds of devs every day"

juliangregorian• 12 years ago

And? Instagram's web app is still kinda crappy.

Dojo has also been used on a bunch of huge projects, but nobody gets excited about it...

michaelbuckbee• 12 years ago

The group releasing it has a drop in forums/commenting system called "Muut" that is fantastic. We needed a private forum system and it was one of the easiest integrations I've ever done. Really solid work.

jbrooksuk2• 12 years ago

For anyone who doesn't remember, Riot.js used to be a 1kb MVP library, https://news.ycombinator.com/item?id=7036274

tipiirai46• 12 years ago

I'm sorry :)

jbrooksuk2• 12 years ago

Shakes fist you will be ;)

This looks better though, IMHO.

CmonDev2• 12 years ago

Where is the list of controls? I would be really interested to see their grid layout control implementation. This is something web is struggling with.

tipiirai46• 12 years ago

Riot 2.0 is a "core" library and such controls can be build on top of it. No controls exist, since this is all very new.

CmonDev2• 12 years ago

What happened to Riot 1.0 though?

mhd• 12 years ago

I would say that a grid would be a great showcase, especially with custom column renderers and/or editors. That's a real stress test for any GUI system, update code, templating etc.

apaprocki• 12 years ago

I've been funding CSS Grid implementation work for 2+ years so that eventually no one needs a framework for grid layout. Go play with it in Chrome and help squash bugs :)

kmfrk• 12 years ago

Would love an example of an example project. That can be cloned and played around with.

Some people learn by reading docs, but I like the hands-on experience.

tipiirai46• 12 years ago

Agreed. This is coming.

nhunzaker• 12 years ago

This seems way different than the library I remember 6 months ago...

https://github.com/muut/riotjs/tree/8c7e841e2c7724df9bab9397...

Rebrand?

tipiirai46• 12 years ago

We certainly thought about rebranding. But since Riot 2.0 continues the minimalistic approach and "only" changes the way how views are assebled we thought the name can stay.

bshimmin• 12 years ago

It seems like their manifesto here hasn't really stood the test of time: https://muut.com/blog/technology/riotjs-the-1kb-mvp-framewor...

(The bits about jQuery at least, anyway.)

tipiirai46• 12 years ago

True. Things have changed since then. Especially about role of jQuery in views. Riot 2.0 unifies HTML/JS together causing less need for it.

I still think jQuery is still fantastic and definitely has a lot of use cases.

debacle• 12 years ago

Minimal usually means slow.

lsdafjklsd• 12 years ago

After using ember's router and react-router, I can't do client side routing with a router like this (or backbone's, or anything that is sinatra like). The layout management part of nested routes is crucial and way too hard to do with something as minimal as this.

That said, great work on this library! I'm impressed with how much functionality you guys have in such a small package.

marrs3• 12 years ago

By nested routes, you're referring to the kind of thing described by finchjs? How are they critical to your workflow? Would be interested to learn more.

xixixao• 12 years ago

Which (if any) client side router library do you prefer then?

danabramov3• 12 years ago

react-router, I assume.

See more on nesting: https://github.com/rackt/react-router/blob/master/docs/guide...

cayblood4• 12 years ago

I would like to see more documentation about how to accomplish some of the benefits of web components with Riot.js, such as the ability to style your custom components without having those styles influenced by the host page's CSS and the ability to selectively theme nested elements with things like /deep/ and ::shadow.

cayblood4• 12 years ago

Also the ability to easily broadcast events up and down the component hierarchy.

tipiirai46• 12 years ago

Currently styling is outside Riot's responsibility. Shadow elements are not supported enough on browsers and require too much polyfilling.

Also not sure about component- based styling in general. I think that CSS should be controlled separately <-- highly personal opinnion.

cayblood4• 12 years ago

It would still be good for you to address this concern in your documentation since you claim that it's a replacement for Polymer. I would suggest providing a few examples of how one might accomplish CSS isolation on their own in a way that is 'good enough' for real-world use.

cayblood4• 12 years ago

Your whole point about polyfilling really avoids the issue that web components/Polymer is trying to address. Of course polyfilling is needed now for that, but until we have it, we won't have truly reusable web components, and claiming Riot can substitute Polymer is therefore a pretty big bait and switch, cool though Riot.js may be.

curveship4• 12 years ago

Question: do I read your compiler right, that any line starting with 'var', 'function' or 'this' is assumed to be javascript? So for instance:

   <p>
      How will riot.js compile
      this line?
   </p>

would fail?

[Don't mean to sound negative: I've been playing around with my own minimalist framework, so this is right up my alley. I'm reading the code to get a feel for how we've solved problems the same or differently, including the compile phase. Neat stuff and I'll write more when I have time to go over it in more depth.]

tipiirai46• 12 years ago

Not sure but this might indeed fail. Can you place an issue to github? Thanks!

Maybe it's good to split HTML and JS with the last HTML tag.

curveship4• 12 years ago

Confirmed. Just take the demo app and insert the line 'this is some text.' anywhere in it. It looks like it's particularly bad if you put it into a nested element: the compiler treats everything after the line (including html markup) as javascript.

curveship4• 12 years ago

The compiler also fails if a multi-line comment doesn't end at the end of a line.

  <!-- a comment --> and more text

It outputs an empty compiled file.

My honest opinion is that you should consider rewriting the compiler in a classic tokenize-parse-compile style. Several projects (like mustache.js) have had to go through this evolution. Your current solution -- line-by-line with regexes and state flags -- will only get hairier and hairier.

curveship4• 12 years ago

Issues logged for this, the multi-line comment termination issue, and for treating any line that ends with')' or '}' as javascript.

evmar2• 12 years ago

Idea: require a <script> tag around the JS in the template (but just for your parser's benefit, not as a tag you intend to embed literally in the rendered DOM -- you can remove it at parse time as necessary).

This has the nice side benefit that it will make editors happy. (E.g. emacs recognizes <script> tags within HTML and does JS highlighting/indenting on their content.)

karmakaze2• 11 years ago

I tried making a simple dynamic page and failed repeatedly by attempting to put seemingly innocuous javascript in { } blocks. A simple case such as { platforms.join(' ') } works fine as where { technologies.map(function(t) {return t}).join('|') } does not. Until this is either fixed or (all limitations and work-arounds) documented, I consider this unusable for any real project.

karmakaze2• 11 years ago

Looking at the generated code:

  (function(v) {
        try {
            v = d.technologies.map(d.function(d.t) {
                    d.return d.t
                } finally {
                    return !v && v !== 0 ? "" : v
                }
            }).call(d), ").join('|') }"].join("")

There's two problems: (1) prefixing keywords with 'd.' which may possibly be solved by skipping keywords or with(d){...} and (2) the ").join('|') }" code became data.

iamdanfox• 12 years ago

Immutable props seems to be one immediate difference between React and Riot. I hope this could be considered for a future update; immutability by default makes debugging so much nicer!

(Also React's PropType checking is surprisingly useful)

b6fan2• 12 years ago

One thing I like React is it is plain javascript.

Therefore I can use coffeescript to describe the component:

    {div, p, ul, li} = React.DOM
    ...
    render: ->
      div className: 'foo',
        p className: 'bar', 'blabla'
        p className: 'bar', 'blabla'
        ul className: 'somelist',
          @state.items.map (x) -> li key: x.id, x.content

If Riot.js uses a custom parser, it may not be able to do this.

tipiirai46• 12 years ago

The above is not possible with Riot.

kailuowang• 12 years ago

I still think that a declarative language is more suitable to describe the UI layout than a DSL built by non-declarative languages.

woah3• 12 years ago

Wouldn't this be possible with some preprocessing pipeline?

evmar2• 12 years ago

This no longer works in React 0.12 because they changed the element creation syntax. :\

b6fan2• 12 years ago

Actually I am using this syntax with React 0.12.1. React.DOM just work as expected. For custom components, prepend "React.createClass" with "React.createFactory". See http://jsfiddle.net/saxr8gLd/

ph0rque• 12 years ago

Is there any way to automatically convert your react code to riot to try it out? That would make it easy for me to decide if I should switch.

license2e• 12 years ago

+1 for React to Riot converter

danabramov3• 12 years ago

After reading a bit more, I don't think it's really that React-like, except for virtual DOM.

I wrote a tangentially related article today:

https://medium.com/@dan_abramov/youre-missing-the-point-of-r... (will be a series of posts, this is intro)

sebastianconcpt4• 12 years ago

I really like what you guys are trying to do. MVP is fantastic and if you get the virtual-dom kind of rendering then it could be it.

I'm planning to evaluate integrating this for flow [1] I've already created a card for it [2]

[1] https://github.com/flow-stack/flow [2] https://trello.com/c/6gwqvq5l/91-riot-integration

mrcwinn2• 12 years ago

"Riot is React + Polymer + models + routing without the bloat."

It is not + React. It's - React. It lists as one of its features, for example, a lack of a component lifecycle API (componentDidMount, componentWillMount, etc). This lifecycle API is one of React's best and most usable features. I can't give too much credit to a "tiny library" if it achieves its size by removing even the most basic features of other projects it's drawing from.

I don't mean to be dismissive of the work itself. Just sayin' - for people who might jump on this and think, "it's smaller, that's great!" - there is more to the story than its file size.

tipiirai46• 12 years ago

Riot has lifecycle events.

lowboy• 12 years ago

https://muut.com/riotjs/guide/#tag-lifecycle

mrcwinn2• 12 years ago

Great link. Then I'm even more confused that it makes the point to say it doesn't have "componentDidMount," [but it just has something else instead]. To me, the mixed markup shown on that page is a bizarre way to express a component's rendered state. Just my personal opinion.

tipiirai46• 12 years ago

I want to continue from my earlier (hasty) response. I was on mobile and don't enjoy typing there.

What I want to emphasize is that you can build custom tags without knowing much how Riot works. Just put together HTML and JavaScript. No need to know about `getInitialState`, `render`, `this.state` etc.. I wanted to create a tag definition syntax that is easy to learn and remember.

There are lifecycle events if you want to do something more specific.

I'm also not a fan of `shouldComponentUpdate`. Ideally you should not think about such things and let the underlying library take care of the performance issues.

RussianCow5• 12 years ago

I'm also not a fan of `shouldComponentUpdate`. Ideally you should not think about such things and let the underlying library take care of the performance issues.

In my experience with React, something like this is absolutely necessary for performance once your data model gets to a certain scale. Does Riot have an equivalent? I agree that you shouldn't have to think about that stuff, but the reality is that sometimes you need that extra bit of performance.

chadpaulson• 12 years ago

I'm curious why a library which puts emphasis on a slim Virtual DOM implementation would go through the trouble of accommodating jQuery.

saurabhnanda2• 12 years ago

I just wish there was a way to fast forward 2 years into a 10k LOC project to find out what new problems this creates. After running after the new hotness in technology for the last 5 years, I've realised it's never about the problems it solves today. It's the shit that you have to maintain a couple of years down the line.

(Not saying that this is bad -- just a random rant)

api2• 12 years ago

I tried GWT years ago. It worked amazingly well, and let me write web apps in a real language. But it was significantly slower to develop a new site in GWT vs. plain vanilla HTML + CSS + JavaScript, and the speed to get up and running eventually seduced me away.

Now I'm considering going back and giving it another try. It takes more time to get up and running with GWT, sure, but the stuff you do write with it is written in... well... a real language with types and good tooling and real design patterns. The result is an application you can maintain and build upon for a long period of time rather than a heap of web cruft that collapses quickly under its own weight.

I know it's not sexy, but I've had the same experience you've had with "sexy." I'm becoming generally disillusioned with weakly typed and even dynamically typed languages -- they're fast to write but hard to maintain over long periods of time.

http://www.gwtproject.org

spankalee• 12 years ago

You should also look at Dart. It has a very fast iteration cycle and is a much nicer language that Java (in my very biased opinion - I worked on Dart).

hderms• 12 years ago

I echo your sentiments about disillusionment with weakly typed/dynamically typed languages and I still haven't really reached a situation where I was glad I didn't have a type system backing me.

boobsbr2• 12 years ago

"real language"...

wtetzner• 12 years ago

If you want a "real" language with types and whatnot, there's js_of_ocaml.

porker• 12 years ago

The other advantage with GWT I see is.. as the target changes, your app doesn't have to, only the transpiler.

GWT can output to ExtJS, to <insert next HTML5/JS framework>, to <future platform>. And barring minor changes, your code stays the same.

Now that is worth the investment.

nogridbag• 12 years ago

I used GWT for a few years on two projects, but I would not use it on any future projects. The first was using GXT, which you should probably avoid for public facing sites.

We ran into some GWT compilation issues mainly due to code size a couple of times with some browsers, like Safari, that left us dead in the water until Google released an update.

The second project used vanilla GWT and we were very happy with how performant it was. But we avoided lots of GWT features which seem over-engineered and complicated. We used JSON overlay types instead of RPC calls (which made our compilation / or dev mode much faster - I forget honestly). We avoided MVP, because I never met anyone who actually fully understood MVP with GWT. Instead, we had a very simple MVC structure that worked great for us (but lacked unit tests..). We avoided most of the CSS features because the complexity/value wasn't favorable for us.

Moved on to a JS project afterwards and it was a breath of fresh air.

state2• 12 years ago

This is so true.

On the one hand I wish that the docs for these projects could speak to those concerns, but on the other hand I'm not even sure how they would do that successfully. When something is this young it just takes time to figure out how it's going to survive and be maintained.

I remember the days of using prototype.js over jquery. If only someone could have saved me the time.

v13inc5• 12 years ago

I'm sorry for coming across as a dick, but the idea that you "wasted" time learning a framework that became obsolete is silly to me, and it seems to be a common sentiment.

Ask yourself: at the time you used prototype.js, did it save time on the project?

If you answered Yes, then it was never a waste of time. Knowing prototype.js AND jQuery makes you a better developer: you learned the hard way that abusing prototypes can lead to hard-to-understand code. That can only be a good thing!

tomphoolery• 12 years ago

I remember the days of using prototype.js over jquery. If only someone could have saved me the time.

There was plenty of criticism from the JS world when Prototype came out, and the main issue everyone had was how Prototype attempted to shoehorn classical OOP into JavaScript (hence, the abuse of prototypes and fake class inheritance), which is a mistake amateur JS developers make to this day. jQuery has at least made it so using the most popular DOM abstraction framework didn't also mean you were running less-than-ideal code inherently, but developers still manage to mess this one up.

I think it's because when you learn how to program, you only learn the classical style, so you're not ready for the pitfalls of prototypal inheritance. So a lot of developers go through the "phase" of attempting to retro-fit their own ideas of how programming should work into a language that is designed in a totally different way, inevitably lead to problems, and have "the revelation" of understanding the prototypal inheritance idea. It's kind-of like a growing pain, which is why I'm really happy JS is being taught more heavily in schools and especially to entry-level programmers. Unlike Java, JavaScript is more accessible (just pop open the REPL in any browser) and its results are easier to observe. While it's not a great tool to teach people the concepts of OOP, I think it's very useful to teach kids at a young age that there isn't just one way to do things. They're different enough to screw developers up on a day-to-day basis, but not different enough that spending a few weeks with the language isn't enough to grasp its power.

As others have said, you really didn't waste your time there. If anything, it was simply a matter of JS developers collectively and simultaneously going through the same growing pains and eventual realizations about how the language works.

drt• 12 years ago

Agreed.

v13inc5• 12 years ago

Those problems are best solved with Engineering best practices and culture, in my opinion. Each tough / innovative problem is probably somewhat unique for your startup, and picking a solution (a front-end framework) before you even know the problem limits your ability to solve it creativily.

Most programmers are good enough that with a good refactoring culture, they can evolve the equivalent of an in-house framework. Although, for some reason, I gather that programmers are scared of in-house "frameworks". I think that attitude is short-sighted since the app you build on top of the framework will end up being more complex than the framework itself.

RussianCow5• 12 years ago

It goes both ways. By rolling your own framework, you inevitably end up reinventing the wheel and solving problems that have already been solved. For each feature you need, you either have to create your own solution, or manually integrate a bunch of smaller libraries. On the other hand, committing to an established framework means you have to work around issues that the framework was not designed to solve.

I wouldn't dismiss using an established framework as "short-sighted". It's a tradeoff: the more complex and unique your problems are, the more it makes sense to roll your own.

lhorie5• 12 years ago

FWIW, the framework I wrote (Mithril) is a direct product of working on a multiple-man-year Angular codebase and the pains that arise from such a beast. I wrote about that here ( http://lhorie.github.io/mithril-blog/lessons-learned-from-an... )

On a related topic, I talk about complexity walls (the idea of code that outgrows a framework's zone of comfort) here ( http://lhorie.github.io/mithril-blog/decreasing-cognitive-lo... ) and there are slides for a presentation I gave a while back that talks about the design decisions that went into Mithril to reduce learning curves. (here: http://lhorie.github.io/mithril-presentation-oct-js-tech-nig... )

easymovet• 12 years ago

Where does Mithril fit in this stack: RequireJs, Knockout (with components), SammyJS (for routing/browser history and events)?

--After doing some reading it looks like it replaces some of knockout and sammy but I'd lose data binding and dependency tracking of knockout.

sanityinc• 12 years ago

Mithril is a tremendous little framework, and Leo has done an exemplary job of writing it, documenting it and blogging about usage patterns and tricks. While declining frequent requests that he cram more functionality into its core, he takes the time to explain the trade-offs, showing a deep understanding of the problem space which gives me confidence to build upon his work. So thanks Leo!

Hopefully, in time, more people will realise the "zen" of mithril's minimal approach. In the meantime, interested readers can check out lichess.org, which recently rewrote its impressive UI using mithril.

tipiirai46• 12 years ago

Mithril "HTML" syntax is not for my taste:

return m("html", [

    m("body", [

        m("input"),

        m("button", "Add"),

        m("table", [

            m("tr", [

                m("td", [

                    m("input[type=checkbox]")

                ]),

                m("td", "task description"),

            ])

        ])

    ])

]);

desireco42• 12 years ago

Ha ha ha, this is awesome. Thank you for writing this. You have to admit, benefits that are provided sound amazing, hard to look over.

It is interesting times for sure.

xmonkee• 12 years ago

Nanda? Haha funny to run into you here. Kaisa chal raha hai?

saurabhnanda2• 12 years ago

I couldn't find out more about you from your HN username. Care to ping me on twitter @saurabhnanda ?

curiously• 12 years ago

The amount of negativity and grilling is overwhelming here.

Riot addresses all of my pain points about frontend javascript frameworks by not being one yet offering the essentials.

The file size is absolutely essential. ~100kb to load Angularjs in your browser is crazy and to have to wrestle with framework specific learning curve.

My only concern is will the learning curve be brutal as Backbone.js?

stereosteve• 12 years ago

Looks nice. +1 for enclosing JS in a script tag.

Vuejs has a nice component compiler: https://github.com/vuejs/vue-component-compiler

It puts JS inside of a script tag, which would fix some of the parsing issues, and also fix syntax highlighting. It also provides hooks for pre-processors. Have you considered this approach?

tipiirai46• 12 years ago

Need to consider the script tag.

boskop• 12 years ago

Looks very similar to ractive component spec: https://github.com/ractivejs/component-spec/blob/master/auth...

caoglish• 12 years ago

Last year, its size is 1k which they are proud of. Now 2.5k which is 2.5 times of used to be. Just let me guess: this library will become double size to 5k next year this time.

Even jQuery is thinking how to reduce the file size by its team. This library increases its size like this much. Seriously?

gasping• 12 years ago

This bears no resemblance to react whatsoever. By taking out the render, getInitialState, componentWillMount and other lifecycle methods Riot.js completely misses the ideology behind react and becomes just another templating library. Waste of time, anyone reading this should stick with React.

Not to mention we've moved past code tags like "each={ item, i in items }".

tipiirai46• 12 years ago

Glad you like React so much!

Maybe have another look for Riot on a later time and you can perhaps see the reason for it to exist.

pags• 12 years ago

Maybe I just don't get it, but I can't even get anything from the landing page. What concerns does this library address? What are the general abstractions like?

Why would I even consider digging deeper without knowing the answers to those two questions?

facorreia• 12 years ago

I've user Riot 1.0 successfully on a project, and I'll be looking into this iteration. Embracing React's virtual DOM model, in a minimalist way, does sound attractive.

punkbit2• 12 years ago

So impressed with both Riot and Mithrill! Thanks for sharing your work guys!

bleuarff• 12 years ago

I will definitely have a look at this release, it seems to bring quite a few changes. We've been happily using Riot in production environments for nearly a year now, since before 1.0 release. I can't tell enough how happy I am with this framework. It's incredibly easy to build quite complex interfaces. Thanks Muut for that!

niutech• 12 years ago

Earlier news about Riot.js: https://news.ycombinator.com/item?id=6653024

Riot – A React-like, 2.5K user interface library

Related Stories