Vue.js: the good, the meh, and the ugly

We've built our single page application (SPA) web app with vue.js and are very pleased with the results -- https://checkoutclip.com. We were able overcome most of the stumbling blocks by looking up https://vuejs.org/v2/guide/, https://github.com/vuejs/vue/issues and https://forum.vuejs.org.

For server side rendered (SSR) pages, we're using nuxt.js, which is working out great as well. E.g. SSR page: https://video.checkoutclip.com/-LDQ5TtL_yywYCgUNb6K

I would recommend vue.js for anyone building their first SPA even if they don't have prior experience building one...it's easy to pick up.

https://davestewart.github.io/vuex-pathify/

Although at this point in time it is pretty cumbersome to get the entire Vue stack type safe. I think it's getting better but it's far from ideal. You'll need a wide range of libraries to get everything set up. For instance here's the list of libraries I use for bootstrapping projects:

Vue-class-component - Vue-loader - Vue-property-decorator - Vue-template-compiler - Vuex - Vuex-class - Vue-router - Vuex-router-sync.

The ecosystem just keeps getting larger and larger and for a beginner it can seem pretty daunting. I don't complain though - UI's have become a lot more technical and complex the last 10 years - and of course that'll increase the learning curve of learning how to program them.

The reason is that while you may be able to break up your HTML into a composable hierarchy of purely-functional components, the actual data and state you need to distribute to them has a structure that is completely unrelated to how its laid out in the DOM. In a complex web app, a component nested twenty levels deep may need to display pieces of information, like the user's date of birth and the current temperature on Mars, that none of its parent controls cares about.

At that point, you can either bite the bullet and pass state through layer upon layer of props, completely eliminating any semblance of separation of concerns in your component layering, or inject state into your components via some other mechanism, like Redux/MobX/Context. At which point, JSX is basically just another fancy HTML templating library.

"Idiomatic" React is a fun game to play when doing basic examples, using something like a todo manager, but as soon as you're in the real world, you hit its limitations very quickly.