Riot.js with Meteor

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 = false

Looks 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)

Isn’t this issue solved? https://github.com/riot/riot/issues/213

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 :slight_smile:? 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.

Well using React was pretty easy with Meteor 1.3, so now I’m about to find out about Riotjs on the front-end lib part. Its nice to mix parts easily! Thanks again! :slight_smile:

1 Like

Looks like I can use my favorite jade+coffee cocktail!

1 Like

I’m so used to Blaze + Viewmodel now… Are there any advantages of using Riot versus that set? (if you happen to have experience with Viewmodel, that is)

1 Like

Unfortunately I didn’t see anything like Viewmodel for Riot. I guess that viewmodel is some kind of simplicity, but IMHO it’s time to separate V and M. I am happy with Reflux for now

Upon looking at Riot once again it looks REALLY slick!
Will try to use it instead of Blaze in my next app and see how it goes :smiley_cat:

You should also give Vue a try (± same syntax as Riot): http://vuejs.org/guide/comparison.html#Riot