Vue.js Modular Architecture

folder by type is the most common architecture in vue projects it is easy straightforward and comes by default with every view app created using vue cli with this type of architecture you separate your files by types for instance you store your components store routes utils and etc in their corresponding folders this is actually a decent architecture for small projects but as your app grows you quickly notice that it becomes harder to navigate especially when you are focused on working on a specific feature let's say you have three features in your app which are the card products and user and currently you are working on products so you have to jump between several folders that we talked earlier and find the files that correspond to that feature this becomes really unmanageable when your project gets more and more features added and you will end up with bloated components routes and store folders so is there a better architecture and the answer is yes in this scenarios we can make use of folder by feature or in other words the modular architecture where you put all of your files related to a specific feature into its own folder with this kind of architecture it is going to be very easy to work on separate features in isolation because you know that in this folder you will have files that are related to that feature only you can notice that this architecture actually copies the root source directory structure but it holds only the feature related files inside each module folder you have all the freedom to create any structure that you want as long as you expose common module interface for registering its vux store module and routes now what do i mean by a common module interface is that the index.js of your module folders should export a similar object like this for example where you export store and router if there is one which then are going to be registered in your main.js on your global store and router not all modules need to have both the routes and store at the same time it's totally optional you might have a module which exposes just a store in a component that makes use of that store that is actually fine in theory this is all to it about modular architecture now let me show you an example view project that i have set up behind the scenes using this architecture now let's first take a look at the example project which is a very simple online store web app that has two main features in this case which are the products and the cart the products is a basic page where we list our products we can view each item in detail by clicking on the view button which takes us to product id page we can also add and remove items from the cart the cart itself has its own page where we can view all items that are added as well as remove them finally here we are in the project source code it's a basic view cli project that is set up with view router and view x here what is interesting for us is the modules folder where we basically store all the modules you can call this folder however you want it doesn't matter inside the folder as you can see we have two folders that correspond to the features we saw in the example we're gonna take a look at products module first we have four items here first is the views folder which holds all the pages related to this module next up we have the index.js that will export our module using the common format that we saw in the introduction then we have the module.viewcomponent which is going to be the entry route component through which all other pages will go we will take a closer look at that in a moment and lastly we have the router.js file which contains the route definitions for our module index.js is a simple file which in this case imports the router and right away exports it inside an object so this is basically our format we have an object that should be exported by default that will contain the router store or both if available let's check out how the router file looks like if we go from top to bottom first we are importing the module component as well as two pages that this module has then further down we are creating a single route definition that is going to be the entry route to our products module so we are saying whenever user enters the products route we want to show the module component and this component is going to be responsible for rendering all the child routes under slash products now under children we have two routes which are the slash that is same as slash products in this case and the id which is the product view page that will correspond to slash product slash id in the url now how these routes are going to be registered on the main view router instance at the bottom we are exporting a default function that we will be calling upon registering our module it takes a view router as a parameter then inside we are making use of view routers and routes method that as the name suggests adds new route entries in this case we are only passing our module route which takes care of everything what is neat here is that we can use any view router api inside this function knowing the fact that we are getting a full router instance as a parameter now what about this module.view component that we are rendering in the first place before any other routes this component basically renders a nested router view so all of the subroute components will be rendered here and now you might be thinking why we need this dump wrapper out with nested children if we can declare two independent routes like this then we won't even need the module wrapper component with the nested router view we do that because we might want to do some kind of bootstrapping here for example do an api call using vuex store action whose resulting data might be reused across the modules pages and components and even nicer you can conditionally render this in a router view and show it only when for example your data is fully fetched else you can show some loading ui also this is helpful in the router part as well because you might want to set up a navigation guard that you want to fire every time the user enters this route or the subroute else would have to duplicate the navigation guard for each route the views folder holds all the page components that we were importing in the router and i won't be going over their implementation it's out of scope of this video but later we will return to these components when we will be looking at the cart module because these components are making use of it when adding and removing items from the cart let's continue with the cart module i won't be going over this module in depth because this structure is exactly the same and you can examine the project anyways because i will be linking the source code under the lecture so you can download it and check out how it's actually implemented the only difference here is that we have a store associated with this module it is used to hold all the items in our cart so inside index.js now we are exporting module with both store and the router nothing fancy here in the router we have a single entry which is the home page of the cart module which lists all the items in the cart the module component is exactly the same as in the products and the store itself is a very basic view x module and it should be namespaced because we want our module to be encapsulated and accessed through that namespace explicitly and the rest of the files are logic related to vux only nothing special here you can have any structure you like going back to the home page of the products for a second where we render the product cards here we have two buttons that add and remove item from the cart and in order to access the cart's view x module we basically make use of the namespace access that is available in view x by default nothing new here and the same thing here we access the cart items through the cart namespace so now with these modules in place how are we going to register them in our view application for that we have a simple utility called register modules what it basically does is register the store and router of a module on the global view router and view x that is why here we import them in the first place now the first private function we have here is the register module which accepts a name and a module which in our case is a format that we are exporting from the index.js of our modules so inside we are first checking if we have a store associated with our module and if there is one we register it with ux stores method called register module passing in the name of the module and then the module.store then we check for a router and if there is one we call it as a function with the global router passed in as a parameter knowing the fact that the router of a module in our case is a simple function further down we are exporting one function that is register modules which accepts an object with our modules in this case the key is going to be the name and the value is our module object then what we do inside is first get the keys from the modules using the object.keys method and right away we are iterating over that array getting the module key and inside the body of that function we first get the actual module from the modules object using the key that we've got here and then call the register module function that we have declared above passing down the module key as the name and the module itself then in our main.js which is the entry point to our application we import our modules which are the cart and products as well as our register modules utility function and calling it passing down the object that i described earlier so the modular architecture is amazing and does really well when it comes to larger application where multiple developers might be involved it gives a clear isolation and each team can work on their module independently for example and note that this implementation is not one and only bulletproof solution to module architecture there are different ways of approaching the same thing but my job in this video was to explain the core concepts and benefits of using such an architecture

Channel: Sanzhar Mirakhmedov

Views: 7,097

Keywords: vue, vue3, vuejs, vuetify, javascript, modular architecture, js

Id: iuyzO2QkY7A

Length: 11min 47sec (707 seconds)

Published: Fri Mar 19 2021