Vue: I see you
JavaScript has finally gotten the framework we’ve been waiting for.
For more than 10 years i have been quite a hardcore rails man. Almost avoiding JS, sometimes sprinkling it in. It was mostly the immaturity (with resulting complexity) of available frameworks that has made me keep it at arms length.
Now this has changed: Vue has finally changed my mind on the feasibility of client side apps. This is mainly due to the fact that it lets the programmer be productive, just like rails. Also they make a great pair, but more on that in another post.
Example: Responsive reports
But let’s jump right in with an example. Back in 2009 i did a reports engine for spree, which has stayed with me and improved, even when i wrote my own e-commerce. Below you can see a short video of it. Don’t worry about what it does, just look at the responsiveness.
As you see, it reacts pretty much instantly. It only takes a sec when you change the date range, otherwise everything happens immediately. You can filter by category and supplier, group by category supplier and other things. Quick buttons let you change the date range, and this is the only time when the server is contacted for data, everything else happens on the client.
As i said, this code existed on the server, working in much the same way. Any action just took 1–2 seconds, where now it’s pretty much instantaneous. The strange thing is that it is not only roughly the same amount of code that is now on the client, but more or less the same code. But more on that later.
Example: Sort and filter tables
Ok, because that was so much fun, let’s do another one. We need to create purchase orders, which means going though a list of products, creating a list and changing their amount. Ie two tables, one with chosen products where we want to change the quantities and keep track of the orders total. The other one with a longer list of products, from a set supplier, that we choose from. Those products have all kinds of information attached to them that helps us in the process, ie we want to sort and filter. Here is a short video again:
This is a one page app, where we have different information on different tabs. We use the product tab to add products to the basket, where we can then fine tune amounts and save. The order tab just provides background ordering info. We will see how to do the tabs with just a few lines off code later too.
But the star of this show is the sort-able table that let’s you also filter on specified columns. It is a Vue component, and the crazy thing is it is less than 50 lines of code. On top of that it is easy to use, configure and adapt by the user of the component. Let me repeat that: 50 lines of code!!
The series ahead
These examples serve as an appetizer. Now that we are motivated by what this Vue can do, hopefully you will want to learn. Luckily this is not so hard, the hard work has been done by Evan You and his team.
Vue has a surprisingly low entry bar. As you basically have to know html, css and coding, you are already most of the way there. The JavaScript you need to know to get going is really quite minimal, as Vue is mostly a declarative system. You describe what you want to happen and it figures out dependencies and how to make it happen on it’s own. In other words it is reactive, just like react :-). But this a rather diminutive way of saying it, a bit like saying the world is round. It doesn’t seem to change much, but in fact it changes everything. I actually think we may be seeing a new paradigm of programming emerge, finally the 5th level of languages.
The next step will be to integrate Vue into an existing rails app. Vue is great in that you can start small with it and that is what we’ll do. This will include getting data from the rails side into Vue and using the great filter system that is available in rails. This will get us to understand small Vue apps.
Then i will do a post about the table, and how we can start making an app more and more complex. This will end by extracting existing code into a Vue component and reusing it.
The last planned part of this Vue intro will be how to use an external component and get those charts drawn. This will not only show more advanced Vue code (ie asynchronous requests), but also we will have to dive a bit deeper into the rails side of things.
So if you want to see the upcoming details, subscribe. And if there are interesting suggestions, write them in the comments, i might just go that way. It certainly is fun.
