July 7, 2021
This article presents the software architecture of a project generated by the default Vue 2 template of the CLI tool. A Unified Modeling Language (UML) Package Diagram will show the relationships between the different directories. A UML Class Diagram will show the relationships of the source files.
The architecture to be analyzed is that created by the default Vue 2 project. This is created using the following command.
$ vue create sample-vuejs-demo
When prompted, select "Default (Vue 2)".
The command generates code, configuration, and build files. The analysis of the architecture begins with looking at the static, structural elements that are realized in the code. With in the src/ directory, there are the following directories.
Within src/, there are the following files
There is a single file in the components/ directory.
The assets/ directory contains index.html which is important to Vue. However, it is typically used as-is, so it is not needed in the analysis.
The file folder shapes are used by UML to represent a Package. "pkg CLI Arch 1" shows the file contents of the Packages (App.vue and main.js within the Default Package shape). The contents are included to give context but typically omitted to avoid complicating the diagram.
The dashed arrow is a UML dependency relationship. It means that the Default Package -- specifically App.vue in the Default Package -- depends on the Components Package (HelloWorld.vue). The importance of a diagram like this is to capture the coupling between the Packages. In this case, one can expect changes to the code in the Default Package to not affect the Components Package.
A UML Class is an element that has attributes and operations. In the Vue framework, a Class can be a Single File Component which has
main.js depends on App.vue and uses the dashed arrow as in the Package Diagram. There is additional information on this particular arc "instantiates". That notes that main.js will create an App.vue.
App.vue has a solid line drawn to HelloWorld.vue. That is an association and the solid diamond marking on the end of App.vue is called Composition. This means that App.vue is composed of HelloWorld.vue. In Vue terms, this means that App.vue imports HelloWorld.vue and lists it in the components property.
If this program were to grow -- and the static Package structure to remain -- top-level screens would accrue in the Default Package. In keeping with DRY (Don't Repeat Yourself), code would be factored out of these top-level screens in Default and be moved into the Components Package. As many files build up in a directory, it becomes awkward to work on the program since there is an undue amount of scrolling needed to find files.
More seriously, coupling increases. This means that as the Default Package grows, any of its files has the potential to affect any other file. Side effects result as the terms of what a file in the Default Package can do are not clear. This design only assures that the Default Package changes will not affect the Components Package.
This article presented a pair of UML diagrams used to analyze the small program generated by the Vue CLI. While it is easy for a user to keep track of the three files and two directories without a diagram, later articles will demonstrate more value in the diagrams to manage more complex programs.
The diagrams in this article were made with Sparx Systems Enterprise Architect.