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

[trusktr]

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

• Dio
• Preact
• Flyd
• Surplus
• Etch by GitHub
• Turbine (very cool concept!!!)
• HyperHTML
• Elmish
• SkateJS (Components written with SkateJS work anywhere else like in Angular, React, Vue, etc, and includes JSX!)
• Vue.js
• Moon (very similar to Vue, but twice as fast)
• Picodom
• Aurelia

[efrancis]

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

[aadams]

How does weex compare to react native?

[crapthings]

choo
inferno
picodom

[efrancis]

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

[trusktr]

Vue should definitely be on this list! It has:

Oops, added. Thanks!

[trusktr]

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

[herteby]

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

[trusktr]

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

[jwkim]

[red-meadow]

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 @trusktr’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.

[arggh]

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.

[jam]

@arggh What are your thoughts on Svelte v3 now that it’s out?

Does Sapper wholesale replace Meteor or is there a way to blend them together in some way?

[trusktr]

@jam Sapper seems to have its own build system to get your front-end app running. Probably wouldn’t be easy to use this with Meteor, unless it has a way to export a JavaScript bundle. If it does, then you could build your bundle Sapper (similar to like you would with Webpack), and output that bundle into a location in your Meteor application. At the point, it’d be picked up by Meteor just like any other JS file.

So look into if it is possible to place your front-end bundle somewhere. However, if that bundle is tied to Sapper’s back end, then it will be more difficult.

Another idea is to import Meteor libs into Sapper (but then you forgo Atmosphere-only packages, and Meteor’s build system).

[rikyperdana]

You should try Mithril JS with meteor. The APIs are concise, simple, and inline with functional programming. Most of my production projects are built on top of it. See https://github.com/rikyperdana/mithril-autoform

[arggh]

@arggh What are your thoughts on Svelte v3 now that it’s out?

Svelte v3 is awesome. It’s like a dream-come-true for someone who has endured the ancient times of Mootools, Prototype, jQuery, Angular v1, React etc…

Does Sapper wholesale replace Meteor or is there a way to blend them together in some way?

They are very different beasts. I wouldn’t choose Sapper currently for any real app, as it has some serious shortcomings. It’s not at 1.0.0 yet. All depends on what your requirements are. Meteor is battle-tested and takes so much pain away, while giving you very powerful features.

Sapper’s strength (in my view) is the ability to export static sites along with perfect Svelte integration. It also gives you a nice foundation for building a PWA that produces perfect Lighthouse scores. With Meteor, building a PWA is already a bit more legwork.

I’m using Svelte with Meteor and it’s great too.

[jam]

I’m using Svelte with Meteor and it’s great too.

Cool. What’s your setup look like? Are you using any specific packages to help with this?

[trusktr]

Hey you call, I want to share with you a very nice place to see discover UI view-layers while comparing their performance to each other: The Stefan Krause Benchmarks.

You’ll be amazed at some of those fast libs.

[trusktr]

You should try Mithril JS with meteor

You may be interested to see Mithril in my previous comment’s link to Stefan’s benchmarks. Super interesting!

[arggh]

Cool. What’s your setup look like? Are you using any specific packages to help with this?

I’m using svelte:compiler and a custom package to mount Svelte components within Blaze components, and a tiny helper function useTracker to use Tracker inside Svelte. That’s it.