9 |
10 |
11 |
18 |
--------------------------------------------------------------------------------
/frontend-vue/.env:
--------------------------------------------------------------------------------
1 | # any backend url can be used
2 | # VITE_CONTEXTURE_API_BASE_URL=http://localhost:5000
3 | # however this will use the reverse proxy (and allows you to use other devices which do not run the backend)
4 | VITE_CONTEXTURE_API_BASE_URL=
5 | # This sets the max nesting level of subdomains to 1.
6 | # This means that any subdomain of a subdomain will not be allowed.
7 | # When its not set the fallback value will be 1
8 | CONTEXTURE_MAX_SUBDOMAINS_NESTING_LEVEL=1
9 | # This sets the path/url to the structurizr (https://structurizr.com/) mappings file
10 | # Its optional and the format of the file should be like this:
11 | #{
12 | # "rootDomainKey": {
13 | # "id": 85806, # this is the id of the workspace
14 | # "key": "db79db2f-bc78-4f26-9910-97943c229113" # this is the key of the workspace
15 | # }
16 | # }
17 | # example value: /src/assets/structurizr.json
18 | VITE_CONTEXTURE_STRUCTURIZR_MAPPINGS_URL=
19 |
--------------------------------------------------------------------------------
/frontend-vue/src/types/event-log.ts:
--------------------------------------------------------------------------------
1 | type EventType =
2 | | "ShortNameAssigned"
3 | | "BoundedContextRenamed"
4 | | "BoundedContextReclassified"
5 | | "BoundedContextCreated"
6 | | "BoundedContextImported"
7 | | "BoundedContextRemoved"
8 | | "BoundedContextMovedToDomain"
9 | | "DescriptionChanged"
10 | | "BusinessDecisionsUpdated"
11 | | "UbiquitousLanguageUpdated"
12 | | "DomainRolesUpdated"
13 | | "MessagesUpdated"
14 | | "DomainImported"
15 | | "DomainCreated"
16 | | "SubDomainCreated"
17 | | "DomainRenamed"
18 | | "CategorizedAsSubdomain"
19 | | "PromotedToDomain"
20 | | "VisionRefined"
21 | | "DomainRemoved"
22 | | "NamespaceImported"
23 | | "NamespaceAdded"
24 | | "NamespaceRemoved"
25 | | "LabelAdded"
26 | | "LabelRemoved"
27 | | "LabelUpdated";
28 |
29 | export interface EventLogEntry {
30 | eventType: EventType;
31 | timestamp: string;
32 | eventData: any;
33 | }
34 |
--------------------------------------------------------------------------------
/frontend-vue/src/components/primitives/list/ContextureListItem.vue:
--------------------------------------------------------------------------------
1 |
2 |
61 |
62 |
63 |
76 |
--------------------------------------------------------------------------------
/frontend-vue/src/components/domains/details/ContextureEditDomainForm.vue:
--------------------------------------------------------------------------------
1 |
2 |
40 |
41 |
42 |
66 |
67 |
68 |
--------------------------------------------------------------------------------
/frontend-vue/src/stores/collaborations.ts:
--------------------------------------------------------------------------------
1 | import { defineStore } from "pinia";
2 | import { Ref } from "vue";
3 | import { onMounted, ref } from "vue";
4 | import { useFetch } from "~/composables/useFetch";
5 | import { Collaboration, CollaborationId, CreateCollaborator, RelationshipType } from "~/types/collaboration";
6 |
7 | export const useCollaborationsStore = defineStore("collaborations", () => {
8 | const collaborations: Ref = ref([]);
9 | const loading = ref(false);
10 | const error = ref();
11 |
12 | async function fetchCollaborations(): Promise {
13 | loading.value = true;
14 | const { data, error } = await useFetch("/api/collaborations").get().json();
15 | loading.value = false;
16 | collaborations.value = data.value || [];
17 | error.value = error;
18 | }
19 |
20 | async function createInboundConnection(collaboration: CreateCollaborator) {
21 | const res = await useFetch("/api/collaborations/inboundConnection").post(collaboration);
22 |
23 | if (res.response.value?.ok && res.data.value) {
24 | collaborations.value = [...collaborations.value, res.data.value];
25 | }
26 |
27 | return res;
28 | }
29 |
30 | async function createOutboundConnection(collaboration: CreateCollaborator) {
31 | const res = await useFetch("/api/collaborations/outboundConnection").post(collaboration);
32 |
33 | if (res.response.value?.ok && res.data.value) {
34 | collaborations.value = [...collaborations.value, res.data.value];
35 | }
36 |
37 | return res;
38 | }
39 |
40 | async function deleteCollaborationById(id: CollaborationId) {
41 | const res = await useFetch(`/api/collaborations/${id}`).delete();
42 |
43 | if (res.response.value?.ok && res.data.value) {
44 | collaborations.value = collaborations.value.filter((c) => c.id !== id);
45 | }
46 |
47 | return res;
48 | }
49 |
50 | async function refineRelationship(
51 | collaborationId: CollaborationId,
52 | relationship: RelationshipType | "unknown" | unknown
53 | ) {
54 | const res = await useFetch(`/api/collaborations/${collaborationId}/relationship`).post({
55 | relationshipType: relationship,
56 | });
57 |
58 | if (res.response.value?.ok && res.data.value) {
59 | collaborations.value = collaborations.value.map((obj) => (obj.id === res.data.value?.id ? res.data.value : obj));
60 | }
61 |
62 | return res;
63 | }
64 |
65 | onMounted(fetchCollaborations);
66 |
67 | return {
68 | collaborations,
69 | loading,
70 | error,
71 | createInboundConnection,
72 | createOutboundConnection,
73 | deleteCollaborationById,
74 | refineRelationship,
75 | };
76 | });
77 |
--------------------------------------------------------------------------------
/concept.md:
--------------------------------------------------------------------------------
1 | # Building an application
2 |
3 | Typically a BCC is created with the help of Post-ITs on physical paper, while digital versions are usually just a mirror of the physical representation, e.g. with the help of Miro.
4 | Meaning that the captured information is represented as free text on virtual Post-ITs and is not stored in a structured way.
5 | This prohibits further data processing and visualization of the information.
6 |
7 | Therefor we propose to design a small application which:
8 |
9 | - stores information about a BoundedContextCanvas in a structured way instead of just using free text on (virtual) Post-ITs,
10 | - allows explicit connections between different bounded contexts,
11 | - supports updating and versioning of the information over time,
12 | - allows to export and visualize the information from the application,
13 | - and helps people to input data for a BCC easier
14 |
15 | 
16 |
17 | While capturing the data manually via a form is great for learning, understanding and building up initial representations of BCC.
18 | The manual work can only be seen as a short to mid term goal, in the long run the data for the BCC should be gathered automatically from applications and should then be presented to the user.
19 | E.g. the data can be read from the source code during the build process:
20 |
21 | - capturing domain terminology by looking at frequently used words,
22 | - reading business rules & policies from e.g. attributed types,
23 | - discovering dependencies to other systems via e.g. OpenAPI documents or
24 | - describing model traits or classifications via attributes
25 |
26 | Additional ideas on how to gather or present information can be read in [Cyrille Martraire book on Living Documentation](https://leanpub.com/livingdocumentation).
27 |
28 | ## Goals for a Prototype
29 |
30 | At the moment we have the following goals we like to reach with Contexture:
31 |
32 | - [Mimicking the BCC with HTML forms](https://github.com/Softwarepark/Contexture/milestone/1)
33 | - [Improving data quality](https://github.com/Softwarepark/Contexture/milestone/2)
34 | - [Connecting existing Tools for visualization](https://github.com/Softwarepark/Contexture/milestone/3)
35 | - [Empower users to input data and document their landscape](https://github.com/Softwarepark/Contexture/milestone/4)
36 | - [Provide documentation and samples](https://github.com/Softwarepark/Contexture/milestone/5)
37 | - [Provide a technical perspective](https://github.com/Softwarepark/Contexture/milestone/6)
38 |
39 | ## Roadmap to a Prototype
40 |
41 | - No tests needed
42 | - No deployment needed (local/dev dependencies should be dockerized?)
43 | - No authentication/authorization
44 | - File based persistence is good enough
45 | - No versioning needed
46 |
--------------------------------------------------------------------------------
/frontend-vue/src/components/core/header/StructurizerDiscloser.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
11 |
12 |
13 |
14 | Structurizr visualization
15 |
16 |
17 |
18 |
26 |
27 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
75 |
--------------------------------------------------------------------------------
/frontend-vue/playwright.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig, devices } from "@playwright/test";
2 |
3 | /**
4 | * Read environment variables from file.
5 | * https://github.com/motdotla/dotenv
6 | */
7 | // require('dotenv').config();
8 |
9 | /**
10 | * See https://playwright.dev/docs/test-configuration.
11 | */
12 | export default defineConfig({
13 | testDir: "./e2e",
14 | /* Maximum time one test can run for. */
15 | timeout: 15 * 1000,
16 | expect: {
17 | /**
18 | * Maximum time expect() should wait for the condition to be met.
19 | * For example in `await expect(locator).toHaveText();`
20 | */
21 | timeout: 5000,
22 | },
23 | /* Run tests in files in parallel */
24 | fullyParallel: false,
25 | /* Fail the build on CI if you accidentally left test.only in the source code. */
26 | forbidOnly: !!process.env.CI,
27 | /* Retry on CI only */
28 | retries: process.env.CI ? 2 : 0,
29 | /* Opt out of parallel tests on CI. */
30 | workers: process.env.CI ? 1 : 1,
31 | /* Reporter to use. See https://playwright.dev/docs/test-reporters */
32 | reporter: "html",
33 | /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
34 | use: {
35 | /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
36 | actionTimeout: 0,
37 |
38 | /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
39 | trace: "retain-on-failure",
40 | launchOptions: {
41 | // slowMo: 5000,
42 | },
43 | baseURL: "http://localhost:4200",
44 | },
45 |
46 | /* Configure projects for major browsers */
47 | projects: [
48 | {
49 | name: "chromium",
50 | use: { ...devices["Desktop Chrome"] },
51 | },
52 |
53 | {
54 | name: "firefox",
55 | use: { ...devices["Desktop Firefox"] },
56 | },
57 |
58 | // {
59 | // name: "webkit",
60 | // use: { ...devices["Desktop Safari"] },
61 | // },
62 |
63 | /* Test against mobile viewports. */
64 | // {
65 | // name: 'Mobile Chrome',
66 | // use: { ...devices['Pixel 5'] },
67 | // },
68 | // {
69 | // name: 'Mobile Safari',
70 | // use: { ...devices['iPhone 12'] },
71 | // },
72 |
73 | /* Test against branded browsers. */
74 | // {
75 | // name: 'Microsoft Edge',
76 | // use: { channel: 'msedge' },
77 | // },
78 | // {
79 | // name: 'Google Chrome',
80 | // use: { channel: 'chrome' },
81 | // },
82 | ],
83 |
84 | /* Folder for test artifacts such as screenshots, videos, traces, etc. */
85 | // outputDir: 'test-results/',
86 |
87 | /* Run your local dev server before starting the tests */
88 | webServer: {
89 | command: "npm run dev",
90 | port: 4200,
91 | reuseExistingServer: true,
92 | },
93 | });
94 |
--------------------------------------------------------------------------------
/frontend-vue/src/constants/domainRoles.ts:
--------------------------------------------------------------------------------
1 | import { DomainRole } from "~/types/boundedContext";
2 |
3 | export const predefinedDomainRoles: DomainRole[] = [
4 | {
5 | name: "Specification Model",
6 | description:
7 | "Produces a document describing a job/request that needs to be performed. Example: Advertising Campaign Builder",
8 | },
9 | {
10 | name: "Execution Model",
11 | description: "Performs or tracks a job. Example: Advertising Campaign Engine",
12 | },
13 | {
14 | name: "Audit Model",
15 | description: "Monitors the execution. Example: Advertising Campaign Analyser",
16 | },
17 | {
18 | name: "Approver",
19 | description:
20 | "Receives requests and determines if they should progress to the next step of the process. Example: Fraud Check",
21 | },
22 | {
23 | name: "Enforcer",
24 | description:
25 | "Ensures that other contexts carry out certain operations. Example: GDPR Context (ensures other contexts delete all of a user’s data)",
26 | },
27 | {
28 | name: "Octopus Enforcer",
29 | description:
30 | "Ensures that multiple/all contexts in the system all comply with a standard rule. Example: GDPR Context (as above)",
31 | },
32 | {
33 | name: "Interchanger",
34 | description: "Translates between multiple ubiquitous languages.",
35 | },
36 | {
37 | name: "Gateway",
38 | description:
39 | "Sits at the edge of a system and manages inbound and/or outbound communication. Example: IoT Message Gateway",
40 | },
41 | {
42 | name: "Gateway Interchange",
43 | description: "The combination of a gateway and an interchange.",
44 | },
45 | {
46 | name: "Dogfood Context",
47 | description:
48 | "Simulates the customer experience of using the core bounded contexts. Example: Whitelabel music store",
49 | },
50 | {
51 | name: "Bubble Context",
52 | description:
53 | "Sits in-front of legacy contexts providing a new, cleaner model while legacy contexts are being replaced.",
54 | },
55 | {
56 | name: "Autonomous Bubble",
57 | description:
58 | "Bubble context which has its own data store and synchronises data asynchronously with the legacy contexts.",
59 | },
60 | {
61 | name: "Brain Context (likely anti-pattern)",
62 | description:
63 | "Contains a large number of important rules and many other contexts depend on it. Example: rules engine containing all the domain rules",
64 | },
65 | {
66 | name: "Funnel Context",
67 | description:
68 | "Receives documents from multiple upstream contexts and passes them to a single downstream context in a standard format (after applying its own rules).",
69 | },
70 | {
71 | name: "Engagement Context",
72 | description:
73 | "Provides key features which attract users to keep using the product. Example: Free Financial Advice Context",
74 | },
75 | ];
76 |
--------------------------------------------------------------------------------
/frontend-vue/src/components/primitives/collapsable/ContextureCollapsable.vue:
--------------------------------------------------------------------------------
1 |
2 |