Vuex is an awesome state management library. It’s simple and integrates well with Vue. Why would anyone leave Vuex? The reason could be that the upcoming Vue 3 release exposes the underlying reactivity system and introduces new ways of structuring your application. The new reactivity system is so powerful that it can be used for centralized state management.

Do You Need a Shared State?

There are circumstances when data flow between multiple components becomes so hard that you need centralized state management. These circumstances include:

• Multiple components using the same data.
• Multiple roots with data access.
• Deep nesting of components.

If none of the cases above are true, it’s easy to determine whether you need it or not. …

The release of Vue 3 is just around the corner. We can expect a faster, smaller, more maintainable version with a lot of new exciting features. Mostly these are additions and improvements over the existing API.

Nothing is stopping you from starting your new applications with Vue 3. In this article, I’ll show you how to get ahead of the curve and start experimenting with the new API by upgrading your application. If you are interested in an upgraded application, take a look at my TodoMVC application written with the Composition API or the playground that includes every new feature.

Using the CLI

I highly recommend using the official CLI for Vue projects. …

You have nearly finished your project, and only one feature is left. You implement the last one, but bugs appear in different parts of the system. You fix them, but another one pops up. You start playing a whack-a-mole game, and after multiple turns, you feel messed up. But there is a solution, a life-saver that can make the project shine again: write tests for the future and already existing features. This guarantees that working features stay bug-free.

In this tutorial, I’ll show you how to write unit, integration and end-to-end tests for React applications.

For more test examples, you can take a look at my React TodoMVC or React Hooks TodoMVC implementation. …

Docker is a great tool that helps developers build, deploy, and run applications more efficiently in a standardized way. We can develop in the same environment as the app running in production. You can speed up the debugging or even the prevention of upcoming bugs by having the same setup locally. In the previous post, I’ve written about a simplified way to use Docker for frontend development, and now I’ll show the same for Node.js projects.

The application

As an example, I’ve put together a basic application and tried to keep it as simple as it can be. If you like experimenting on your own, you can clone the repository and start making modifications and see how it does. …

Docker is a great tool that helps developers build, deploy, and run applications more efficiently in a standardized way. For frontend applications, we only need the Docker image for local development, because we deploy it to a static hosting provider. In this case, can we live without a custom Docker image? Can we have the same development experience that we had without Docker? Yes, it is easier than you think.

Requirements

Assume an application where we only have to press start, and everything is running. This setup can be any application generated by the React, Vue, Angular CLI. …

You have nearly finished your project, and only one feature is left. You implement the last one, but bugs appear in different parts of the system. You fix them, but another one pops up. You start playing a whack-a-mole game, and after multiple turns, you feel messed up. But there is a solution, a life-saver that can make the project shine again: write tests for the future and already existing features. This guarantees that working features stay bug-free.

In this tutorial, I’ll show you how to write unit, integration, and end-to-end tests for Vue applications.

For more test examples, you can take a look at my Vue TodoApp implementation. …

Once upon a time, there was a significant upgrade to the Javascript language called ES6/ES2015. It introduced many different new features. One of them was the three consecutive dots that we can write in front of any compatible container (objects, arrays, strings, sets, maps). These tiny little dots enable us to write more elegant and concise code. I’ll explain how the three dots work and show the most common use-cases.

The three consecutive dots have two meanings: the spread operator and the rest operator.

Spread operator

The spread operator allows an iterable to spread or expand individually inside a receiver. The iterable and the receiver can be anything that can be looped over like arrays, objects, sets, maps. …

There are many functions in JavaScript that do their job. We use them daily, but we don’t know about their extra features. One day, we look at the documentation and realize it has many more features then we have imagined.

The same thing has happened with JSON.stringify and me. In this short tutorial, I'll show you what I've learned.

Basics

The JSON.stringify method takes a variable and transforms it into its JSON representation.

The problem comes when there’s an element that can’t serialize to JSON.

The Second Argument

JSON.stringify has a second argument — which is called the replacer argument.

You can pass an array of strings that act as a whitelist for properties of the object to be included. …