As front-end developers, it is high time for us to think about the architecture of our projects and raise quality standards during development. This video brings up an important topic. If the architecture described in this video doesn't quite suit you, here's a tip. Architectures are based on two groups of principles: coupling and cohesion. I would describe the last group as follows: combine what "uses each other", "is used simultaneously" and "changes for the same reason". Based on these principles, you can change the architecture to suit yourself. Start by creating a directory when creating a new page and put into it all the files that appear during the development of this page: vue components, stores, composables, etc. If any of this will be used on other pages, put it in the project root directories (by type). Over time, you will find a directory structure that you like. The main thing is to follow these 3 principles and then you will get all the advantages of a "modular architecture" (which is actually just an architecture)
Haha, have to point out that this is what Angular has been promoting since Day 1, which I am a huge fan of. Glad to see it in a Vue form. I am actually in the middle of a similar refactoring and this tutorial helps. Thanks for sharing.
Due to several people pointing out, I just wanted to make clear that the video is not full on about architecting/writing the actual code, but rather showing how to implement a modular/feature based folder structure with opinionated way of wiring up things. Important to note here, that it's not an absolute one way to go, you can come up with your own implementation of a modular folder structure.
Really nice architecture! I like to use scoped slots to further decouple the gathering of the data (store) from the presentation of that data. Webpack knowledge is definitely a must so that js exports load properly. This is an excellent video Sanjar. Thank you!
I have worked with Angular and React... But I can tell you that Vue with this modular architecture looks amazing!! Thank you Sanjar Mirakhmedov for sharing good content!!👌
our ticket application startet as a small project but it grew over time... we should used such modular arch way earlier, if not from beginning. Apps can grow from small to medium or large code bases really fast, it just needs new ideas or requests for your customers...
@@sanjarmirakhmedov8311 Can you please make a small video/playlist of a very basic project like a todo list or a stopwatch and explain the whole modular architecture of Vue using the project?
i keep getting the error "router.addRoutes is not a function" inside the router.js of my module... i am using "vue": "^3.3.4", "vue-router": "^4.2.4" any idea why this function does not work / exist ?
Great video, i've refactorred my codebase using this approach. Looks promising. One thing i couldn't solve is using keep-alive with nested router-views, so i just implemented all the stuff you've talked in the video but without using the Module.vue component and nested sub-routes. In addition, it looks a bit different with vue 3 and vue-router 4, but the general idea is the same:) Do you think it's fine to drop Module.vue and nested router-view?
Sure thing, you can come up with your very own structure within the modules, the video explains only the very abstract/core concepts of splitting your app into several independent modules
it is simple, don't use VSCode and create a core module registering de i18n config. Stop searching for all the answers and start thinking about your context
Ok but what happens if we need to have navigation ? And we don't want to rerender the navigation bar every time in new module since its loosing its animation states ?
If you want to persist the navigation across all modules, then you define it in the Root component as it's shown in the video, so that the only thing re-renders is the .
Круто! Давай еще! Можно даже на русском запилить такое же видео - на русском очень мало инфы об архитектуре вью да и вообще что то сложнее туду личта по вью
Its good when you separate out files when its been used multiple times but for smaller app its not needed you can just define your logic in one file and its fine. Separate out things (logic) when needed
Does this really work in large scale projects? I have a project that has more than 100 pages and around 60 components. If I use this method I'll have to have more than 300+ files and folders.
Yes, it is specifically good for large projects, the increase in folders/file size is a benefit rather than downside, it’s easier to manage folder for a feature, than one gigantic folder for all features.
Not really, this is just a way to organize your frontend code so that its more manageable and scalable, its more of a folder/file architecture with some minor additional stuff. MVC is a bit different topic, related to code logic organization.
Of course, if you are building a very simple application with few pages and components, then it would probably be an overkill, but if your app already features few modules, then its really beneficial even if the team is small. Mentally it's easier to focus on one feature at a time, and have everything under your hand nicely in one folder.
As front-end developers, it is high time for us to think about the architecture of our projects and raise quality standards during development. This video brings up an important topic. If the architecture described in this video doesn't quite suit you, here's a tip. Architectures are based on two groups of principles: coupling and cohesion. I would describe the last group as follows: combine what "uses each other", "is used simultaneously" and "changes for the same reason". Based on these principles, you can change the architecture to suit yourself. Start by creating a directory when creating a new page and put into it all the files that appear during the development of this page: vue components, stores, composables, etc. If any of this will be used on other pages, put it in the project root directories (by type). Over time, you will find a directory structure that you like. The main thing is to follow these 3 principles and then you will get all the advantages of a "modular architecture" (which is actually just an architecture)
Haha, have to point out that this is what Angular has been promoting since Day 1, which I am a huge fan of. Glad to see it in a Vue form. I am actually in the middle of a similar refactoring and this tutorial helps. Thanks for sharing.
Due to several people pointing out, I just wanted to make clear that the video is not full on about architecting/writing the actual code, but rather showing how to implement a modular/feature based folder structure with opinionated way of wiring up things. Important to note here, that it's not an absolute one way to go, you can come up with your own implementation of a modular folder structure.
Really nice architecture! I like to use scoped slots to further decouple the gathering of the data (store) from the presentation of that data. Webpack knowledge is definitely a must so that js exports load properly. This is an excellent video Sanjar. Thank you!
I have worked with Angular and React... But I can tell you that Vue with this modular architecture looks amazing!!
Thank you Sanjar Mirakhmedov for sharing good content!!👌
Glad you have enjoyed the video, by the way same architecture can be applied to React and Angular as well, the principles stay the same=)
Забавно, я думал об этом вчера даже нигде не слышав. И тут твой видос. Значит такой паттерн существует)
Can you do this tutorial for Vue 3?
I recommend using shared folder as well coz sometimes u need to acces data between features and that's i think can become nasty
can someone help me do this with nuxt? it's more closed in terms of changing folder structure
our ticket application startet as a small project but it grew over time... we should used such modular arch way earlier, if not from beginning. Apps can grow from small to medium or large code bases really fast, it just needs new ideas or requests for your customers...
You earned a like bro. Really appreciate your video. Thanks a lot
Thank you very much, I am glad that you’ve enjoyed the video ;)
@@sanjarmirakhmedov8311 Can you please make a small video/playlist of a very basic project like a todo list or a stopwatch and explain the whole modular architecture of Vue using the project?
i keep getting the error "router.addRoutes is not a function" inside the router.js of my module...
i am using
"vue": "^3.3.4",
"vue-router": "^4.2.4"
any idea why this function does not work / exist ?
Great video, i've refactorred my codebase using this approach. Looks promising. One thing i couldn't solve is using keep-alive with nested router-views, so i just implemented all the stuff you've talked in the video but without using the Module.vue component and nested sub-routes. In addition, it looks a bit different with vue 3 and vue-router 4, but the general idea is the same:) Do you think it's fine to drop Module.vue and nested router-view?
did you solved it? I have the same issue
There is a way to implement it with Nuxt?
Very nice. Thanks!
Nicee Architecture to implement
really similar like composer project, great tutorial.
thanks sir, very very useful, im from indonesia
Glad you enjoyed the video!
There is also patterns like atomic wich i like to use c:
does it make sense to also create a "components" folder inside a module to store components only used within that module views
Sure thing, you can come up with your very own structure within the modules, the video explains only the very abstract/core concepts of splitting your app into several independent modules
It looks interesting and maybe worth trying.
But how does this work with e.g. i18n and some VSCode extensions 🤔
it is simple, don't use VSCode and create a core module registering de i18n config. Stop searching for all the answers and start thinking about your context
Ok but what happens if we need to have navigation ? And we don't want to rerender the navigation bar every time in new module since its loosing its animation states ?
If you want to persist the navigation across all modules, then you define it in the Root component as it's shown in the video, so that the only thing re-renders is the .
Круто! Давай еще! Можно даже на русском запилить такое же видео - на русском очень мало инфы об архитектуре вью да и вообще что то сложнее туду личта по вью
Большое спасибо, рад что тебе понравилось! Может быть в будущем будут видео на русском ;)
Its good when you separate out files when its been used multiple times but for smaller app its not needed you can just define your logic in one file and its fine.
Separate out things (logic) when needed
Does this have any performance advantages or is it purely organizational?
It's purely organization, because you basically handle only the way you split up the files and folders, but not how they run.
very good video Sanjar.
Does this really work in large scale projects?
I have a project that has more than 100 pages and around 60 components.
If I use this method I'll have to have more than 300+ files and folders.
Yes, it is specifically good for large projects, the increase in folders/file size is a benefit rather than downside, it’s easier to manage folder for a feature, than one gigantic folder for all features.
Thanks for this content bro I appreciate it. by the way, I subscribe to your channel.
is dis counted as mvc architecture??
Not really, this is just a way to organize your frontend code so that its more manageable and scalable, its more of a folder/file architecture with some minor additional stuff.
MVC is a bit different topic, related to code logic organization.
Has benefits if you have a large team and a large project. Otherwise won't make a real difference
Of course, if you are building a very simple application with few pages and components, then it would probably be an overkill, but if your app already features few modules, then its really beneficial even if the team is small. Mentally it's easier to focus on one feature at a time, and have everything under your hand nicely in one folder.
This video is so good
Thank you bro
thanks you!
Тег вью 3, хотя используется вью 2😢
cool!
wow man
This is ridiculous. This structure is out of the box in Vue. This is NOT a architecture, design patterns are as mentioned.
#amflearningbydoing #amflearning nice content