VueJS
It's becoming more and more critical in recent months that I get up to speed with a decent JavaScript framework that supports Single Page Applications. I've built a few simple SPA's before one without a framework, and the others using Backbone. Backbone is getting a bit dated now, and I need to build an SPA that is considerably more complicated than those I've made before.
After a lot of looking around I've settled on the Vue2 framework which is similar to React but has a simpler learning curve (it's practically as simple as jQuery to get started with by just including the script and writing code, or the next step, building with the simple template) while also scaling very well - in fact in virtually all tests it's shown to be faster and more scalable than React. Another popular option is AngularJS which shares a lot of similarities with Vue - both React and Angular have served as strong inspiration for the development of Vue. As is the case for React, Angular has a steep learning curve which is one of the main reasons for me to prefer Vue - I like the idea of an efficient minimalist system that is very easy to get started with and yet also very scalable. Angular is also very "opinionated" which means that it dictates a lot about the way you should structure you're application. Vue is much more flexible, but also offers the Webpack template if you want an entire tool-chain and structure predefined for you. Angular2 is much more efficient, but Vue still beats it, and in terms of size, Vue's 23KB is hard to beat (actually it is beatable though - RiotJS is only 10KB, but I feel that the massive efficiency gains of Vue are worth the extra few KB).
Notes
- It may be good to use Weex templates for cross-platform native rendering
- "Vue has a clearer separation between directives and components. Directives are meant to encapsulate DOM manipulations only, while components are self-contained units that have their own view and data logic. In Angular, there’s a lot of confusion between the two."
Router specific notes
One thing I found very difficult to figure out as a Vue noob was how to have router components containing live data such as watchers that respond to changes in the global state. The reason this was difficult to set up is that the component referred to in the router needs to be a proper component (Vue instance) not just an object containing a template instance. This means they're defined with Vue.extend, but that only returns a prototype that needs to be instantiated within the context of a DOM element in the page. To keep the code for each component in one place, we need to have a way of deferring the instantiation until after the routes have all been created so that the elements all exist. This can be done using the router.onReady method, but that comes with its own complication: we need the router instance to exist before the router component prototypes are defined so they can use the router.onReady method. This can be done by creating the router instance before the route components without any routes, and then adding the routes after the component prototypes are created.
See also
- Awesome Vue - big list of examples and tutorials
- VueComponents.com - a lot of nice clear examples
- The Vue router
- Building large-scale apps
