Joe Erickson

One of the best ways to improve the user experience in a dynamic application is by setting up loading icons for data coming into your Vuex store. But if you’ve ever tried to set this up on a page with a lot of components that are loading different dynamic data. How do you show the user that data is being loaded when that data might be coming from different, parallel API calls?

Recently, I was wanting to try out some of the functions in Lodash to see how they worked. I went to Repl.it at first because that’s been my go-to sandbox to play around in. But Repl.it, as nice as it is, is a little too big for a quick script to play around in.

Have you ever been working on your JavaScript code and changing the value of an object you were sure that you made a safe copy of only to have the original object change too?

There are times when you want to use Vue components, but the application you’re working on is still in the age of jQuery. Is there a way to start using Vue without switching everything to Vue and making a single page application? Can we get all of that beautiful, juicy component action without breaking everything else that’s currently on the site? Also, can we add Vue components without having to rewrite the entire website to use Vue?

One of the main pieces of advice that people give in learning programming is that you should pick a language and learn it. Just pick the language that you think you’ll most want to do, get a couple of classes or tutorials on it, and learn programming!

Have you ever worked on a coding problem and have to constantly stop to look up syntax? You’re almost at the solution to a problem and you know exactly what you need to do, you just don’t know exactly how to do it?

All in all, the Vue lifecycle methods are fairly straight forward. There’s even a helpful Vue lifecycle chart that describes when the various methods are called. All of that is super helpful.

UPDATE: I have a better way of handling this here. I would recommend that post if you’re looking to handle the status of your data loads from now on. I hate ambiguous lag. Is this site still loading or did it freeze? Am I waiting for something or is this it? Whenever a website has to load in information from an API, there is a chance that loading will appear painfully slow to the user. Human beings perceive an empty screen much differently than they perceive an animation on the screen.1 In order to make our website seem faster than it is, it’s always good to throw in a loading animation every time that we have to access a potentially slow resource like an API call.

I talked before about how to query your back-end API from Vuex, but that was mainly centered on getting data. What happens when you want to save data to a back-end API after it is updated or added in the Vuex store? What’s the best, most efficient way to accomplish this?

There are a lot of things to worry about when it comes to Vue applications. You’ve got SPAs and routing and web workers and Jest and Cypress and everything else. It gets overwhelming pretty quickly. The hard part is not learning these technologies, it’s knowing what their place is in the application.