Vue.js 2 Design Patterns and Best Practices

JavaScript modules

In order to create reusable modular code, our aim should be to have one file per feature in most cases. This allows us to avoid the dreaded "Spaghetti code" anti-pattern, where we have strong coupling and little separation of concerns. Continuing with the pasta-oriented theme, the solution to this is to embrace the "Ravioli code" pattern with smaller, loosely coupled, distributed modules that are easier to work with. What does a JavaScript module look like?

In ECMAScript2015, a module is simply a file that uses the export keyword, and allows other modules to then import that piece of functionality:

// my-module.jsexport default function add(x, y) { return x + y}

We could then import add from another module:

// my-other-module.js ...