Riot.js with Meteor

Planet Earth
9

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
10

Nice, but I found that Riot isnt work with SVG. So I had to move back to React)

11

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

12

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

13

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
14

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:

15

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
16

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?

17

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
18

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!

19

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}
20

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.

21

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
22

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

777×556 21.2 KB

1 Like
23

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
24

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

25

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:

26

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

27

Ahhh… I don’t know already… which one is ‘better’? Which one has better syntax?
We need a really experienced guy here, who worked with Vue and with Riot and with Blaze - does such person even exist???

28

This is a common misconception about view models. Here the word “model” doesn’t represent the capital M in MVC. It means it’s the “model of the view” or the object representation of the view. In a sense ViewModel is not even the V, it’s the code that drives the view.

In Riot terms a view model is the this object you use between the script tags.

1 Like