intertwingly

Whimsy had four applications which made use of React.js; two of which previously were written using Angular.js.  One of these applications has already been converted to Vue, conversion of a second one is in progress.

The reason for the conversion was the decision by Facebook not to change their license.

Selection of Vue was based on two criteria: community size and the ability to support a React-like development model.  As a bonus, Vue supports an Angular-like development model too, is smaller in download size than either, and has a few additional features.  It is also fast, though I haven’t done any formal measurements.

Note that the API is different than React.js’s, in particular lifecycle methods and event names.  Oh, and the parameters to createElement are completely different.  Much of my conversion was made easier by the fact that I was already using a ruby2js filter, so all I needed to do was to write a new filter.

Things I like a lot:

• Setters actually change the values synchronously.  This has been a source of subtle bugs and surprises when implementing a React.js application.
• Framework can be used without preprocessors.  This is mostly true for React, but React.createClass is now deprecated.

Things I find valuable:

• Mixins.  And probably in the near future extends.  These make components true building blocks, not mere means of encapsulation.
• Computed values.  Better than Angular’s watchers, and easier than React’s componentWillReceiveProps.
• Events.  I haven’t made much use of these yet, but this looks promising.

Things I dislike (but can work around):

• Warnings are issued if property and data values are named the same.  I can understand why this was done; but I can access properties and data separately, and I’m migrating a codebase which often uses properties to define the initial values for instance data. It would be fine if there were a way to silence this one warning, but the only option available is to silence all warnings.
• If I have a logic error in my application (it happens :-)), the stack traceback on Chrome doesn’t show my application.  On firefox, it does, but it is formatted oddly, and doesn’t make use of source maps so I can’t directly navigate to either the original source or the downloaded code.
• Mounting an element replaces the entire element instead of just its children.  In my case, I’m doing server side rendering followed by client side updates.  Replacing the element means that the client can’t find the mount point.  My workaround is to add the enclosing element to the render.
• Rendering on both the server and client can create a timing problem for forms.  At times, there can be just enough of a delay where the user can check a box or start to input data only to have Vue on the client wipe out the input.  I’m not sure why this wasn’t a problem with React.js, but for now I’m rendering the input fields as disabled until mounted on the client.

Things I’m not using:

• templates, directives, and filters.  Mostly because I’m migrating from React instead of Angular.  But also because I like components better than those three.

On balance, so far I like Vue best of the three (even ignoring licensing issues), and am optimistic that Vue will continue to improve.