In/Out Board converted from React to Vue (both available for comparison)


#1

My Meteor-based Virtual In/Out Board site has been running happily for a couple of years now. Over the past few months I’ve been converting it to Vue and the Vue version is now on my staging server here: https://s.virtualinout.com/. Edit: The Vue version has since been moved to the production server so the React version is no longer available.

Webpagetest.org results:
React (+jQuery): https://www.webpagetest.org/result/190214_YC_e19ca076a5b2754c270806f6ef920c65/

Vue (+jQuery): https://www.webpagetest.org/result/190214_9S_ee2762c7680312824de6216a756b6b43/

Edit: Vue version on production server with CDN (no jQuery): https://www.webpagetest.org/result/190216_PF_112fd52b5e38c257cf383edc026dd587/

Unfortunately this isn’t quite a direct head-to-head comparison for various reasons:

  • The live (React) site uses a CDN but the staging (Vue) version doesn’t. Edit: Vue version with CDN added above.
  • While converting to Vue I refactored quite a bit of repeated code into components (the site uses Material Design Lite).
  • The React site has a few extra requests not used in the Vue version - I haven’t properly dug into why yet, I think some are to do with google analytics. Edit: The production Vue version with CDN has the same number of requests.
  • I never liked the amount of boilerplate required to make React work, so I only converted the original (Blaze) site to React (to achieve SSR) once I found https://viewmodel.org/. Viewmodel wraps all React code with it’s own syntactic sugar (to make it more like Vue?) so that may add to the size and slowness of the React version.
  • Edit: While converting to Vue I removed all reliance on jQuery, although I left the library in the Vue staging bundle to make the comparison fairer. The Vue produciton bundle doesn’t include jQuery.
  • Note that the initial bundle only includes the sales landing pages - most of the user components and all of the admin pages are lazy-loaded per route (Vue made this WAY easier than React!)

Some results from the comparison:

  • The Vue version wins on most speed and size stats.
  • In particular the ‘First interactive’ is about twice as quick with Vue!?
  • The main app bundle is about 16% smaller gzipped (20% smaller raw). This is partly due to componentization and lack of ViewModel wrapper in the Vue version.
  • Chrome devtools shows about 20% less memory used by the Vue version (47% including garbage/reservered).
  • My total UI source file size (including CSS) is about 28% smaller with Vue (660 kB vs. 922 kB). Some of this is due to componentization.

Other non-tangible results:

  • Developer satisfaction was about 1000% higher with Vue ;-). I never liked React due to the amount of boilerplate it required to do simple things (two-way binding, memoized expensive calculations during render (vs computed properties), for loops and if/else-if inside templates, shouldComponentUpdate, constructor(props) { super(props)... for no real reason, etc.)
  • ViewModel reduced some of the React boilerplate, and once I discovered ViewModel the conversion from Blaze to React was much more enjoyable. But even compared to ViewModel, Vue provides much easier ways of doing things (computed properties are awesome, parent/child communication, event modifiers, lazy loading).
  • React proponents criticise Vue for making you learn new template syntax, but personally I found myself having to refer to React/ViewModel docs much more frequently to remind myself how to do what should be simple things and to find workarounds to improve performance due to lack of computed properties, requirement for shouldComonentUpdate, etc.
  • I found the Vue syntax extremely easy to learn and Vue templates much more readable than jsx.
  • I think the Vue docs are second to none. During the conversion I didn’t once need to come to this forum to ask for help, it was all there in the docs.

I’ve really enjoyed learning Vue, and writing Vue makes me smile :smile:

My sincere thanks to @evan, @Akryum (for vue-meteor) and all the other developers. By way of thanks I’ve joined this forum a couple of weeks ago and have been helping people out where I can.

About me: I am a 40-something hobbyist programmer/web-developer. I’m a PhD qualified Professional Biomedical Engineer living in New Zealand. I’ve been coding since the BBC Micro and ZX81, and although not in any way trained or qualified in programming, I’ve used programming throughout my career to “Make Stuff” (custom finite-element-analysis software, data acquisition software/hardware, microcontrollers, medical devices, databases, etc). In my spare time I tinker with apps & websites and have a few private clients with e-commerce websites.