Alternative view-layer libraries (alternatives to Blaze, Angular, React)


#1

Adding to my previous list, here’s some more view libraries in no particular order:


#2

Vue should definitely be on this list! It has:

  • component system
  • virtual dom
  • central one-way data flow approach of React + Redux (via the Vuex library)
  • an optional templating system similar to Angular
  • a Chrome DevTools extension just like React
  • a unit testing framework similar to Enzyme called Avoriaz
  • its own equivalent of React Native called Weex built by Alibaba

#3

How does weex compare to react native?


#4

choo
inferno
picodom


#5

very similar. you get a set of special components that are rendered as native iOS or Java code when built, but you use them as if they are regular Vue components. you can use CSS to add styles and they’ll be converted to native code as well. so you write your components with regular Vue html+js+css and Weex builds it into a native app. it also has some great development tooling, like you can generate a QR code when you build your code, and if you scan it on a mobile phone you can demo your app on that phone without needing to transfer the app manually


#6

Oops, added. Thanks!


#7

^ I added Moon to the list. It’s really fast! About twice as fast as Vue (with a very similar API).


#8

Hmm, I tried playing around with Moon a bit, and it didn’t seem to work so well. At least for someone coming from Vue expecting similar features.

Vue:

methods: {
  increment() {
    this.count++
  }
}

Or you can simpy use an inline expression

<button @click="count++">Increment</button>

Moon:

methods: {
  increment() {
    this.set('count', this.get('count') + 1);
  }
}

Moon doesn’t support inline expressions for events

Some other things that work in Vue but not in Moon:
{{value || 'default'}}
In Moon, this will display ‘undefined’ as text if value doesn’t exist.

{{toggle ? 'On' : 'Off'}}
This will display “On” even when toggle is false

I then tried:
{{toggle == 'true' ? 'On' : 'Off'}} and {{toggle == true ? 'On' : 'Off'}}
They would always display “Off” even when toggle was true :confused:


#9

@herteby I hear ya. I noted that in an issue, and Kabir replied that there’s a plugin that you can use to enable getters/setters. I haven’t tried it, but then it would be

Moon and Vue:

methods: {
  increment() {
    this.count++
  }
}

Calling methods is still not ideal, Kabir didn’t mention if there’s a plugin for that.

Interesting points about those inline expressions. I’ve noted them in that issue.


#10

:grin::grin::grin::joy:


#11

Could you guys share your experience in using Meteor with any other front-end options besides Blaze, Angular and React?

I use akryum’s packages for Vue in production and have some problems (with source maps, hot reload, CSS modules, CSS minification). But generally the support for Vue is good, and we even have its own page in the Meteor guide now.

So my question is actually about other libraries from the @joe’s lists.

Recently I tried to combine Meteor with HyperHTML. I haven’t spend enough time on it so I can’t draw conclusions yet. But for now it looks like automatic re-renders on collection changes is a simple task thanks to Tracker.autorun. The bigger problem is using component’s reactive data in Mongo queries, like .find({ foo: this.state.foo }).

Would be very interesting to read about your experience and approaches.


#12

I had a pleasant experience building a few apps with Svelte (…and Sapper, which is like Next.js or Nuxt but for Svelte).

There’s already a package for wiring up Svelte together with Meteor, svelte:compiler.

Svelte produces minimal bundles with snappy code. It has a templating system somewhat similar and superior to Blaze. The core idea is to compile the framework away and just ship “vanilla js”.

The thing is, there’s currently a major rewrite taking place, moving from v2 to v3. I suspect the v3 will either be a mad scientist’s experiment that will never take off, or it will be a game changer.