I’ve been using ViewModel
with Blaze
a lot in my current project, and I have quite a bit of code written. After excluding all things not written by yours truly:
-------------------------------------------------------------------------------
Language files lines of code
-------------------------------------------------------------------------------
JavaScript 727 62615
SASS 204 13011
HTML 461 11946
CSS 184 10063
Blaze and ViewModel is great and I have very little to complain about them. The speed at which I get stuff done is mind blowing (at least to me). This combo has proven to be quite flexible, for example, part of my app is a very customizable web site builder and Blaze+ViewModel
worked wonders on that one. Even so, I’m slightly terrified how Blaze’s development has stalled. @mitar is maintaining the repository, but has himself already moved over to using Vue with Meteor. Last real improvement is from May '17. I’m afraid the next iOS 15 or Android VanillaSyrupPopcorn some day in the future will not work with Blaze and we’re in the ditch.
@manuel has been awesome at fixing minor bugs found in ViewModel, but the recent findings from meteor-web-framework-benchmark suggest that using ViewModel causes a performance penalty of 5-10x compared to plain Blaze, and in the worst case scenario… a lot more. I don’t know if there’s any sensible way to improve ViewModel performance or if @manuel will find the time to do it.
Most of the time my users wouldn’t notice the difference between React and Blaze+ViewModel, but it does occasionally give me trouble, when I end up spending a lot of time rewriting complex component trees to plain Blaze after I notice that rendering on low-end devices is turning out to be painfully slow.
This is especially annoying once one gets used to the comfort of ViewModel
During the last couple of years I’ve tried to contribute whenever I can by submitting bug reports, repros and a couple of PR’s to improve Blaze and ViewModel.
I was already considering the idea of giving CPR to both of these projects by committing some serious time to contribute, since I really enjoy the boilerplateless structure of my components and the whole deal of how I write code with Blaze, ViewModel and CSS-Modules. It’s just a joy to build stuff with and I’m not looking forward to giving up and refactoring my 62k lines of JS to 262k lines of React/Preact/Inferno code (though there is ViewModel for React, I have not yet seen any stats on it’s performance compared to plain React).
(Also, React is already starting to look like an underdog, so why bother…)
Then,
just a few days ago, I found out about Ebay’s MarkoJS through HackerNews. It seems to be gaining those Github stars pretty fast. You should read all about it, it has some impressive features.
Rewriting my huge(?) code base of ViewModel components suddenly seems like a task not that impossible, at least if we can make it a team effort!
Here is a component from MarkoJS docs:
class {
onCreate() {
this.state = { count: 0 };
}
increment(delta) {
this.state.count += delta;
}
}
$ var count = state.count;
<div.click-count>
<div.count class={ positive: count > 0, negative: count < 0 }>
${count}
</div>
<button on-click('increment', -1)>
-1
</button>
<button on-click('increment', 1)>
+1
</button>
</div>
Can you see why I instantly fell in love? Look at the simplicity and lack of crap!
I’ll write the same with ViewModel:
Template.click-count.viewmodel({
count: 0,
onCreated() {
// This isn't really needed, as we can declare initial state above
// this.count(0);
},
increment(delta) {
this.count(this.count() + delta);
}
});
<template name="click-count">
<div class="click-count">
<div {{b "class: { positive: count > 0, negative: count < 0 }"}} class="count">
{{count}}
</div>
<button {{b "click: increment(-1)"}}>
-1
</button>
<button {{b "click: increment(1)"}}>
+1
</button>
</div>
</template>
Of course this is not a full similarity check, but even after reading all the docs of MarkoJS… to me it seems like building a transpiler to close the gap isn’t impossible. I think @manuel has actually experimented with some VM code transpilers in the past, maybe you have a better guess?
What about creating a BlazingFastViewModeledMarkos
-package with a modified fork of MarkoJS to enable 1:1 syntax compatibility…
Or, maybe @manuel is already building viewmodel-markojs
package that has maybe 20 lines of code for full compatibility My instinct says it should be way easier than with React!
At least for Vue and React there are already some compatibility packages for Tracker
. Maybe there could be an effort to make that universal and easily applied to any frontend framework.
If none of these work, I guess I could just write some regexes and spend a weekend hammering the keyboard if integrations are otherwise doable.
Anyway, these are just some ideas I got (Also I’m pretty high on pain killers after an accident last friday)
Please shoot them down!
p.s. I absolutely did not test that my code actually works, but it should be close…
p.p.s Should MarkoJS become the next React in near future, imagine if MDG provided an easy upgrade path / escape hatch for all those Meteor users stuck with Blaze…?