Hey guys!
There’s so much hype about React these days. But there are alternatives…
Does anyone use Riot with meteor? What could you say about the lib? What are the pros and cons? How difficult the learning curve? Other impressions?
6 Likes
Provided link does not work
fixed it
…
I’m using Riot with meteor. very good to me.
A few months ago, I have used React, but now, I completely switched Riot and can’t go back to React.
Pros:
- Riot can encapsulate not only HTML, JavaScript, but also CSS (scoped CSS!) into a component.
(There are a few similar solutions that encapsulate CSS for React, but they are un-official and not smart.) - Riot’s size is very small! (It’s good for mobile users)
- Riot’s component syntax is super simple! In short, HTML centric syntax. On the one hand, React’s one is Javascript centric syntax. Most of designers who work with you may prefer Riot’s syntax than React’s one.
- The specification is small size. so learning curve is the same.
Cons:
- Meteor doesn’t offer official support of Riot (just currently). (but, I’m using Riot with meteor, no problems so far:) )
- Riot isn’t mature yet. so still a little bit buggy. (but time may solve this.)
- Riot is small functions library. so depending on your purpose, you may not feel enough.
My conclusion (and feeling) is that Riot with meteor is already suitable for practical use (at least my work area).
I hope Meteor will support Riot officially near future.
5 Likes
Also play with Riot. As @emadurandal mentioned it is pretty simple lib and plays nice with Meteor right now. I also tryed React first and then started new small project with Riot. And from that moment I haven’t used React at all!
The most wonderfull thing (IMHO) doesnt work with Meteor right now.
1 Like
It doesn’t? Ah, that’s a bummer. As I work in jade and coffee exclusively…
Do not Riot.js and Meteor both use Babel.js to transpile es6? I’m new to Meteor, but if that’s the case one would think there is some path for full integration with coffeescript and custom tags.
Also, are there any blogs/tutorials on Riot.js / Meteor integration? I can’t seem to find any at all. I’d like to know more, as 12k is far more palatable than 141k if you still get a compositional paradigm.
Riot uses its own build plugin. If you wish to use Jade and Coffee (or ES6 via Babel) you should write your own Meteor package to compile .tag files with riot, jade and coffee. In simple words you have to install Jade and Coffee compilers from npm and told Riot to use them for parsing .tag file on compile step. As .jsx it is only a translater/compiler to palin js/es6 files.
Anyway I prefere to write plain js(coffee) like
riot.tag 'my-btn'
"<div class='{btn btn-danger: isError}'>{text}</div>"
(opts) ->
@text = 'Hello man!'
@isError = falseLooks like baysao:riotjs made Riot preprocessors (Coffee, Jade, Stylus etc.) work. And there are packages for a deeper Meteor integration. Really neat. I just can’t stand React syntax, I’m going to give Riot a try.
3 Likes
Nice, but I found that Riot isnt work with SVG. So I had to move back to React)
No, that way you have to clone all the tag nodes into root svg by the hand. The issue here is that we cant use custon tags inside SVG. When you mount riot’s tag you can see custom DOM element into the DOM tree - it is ok for HTMLElement but not for SVGElements
I am a bit disappointed about this, because Riot is much better and faster than React for me
I love the Riot interface. Way cleaner than React’s. I wonder if they will ever be able to compile to react, i.e. for usage of React Native. I get the feeling that a lot of these react spin-offs will end up interfacing with React to take advantage of its ecosystem. I sure hope so at least.
1 Like
Are you still using Riot? If so, is it still going good for you 
? And are you using it with imports & exports (Meteor 1.3)?
@mrzafod -Would you address this question also Or anyone else using Riotjs as a frontend with Meteor? I’m researching virtual-dom react alternatives.
Thanks for your responses!
Linking discussions:
Hy @townmulti. I am still using riot a lot for mobile (hybrid) apps with Meteor 1.3. I dont like tag files and write a vanilla riot components with coffee. Riot works perfect from npm with Meteor. It still has problems with svg. As for me Riot (and Riot router) is much more simple then React.
More over with Riot we still can decouple html representation with clean handlebars syntax and controller. And there are no owfull jsx/cjsx transplitters
What else… Tiny size, fast rendering. Basic components library
2 Likes
Thanks for your response! I am understanding Riot to be a nice alternative. Are you using riot tags within blaze components for imports? If so, is there a small snippet you can share that shows import and export? Or do you know of a repo that demonstrates this Meteor 1.3 usage or something close to it?
I dont use Blaze at all.
# component.coffee
riot = require 'riot'
exports.temp = riot.tag 'temp',
"<div>{name}</div>",
=>
this.name = 'Roma'
# index.coffee
riot = require 'riot'
{temp} = require './component'
riot.mount temp
3 Likes
Cool! Thanks for the snippet! How about data, how do you pull it in? I see a mixin on atmosphere https://atmospherejs.com/baysao/riot-meteor-data. Are you using this or a different way? I appreciate your help on this!
Yeah, you can use it. But I just use this.update() for riot components.
riot = require 'riot'
{HTTP} = require 'meteor/http'
exports.temp = riot.tag 'temp',
"<div>{name}</div><button onclik={fetch}>Fetch</button>",
(opts) =>
@name = 'Roma'
@fetch = (e) =>
e.preventDefault()
HTTP.get 'name.json', (err, res) =>
if name =res?.name
@update {name}
I am wondering how easy to work with Meteor 1.3 (with npm and imports) and any front-end libs for small/mid apps. Using just a few Meteor core parts such Mongo, ReactiveDict, HTTP, awesome Tracker and new build system! Thanks MDG.