Riot – A React-like, 2.5K user interface library • Hacker News Board

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

#131

Post by mrcwinn » Thu, Jan 22, 2015, 4:47 PM UTC

"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.

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

#132

Post by tipiirai » Thu, Jan 22, 2015, 4:48 PM UTC

mrcwinn wrote: post #131

"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 proj…

Riot has lifecycle events.

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

#133

Post by lowboy » Thu, Jan 22, 2015, 5:10 PM UTC

mrcwinn wrote: post #131

"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 proj…

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

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

#134

Post by evmar » Thu, Jan 22, 2015, 5:11 PM UTC

tipiirai wrote: post #97

curveship wrote: post #94

Question: do I read your compiler right, that any line starting with 'var', 'function' or 'this' is assumed to be javascript? So for instance: How will riot.js compile this line? 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 compi…

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.

Idea: require a 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 tags within HTML and does JS highlighting/indenting on their content.)

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

#135

Post by ceedan » Thu, Jan 22, 2015, 5:27 PM UTC

woah wrote: post #125

tipiirai wrote: post #74

Earlier quoted context omitted.

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.

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.

That's one way to spin it.

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

#136

Post by b6fan » Thu, Jan 22, 2015, 5:29 PM UTC

evmar wrote: post #129

b6fan wrote: post #110

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.

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

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/

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

#137

Post by chadpaulson » Thu, Jan 22, 2015, 5:40 PM UTC

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

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

#138

Post by saurabhnanda » Thu, Jan 22, 2015, 5:46 PM UTC

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)

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

#139

Post by cayblood » Thu, Jan 22, 2015, 5:46 PM UTC

tipiirai wrote: post #99

cayblood wrote: post #91

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.

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.

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.

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

#140

Post by tipiirai » Thu, Jan 22, 2015, 5:48 PM UTC

mrcwinn wrote: post #131

"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 proj…

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.