The comments from Deliverable 4 on domain model and sequence diagrams must be addressed.
For any comment that was not addressed, deduct -2 points at minimum, or up to the amount of points originally deducted.
This will be based off your domain model, sequence diagrams, and architecture design. The new things you will make: 1) a design class diagram (DCD) which must include types and attributes and methods of all classes, and all functions, and 2) apply at least one design pattern in your class design/diagram.
Here is a template, which also links to an example for how to represent React components (which we have mostly implemented as functional components) (see on left next to comment: Example "Class" Diagram with React functional components represented as "ViewControllers).
Note that this is not technically a UML class diagram, instead it’s a similar representation I invented for this class. Here are links to more complicated ways of using UML to model web applications (which has grown into a book). In general, there is no “right” way to model, the purpose of these diagrams is to help you collaborate and represent what’s important about your application components and how they interact.
Here are reasonable examples for how to represent your domain objects/classes (e.g. Student, Card, StudySession, Friend, User) from past years. Some of these have views and controllers on them, those are not good examples for representing React components:
Limitations: functions with same names but in different namespaces won’t be visualized because the tool can’t tell the difference between them (because it is a static analysis tool and doesn’t actually run the code)
Review relevant class sessions and slides before doing this. Feel free to search online for class diagrams and domain models for similar domains as yours for inspiration, just cite them in your final detailed technical design.
(20 points) Design document includes design class diagram (DCD) with types and attributes/functions of all classes and files, and link to commentable (and preferably editable e.g. with Miro or other tool) version of the diagram
The DCD needs to represent the team’s app. If it doesn’t match the project’s current source code or doesn’t show how the design patterns will be used, -5 points each.
The DCD should show classes with their attributes, associations, and methods, and types, and functions and parameters, that fit your team’s app i.e. user stories, use cases. The DCD should match with the design sequence diagrams (names, types, etc) and domain model.
For every mistake or mismatch, deduct -2 points.
As an example for “matching”/corresponding to domain model for domain objects (not React components), see
This penalty will be reduced to -1.5 each by specifying a facade or a “todo” with an example function/method signature for the API, which is then shown to be used by your app’s components
Put your use of external libraries onto your diagram as in this example ( firebase and firebase-react-hooks are examples)
For each poor/overcomplicated design choice, -1 to -4 points depending on size and severity
“Helper functions” (if your design has them) should be put into a filename box (similar to a class) as in the example single helper functions “class” and list the method name, parameters and types, and return type, as in this example
-2 points for each that is represented as a class method or class variable when it is actually just a function exported from a file
Put your React functional-style components onto the diagram as “ViewController” as in this example
-1 points for each deviation from that format e.g. for each variable, function, type, etc
(10 points) Design document will include at least one example of applying a design pattern
(3 points)
1-2 paragraphs on how you used at least one design pattern in your design and explain/justify your design decision there
If the design patterns do not have a reasonable justification or the justification is not specific/matches the team’s application under the development, -3 points
(7 points)
Have a sub-diagram/excerpt of your DCD showing the design pattern
Design pattern excerpt should be an excerpt i.e. consistent with the project’s DCD (same names, types, etc); if not -5 points
Design pattern excerpt should show classes with their attributes, associations, methods, and types, and/or functions with parameters and types that would be representative of the system under development.
For any classes, attributes, association and methods that are missing or wrong, -2 points.
Remember from class that you can implement design patterns in a functional style also e.g. Strategy pattern via assigning a function to a variable
Next to that, insert the diagram that defines that design pattern from the lecture slides or from this website (example), and double check it’s actually following the pattern!
Detailed Technical Design ( /30)
The comments from Deliverable 4 on domain model and sequence diagrams must be addressed.
For any comment that was not addressed, deduct -2 points at minimum, or up to the amount of points originally deducted.
This will be based off your domain model, sequence diagrams, and architecture design. The new things you will make: 1) a design class diagram (DCD) which must include types and attributes and methods of all classes, and all functions, and 2) apply at least one design pattern in your class design/diagram.
Here is a template, which also links to an example for how to represent React components (which we have mostly implemented as functional components) (see on left next to comment: Example "Class" Diagram with React functional components represented as "ViewControllers).
Note that this is not technically a UML class diagram, instead it’s a similar representation I invented for this class. Here are links to more complicated ways of using UML to model web applications (which has grown into a book). In general, there is no “right” way to model, the purpose of these diagrams is to help you collaborate and represent what’s important about your application components and how they interact.
Here are reasonable examples for how to represent your domain objects/classes (e.g. Student, Card, StudySession, Friend, User) from past years. Some of these have views and controllers on them, those are not good examples for representing React components:
Example 1
Design class diagram in two parts at end and design patterns
(domain model that the above design class diagram was based on)
Example 2
Class diagram without relationships is the first five pages of this
Class diagram slices (to make more manageable/understandable)
You can practice your skills for the detailed technical design by doing this short exercise and then compare against this solution.
Here are some tools for generating diagrams of your application. You may find them useful.
Whole application: https://github.com/bakunin95/wavi
Works reasonably well
View focused: https://github.com/React-Sight/React-Sight
Only install this as click-to-run or inside its own chrome profile, so that it doesn't slow down regular browsing
Whole application: https://github.com/scottrogowski/code2flow
Limitations: functions with same names but in different namespaces won’t be visualized because the tool can’t tell the difference between them (because it is a static analysis tool and doesn’t actually run the code)
Whole application: AppMap
Review relevant class sessions and slides before doing this. Feel free to search online for class diagrams and domain models for similar domains as yours for inspiration, just cite them in your final detailed technical design.
(20 points) Design document includes design class diagram (DCD) with types and attributes/functions of all classes and files, and link to commentable (and preferably editable e.g. with Miro or other tool) version of the diagram
The DCD needs to represent the team’s app. If it doesn’t match the project’s current source code or doesn’t show how the design patterns will be used, -5 points each.
The DCD should show classes with their attributes, associations, and methods, and types, and functions and parameters, that fit your team’s app i.e. user stories, use cases. The DCD should match with the design sequence diagrams (names, types, etc) and domain model.
For every mistake or mismatch, deduct -2 points.
As an example for “matching”/corresponding to domain model for domain objects (not React components), see
Example 1
Design class diagram in two parts at end and design patterns
(domain model that the above design class diagram was based on)
Example 2 Team F: https://docs.google.com/document/d/1vHfu3MTiSRdSGs4KF2A1R8_xLmTPEpW88b3cRG4BUyk/edit#heading=h.685i9lu2xddv Team C: https://docs.google.com/document/d/1Fvw4SuoOcTNha90WqZR9kFlpkDdMZ1oi/edit For every missing key external dependency required to implement all the user stories your team intends to finish by Deliverable 6, i.e. APIs you will use, -3 points
This penalty will be reduced to -1.5 each by specifying a facade or a “todo” with an example function/method signature for the API, which is then shown to be used by your app’s components
Put your use of external libraries onto your diagram as in this example ( firebase and firebase-react-hooks are examples)
For each poor/overcomplicated design choice, -1 to -4 points depending on size and severity
“Helper functions” (if your design has them) should be put into a filename box (similar to a class) as in the example single helper functions “class” and list the method name, parameters and types, and return type, as in this example
-2 points for each that is represented as a class method or class variable when it is actually just a function exported from a file
Put your React functional-style components onto the diagram as “ViewController” as in this example
-1 points for each deviation from that format e.g. for each variable, function, type, etc
(10 points) Design document will include at least one example of applying a design pattern
(3 points)
1-2 paragraphs on how you used at least one design pattern in your design and explain/justify your design decision there
If the design patterns do not have a reasonable justification or the justification is not specific/matches the team’s application under the development, -3 points
(7 points)
Have a sub-diagram/excerpt of your DCD showing the design pattern
Design pattern excerpt should be an excerpt i.e. consistent with the project’s DCD (same names, types, etc); if not -5 points
Design pattern excerpt should show classes with their attributes, associations, methods, and types, and/or functions with parameters and types that would be representative of the system under development.
For any classes, attributes, association and methods that are missing or wrong, -2 points.
Remember from class that you can implement design patterns in a functional style also e.g. Strategy pattern via assigning a function to a variable
Next to that, insert the diagram that defines that design pattern from the lecture slides or from this website (example), and double check it’s actually following the pattern!
If missing, -7 points