Integration between Vue reactivity and Tracker reactivity about vue-meteor-tracker HOT 31 CLOSED

I have finished integrating Tracker with Vue. I think the result looks amazing. There are some internals we could continue improving, but I think that interface for developers works well.

To showcase it, I implemented TodoMVC in it. See this file for an example of Vue component using familiar Meteor concepts, like reactivity, subscriptions and methods. (And also some custom packages, to show how they continue working as they worked in Blaze.)

Some instructions how to use it can be found here. After more people tested it and more feedback, we can work on putting this into a package and more reusable form.

Also, this is on purpose very non-MVVM and trying to be as close to what experience with Blaze is. (So subscribing to data, calling methods to modify data on events, without any fancy multi-way data binding.) Those things can be future work.

Comments and feedback welcome.

One potential step (which I am not planing to do personally, but would invite somebody to do) is to convert spacebars compiler to convert Blaze template syntax to Vue templates, in a similar way how Vue allows to use Pug/Jade.

from vue-meteor-tracker.

I made progress. I have full Tracker compatibility version implemented on top of Vue's observer:

• it needs for now a fork of Vue: vuejs/vue#4652
• code: https://github.com/mitar/vue-test/blob/master/packages/tracker/tracker.js
• example app: https://github.com/mitar/vue-test (notice how I can use Meteor ReactiveVar inside computed value directly)

from vue-meteor-tracker.

Yes, of course. I run all Tinytests, the whole Meteor suite of tests, successfully (so Blaze tests included, and Blaze was used to render Tinytest UI).

from vue-meteor-tracker.

Depending if we want 100% compatibility with Tracker and the same order of how dependencies are processed (especially outside rendering/Blaze/Vue dependencies).

One option I was considering initially was that we would have two queues, Tracker and Vue, and then just integrate Tracker's dependency with Vue dependency objects. The downside with this is that Vue would not invalidate Tracker's context then. So it would be only one directional. Now it works in both directions. You could have something like:

count() {
  Tracker.autorun(() => {
    counter.set(this.buttonLabel);
  });
  return counter.get();
}

And it would work. (No reason why one would do something like this, just an example.) When buttonLabel would change, autorun would rerun. When outside count would get invalidated, internal autorun would stop. Exactly how one was used in Meteor/Blaze/Tracker.

I think this is really powerful.

from vue-meteor-tracker.

It would be great if Meteor supported overriding packages. Because for now the only way to override the package is to put it inside packages. But this is not really a nice way to distribute this new implementation of Tracker.

from vue-meteor-tracker.

Depending what the goal is. For 100% compatibility, probably yes. I definitely need access to Vue and Watcher symbols. Now, we could probably monkey patch more. The issue is the lack of support for after flush callbacks and the while loop around.

from vue-meteor-tracker.

Hey @mitar , a lot of useful thoughts on the integration. will definitively help with a potential vue-powered blaze! 👍

I initially decided to separate the Tracker and Vue reactive callbacks because I had very obscure issues by merging them into one callback (like other integrations does - and those I tried had similar issues). This caused unecessary/duplicate updates. I agree that we need to rethink the tracking integration and maybe completely replace Tracker internals with Vue Dep system.

from vue-meteor-tracker.

So what I am currently thinking is that probably it would be better if we get Tracker and Minimongo to properly integrate with Vue, and then offer Blaze as a preprocessor (similar to how Jade is done for Vue). It would not be completely the same as Blaze 1.0, but it could have similar Handlebars syntax. Probably we would just name it Handlebars and not really Blaze. So Handlebars preprocessor for Vue.

from vue-meteor-tracker.

BTW, do you know where is reactivity on accessing data in Vue registered? Looking at this proxy I do not really get it.

from vue-meteor-tracker.

Vue setups special getters and setters that are wired to a Watcher instance that keep track of every other instances that use the getters, and the setters wake them up (plus Array methods like push). There is section about reactivity in the guide.

from vue-meteor-tracker.

Yes, I was more curious in the code, where this happens. Because I do not see that this proxy is in any way special. propse use defineReactive, but not data.

from vue-meteor-tracker.

Because the data properties are stored inside a $data reactive object (see here), that are then proxied to the component instance (see here).

from vue-meteor-tracker.

Hm, I think it is this call which makes it reactive. OK.

from vue-meteor-tracker.

So far, you absolutely need those Vue changes?

from vue-meteor-tracker.

Maybe nextTick could do?

from vue-meteor-tracker.

I was wondering, did you try running blaze with this?

from vue-meteor-tracker.

So this still hinges on getting a PR to Vue accepted? How close can you come without that?

Btw, why include Blaze? Other than backwards compatibility with Meteor packages? Isn't Vue + Tracker integration enough?

from vue-meteor-tracker.

As far as I recall, the author of Vue proposed the Meteor community the solution of using a temporary fork until he accepts the PR in the long run.

from vue-meteor-tracker.

from vue-meteor-tracker.

@Akryum What about just monkeypatching Tracker though?

from vue-meteor-tracker.

Yes, we could just make it so that one hast to git submodule our tracker into packages. Probably this is the easiest way. And we can use a fork.

Btw, why include Blaze? Other than backwards compatibility with Meteor packages?

There is no need to include Blaze. Where do you see it? It is not here. (It is only one server side, I think, because Meter still adds it on the server side.)

from vue-meteor-tracker.

There is the possibility to create tracks I guess. But I imagine that could be even more trouble than requiring people to manually clone tracker into packages/...

Pretty slow going with the PR if you started in January. I guess he feels Vue is much more important than Meteor these days... But you think it will happen soon?

from vue-meteor-tracker.

@Akryum: What is your take on how to integrate Minimongo the best? Now that we have proper Tracker support, it means that if you do collection.find().fetch() inside Vue computed function, it will rerun on every change, as expected. But what should we do if you return collection.find()? Should we do anything smart, or just call fetch() on it and freeze it? I see that you are doing in your approach something with freezing, why? We should also make so that Vue uses _id as a default key for Minimongo results (arrays or cursors).

from vue-meteor-tracker.

So how close is this? Where are we at now? I am using this package, trying to recreate the classic Meteor Todos app in Vue. I have the UI. My issue is with Tracker and Vue ironically enough. I can only subscribe to 1 subscription at a time. It's rather limiting.

from vue-meteor-tracker.

@sethmurphy18 What happens if you subscribe to more than one?

from vue-meteor-tracker.

@Herteby The second subscription does nothing. It just returns undefined, and I know the data I am pulling is there. I can see it the Meteor shell. One sec, I am going to put what I have so far up so others can see what I am getting. I'm trying to stick as close to download and go as I can, so I am trying to avoid the fork, although I am not knocking the work @mitar has done.

from vue-meteor-tracker.

Ok code is here

from vue-meteor-tracker.

@sethmurphy18 Hmm, I don't see any place where you subscribe to two things at once.
This seems wrong though. Vue doesn't have a "ready" hook. It has "mounted" and "created".

Personally I use my own package though.

from vue-meteor-tracker.

Right, I was following the guide on here, thinking maybe if I split the 2 subs. I did revert it back to the standard though. That page is actually where I need to subscribe to 2 things. It's a hybrid subscription. I have been considering using vuex for the whole thing though.

from vue-meteor-tracker.

Your package has me intrigued though...looking into it now. Reminds me a lot of react-meteor-data

EDIT: err...rather what react-meteor-data did for using React with Meteor

from vue-meteor-tracker.

This is done. I am using this in my new apps.

See guide and example.

from vue-meteor-tracker.