35 ms·

From React to Riot 2.0

79 points by tipiirai 12y ago

bringking 12y ago
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 12y ago
  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 12y ago
    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 12y ago
      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 12y ago
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.
antihero 12y ago
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.
- Touche 12y ago
  > Minified at 124k. Sure, but with gzip that's absolutely negligible. Unless your app utterly tiny, 124K is nothing. Well React is just a view engine so you have to combine it with something else, usually a flux implementation. Then if you want to make things even easier you throw in ImmutableJS which is not small either. Or you might just use Omniscient which wraps this all up into a nice package. But by this point you're close to 400k pre-gzip. That's gigantic compared to the competition. IIRC MercuryJS (which has a VDOM and Immutable data structures) is like 40k. Mithril (which is an MVC VDOM library) is 15k.
- tipiirai 12y ago
  You clearly love React and it works for you. The article is about the issues we had and how Riot solved them.
sisk 12y ago
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.
- alexro 12y ago
  I don't think this is necessarily bad in this case. It's quite normal for busy people to focus on their work, many YC startup founders do the same. The first submission has caused quite a hot discussion, so submitting again the next day isn't overkill IMO.
  - JLehtinen 12y ago
    Well Tero's fiercest opinions typically take the form of code :) Riot 2.0 was completed and submitted yesterday after lunch (Finland time), blog post was completed today at the same hour. We genuinely felt they were worth telling the world about and people seem to agree.
- tipiirai 12y ago
  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 12y ago
    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?
deleted 12y ago
[deleted]
fdsary 12y ago
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?
- thu 12y ago
  Check the previous related submission (linked in this thread), there is the same comment as yours with answers.
- tipiirai 12y ago
  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 12y ago
    Being able to render progressively to the response buffer would be great
jasim 12y ago
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 12y ago
  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 12y ago
    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.
- tipiirai 12y ago
  Like this <my-tag> <nested-tag1 if={ parent.val }/> <nested-tag2 if={ !parent.val }/> <input oninput={ edit }> edit(e) { this.val = e.target.value } </my-tag>
  - jasim 12y ago
    Thanks for responding. You might want to look at insin's comment above. In insin's code example, the conditional doesn't work on a component, but does on a normal HTML tag. Would that be a bug? The lack of true conditionals is a turn-off for me. React's conditionals lets you build things like react-router without any extra semantics, in which the router picks up the appropriate component based on the URL.
xtian 12y ago
> 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 12y ago
  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 12y ago
    React isn't a framework.
crudbug 12y ago
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-jquery-plugins http://stackoverflow.com/questions/23083841/ractivejs-and-jq...
crudbug 12y ago
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.

79 points by tipiirai 12y ago

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 12y ago
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 12y ago
  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 12y ago
    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 12y ago

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.

antihero 12y ago

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.

Touche 12y ago
> Minified at 124k. Sure, but with gzip that's absolutely negligible. Unless your app utterly tiny, 124K is nothing. Well React is just a view engine so you have to combine it with something else, usually a flux implementation. Then if you want to make things even easier you throw in ImmutableJS which is not small either. Or you might just use Omniscient which wraps this all up into a nice package. But by this point you're close to 400k pre-gzip. That's gigantic compared to the competition. IIRC MercuryJS (which has a VDOM and Immutable data structures) is like 40k. Mithril (which is an MVC VDOM library) is 15k.
tipiirai 12y ago
You clearly love React and it works for you. The article is about the issues we had and how Riot solved them.

sisk 12y ago

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.

alexro 12y ago
I don't think this is necessarily bad in this case. It's quite normal for busy people to focus on their work, many YC startup founders do the same. The first submission has caused quite a hot discussion, so submitting again the next day isn't overkill IMO.
- JLehtinen 12y ago
  Well Tero's fiercest opinions typically take the form of code :) Riot 2.0 was completed and submitted yesterday after lunch (Finland time), blog post was completed today at the same hour. We genuinely felt they were worth telling the world about and people seem to agree.
tipiirai 12y ago
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 12y ago
  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?

deleted 12y ago

[deleted]

fdsary 12y ago

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?

thu 12y ago
Check the previous related submission (linked in this thread), there is the same comment as yours with answers.
tipiirai 12y ago
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 12y ago
  Being able to render progressively to the response buffer would be great

jasim 12y ago

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 12y ago
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 12y ago
  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.
tipiirai 12y ago
Like this <my-tag> <nested-tag1 if={ parent.val }/> <nested-tag2 if={ !parent.val }/> <input oninput={ edit }> edit(e) { this.val = e.target.value } </my-tag>
- jasim 12y ago
  Thanks for responding. You might want to look at insin's comment above. In insin's code example, the conditional doesn't work on a component, but does on a normal HTML tag. Would that be a bug? The lack of true conditionals is a turn-off for me. React's conditionals lets you build things like react-router without any extra semantics, in which the router picks up the appropriate component based on the URL.

xtian 12y ago

> 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 12y ago
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 12y ago
  React isn't a framework.

crudbug 12y ago

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-jquery-plugins http://stackoverflow.com/questions/23083841/ractivejs-and-jq...

crudbug 12y ago

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.