Vue.js for Laravel Developers (Improving slow actions) — Sortable List

Continuing the adventure of showing the benefits and impact Vue (javascript) can easly bring to an application on the UX level, we will be building a sortable list.

We will start with just a complete server side solution, using a file to store our list items and some arrows to order them how we please.

This is our routes file:

web.php

And this is our controller:

ListsController.php

Looking at this full backend solution we can see that the routes don’t follow the REST way and the controller is not that clean.

(Of course we could have a dedicated List class that would take care of that logic in an OOP way but for the sake of the example its easier this way.)

This is the end result:

In this case it is really fast, but having to wait between requests to push an item to the bottom isn’t the best experience.

What about having the list sorted without having to refresh the page and with a drag and drop feature? That’s exactly what we are going to do.

In order for that to work we need to add an api endpoint and it’s respective controller.

This is our routes file:

api.php

And this is our controller:

API\ListsController.php

So now the route follows the REST convention and our controller is a lot cleaner since we get the list array from the Vue component.

This is the end result:

Conclusion

Not only did we improve how easy it is to order the list items, our code became much more cleaner since we let our Vue component deal with the ordering logic and only updating the data to our server.

Usability answers the question, “Can the user accomplish their goal? — Joyce Lee, Human Factors Design at Apple

Let’s look at them side by side so that you can be the one to judge what’s best.

Server side version (left) — Vue.js version (right)

P.S.: All code is available at this Github Repo.

P.S.S.: Although we could achieve the same thing with vanilla js it wouldn’t be as simple as it is with Vue (or other framework).

Let me know what you think and if you would like a more in depth article/video on how to achieve this or if you think I should post more examples where Vue can improve server side pages.

Thank you for reading!