
From React to Riot 2.0 - tipiirai
https://muut.com/blog/technology/riot-2.0/
======
antihero
I'm really not sure about the "problems" with React being described.

Minified at 124k. Sure, but with gzip that's absolutely negligible. Unless
your app utterly tiny, 124K is _nothing_ (the version of React with addons is
38K gzipped/minified).

I'm not sure what they're going on about with React's dirty checking - all of
that stuff is override-able, and things like batching are just a sane way of
doing DOM updates.

The verbosity, I'm not seeing it - sure there's JSX, but you mitigate this by
abstracting components so you're building out of high-level components that
mean that the complexity is only shown where it needs to be.

JSX is also far nicer and more explicit than using HTML templates, and brings
a lot to the table, especially with 0.12, including ES6-style patterns that
work really nicely for describing a structure of components.

Also, not sure about the "boilerplate". What are they talking about?

    
    
        React.createComponent({ render(){ return <span/>; });
    

No boilerplate there.

There's not even that much _to_ remember, aside from the component lifecycle,
some handy utilities, and a few useful addons.

There are some more complicated but optional things like PropTypes (not
necessary at all, but a nice way to provide type requirements for your
component's properties) and contexts (which is at current undocumented and a
bit weird, but that's not really an official feature).

Unless you are building apps that are utterly tiny, none of this makes sense.

Looking at Riot2, it looks very implicit and magical - how do we know where
the HTML ends and the script starts? How do you break your logic apart and
have any sort of code re-use?

And for a "non-framework" it certainly seems to deviate from HTML + JS quite a
bit.

~~~
tipiirai
You clearly love React and it works for you. The article is about the issues
_we_ had and how Riot solved them.

~~~
lmartel
Could you answer a few of the parent's questions, though?

We know that the article is about your issues, but we're curious to hear why
these seemingly insignificant issues mattered to you.

------
sisk
An aside but I became curious when riot was mentioned two days in a row, first
thing in the east-coast morning, submitted by the same author.

While self-promotion is a skill, the submitter's comment and submission
history is painfully focused exclusively on their own work.

I can certainly appreciate being proud of the things you build—that's
great—but it comes across as disingenuous when it is quite literally the only
thing you contribute to the discussion.

~~~
tipiirai
That's indeed the case. I basically code my own things and then release them
as open source. jQuery Tools, Head JS and now Riot.js 2.0 to name the biggest
contributions.

HN is an unique place to get feedback for your own work. I certainly have
opinions about others work as well but usually I keep my mouth shut and go
back to work.

~~~
sisk
Having the confidence to release your projects as open-source is excellent and
something I wish more people had.

However—by your own description—HN is a place where you solicit feedback but
can't be bothered to extend the same courtesy to your peers.

Think of it like a conversation. If I approach you asking for feedback on my
projects but never return the favor, does that not seem suspicious?

~~~
tipiirai
I tend to give feedback on a form of GitHub issue. It's more focused and the
discussion doesn't explode.

For my own projects I like to get all the rants as well. Gives a broader
picture. I have a feeling that HN doesn't have a very strict etiquette.

~~~
sisk
Fair point.

To be clear, I take nothing away from what you've done here: More tooling
options are rarely—if ever—a bad thing and your presentation of riot is
beautiful and clear, very well executed.

------
bringking
I am not sure why it's becoming popular to say "It’s unacceptable that the
underlying framework is bigger than the application itself." If your domain
specific implementation is smaller than the framework itself, it means the
framework did exactly what it was supposed to do, it reduced the amount of
work you had to do to implement your app.

~~~
alexro
it is really unacceptable when your app can do without it - and that's Riot is
trying to prove. It doesn't mean to hurt your feelings.

~~~
bringking
I agree that it is unacceptable/irresponsible in a way to have a larger
payload than is necessary, but I think that is a different issue. Something
like selective importing only what you need from the framework vs. the whole
shebang.

~~~
alexro
That's another way of staying minimal, but still, the library makers get to
maintain that pile of rarely used features and that may slow down development,
delay releases.

------
gitspirit
There was a discussion of Riot yesterday:
[https://news.ycombinator.com/item?id=8928433](https://news.ycombinator.com/item?id=8928433)

I can see Riot taking it's fair share of the market with the websites that
have not-so-complex structure and can benefit from code/size optimization,
like various search engines, sharing apps, financial tools, etc.

The key here would be faster than React sever-side rendering - isomorphic apps
seem to be the uprising trend at the moment.

------
jasim
I am not sure I see the value over React yet, but the more experiments in the
field we have, the better we collectively are. So thanks a lot for building
and open-sourcing this.

Is there a non-trivial example of a Riot project that we can look at the code
for? My confusion is around conditionals. The documentation says:

    
    
       In Riot the HTML structure is fixed. Only loops and conditionals can add 
       and remove elements. But a div cannot be converted to a label for example. 
       Riot only updates the expressions without complex subtree replacements.
    
       "Currently if is implemented with CSS display property as well". 
    

Considering this, how would I implement a page that has to show two completely
different components based on a form input?

~~~
insin
Seems like you'd have to include all possible components and toggle them based
on a variable.

It doesn't seem like you can apply an if attribute to a component directly -
the second component here never disappears, but the first is wrapped in a
<div> and does:

[http://bl.ocks.org/insin/5e0bf04cf1f701c235ad](http://bl.ocks.org/insin/5e0bf04cf1f701c235ad)

~~~
jasim
Thanks a lot, this clarifies it. Having only CSS based hiding of components
(and only if wrapped within a div) is a bummer. I am curious to know how the
authors plan to work around it for serious app development.

------
xtian
> To some extent we questioned whether anyone needed a framework at all.

This is the #1 saddest trend in software today. I see it all the time.

Look, if you can't figure out what value people get from a tool, please don't
bother comparing your thing to it.

~~~
tipiirai
Riot is compared to React mostly and React worked as an _inspiration_ for it.
We totally see the value in it. We have used it and still use it on
production. Not sure if you have seen the React vs Riot 2.0 comparison:

[https://muut.com/riotjs/compare.html](https://muut.com/riotjs/compare.html)

~~~
xtian
React isn't a framework.

------
crudbug
I have been reading this since yesterday. Can you shed some light on how can
you include jQuery plugins with VDOM support. Ractivejs [1] does it using
decorators feature.

[1] [http://stackoverflow.com/questions/23083841/ractivejs-and-
jq...](http://stackoverflow.com/questions/23083841/ractivejs-and-jquery-
plugins)

------
crudbug
Observation: I see JavaScript web component frameworks following what JSF
invented some 10 years back, xhtml templates & Expression language for
processing context.

Is the '{}' syntax configurable ? like jinja2 ? I would love to change it to
'#{}' for making it consistent with EL.

------
fdsary
They say it's "React-like", but afaik it doesn't do the cool things with a
virtual dom? What's cool about React is how it doesn't write to the DOM all
the time, only when there is a diff. Does Riot do that? If not, thanks but it
doesn't compete with React.

Also, does it render to string?

~~~
tipiirai
Yup. In Riot the DOM is only updated when there is a diff.

Server side support is coming so you can do "isomorphic" apps and render
components on the HTML page as string.

Current 2.0.1 does not support this feature.

~~~
alexro
Being able to render progressively to the response buffer would be great

