Component on Micha Kops' Tech Notes

C4 Modeling with PlantUML and AsciiDoc

Tue, 01 Nov 2022 00:00:00 +0100

C4 models allow us to visualize software architecture by decomposition in containers and components.

Viewpoints are organized in hierarchical levels:

Context Diagrams (Level 1)
Container Diagrams (Level 2)
Component Diagrams (Level 3)
Code Diagrams (Level 4)

C4-PlantUML offers a variety of macros and stereotypes that make modeling fun.

An example in PlantUML:

sample.puml

@startuml
!include <c4/C4_Context.puml>
!include <c4/C4_Container.puml>

left to right direction

Person(user, "User")

System_Ext(auth, "AuthService", "Provides authentication and authorization via OIDC")

System_Boundary(zone1, "Some system boundary") {


    System(lb, "Load Balancer")

    System_Boundary(az, "App Cluster") {
        System(app, "App Servers") {
            Container(app1, "App1", "Docker", "Does stuff")
            Container(app2, "App1", "Docker", "Does stuff")

            ContainerDb(dbSess, "Session DB", "Redis")
            ContainerDb(db1, "RBMS 1", "AWS RDS Postgres")
            ContainerDb(db2, "RBMS 2", "AWS RDS Postgres")

            ' both app servers sync sessions via redis
            Rel(app1, dbSess, "Uses", "Sync Session")
            Rel(app2, dbSess, "Uses", "Sync Session")

            ' both app servers persist data in RDBMS
            Rel(app1, db1, "Uses", "Persist/query relational data")
            Rel(app2, db2, "Uses", "Persist/query relational data")
        }
    }
}

Rel(user, lb, "call")
Rel(lb, app1, "delegate")
Rel(lb, app2, "delegate")
Rel(app1, auth, "Verify", "User auth")
Rel(app2, auth, "Verify", "User auth")

SHOW_FLOATING_LEGEND()

@enduml

Writing a React Component Test with Jest and Testing Library

Fri, 04 Jun 2021 00:00:00 +0200

Goals

render a React component in a test
mock HTTP/REST calls to the backend
verify results
achieve the above using typescript, jest and testing-library

Application under Test

This is our application’s shortened package.json, generated by create-react-app, adding dependencies for …

jest
testing-library
typescript
react
dom implementations (jest-dom/react-dom)
axios (for the HTTP/REST call)

package.json

{
  [..]
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "typescript": "^4.1.2",
    "web-vitals": "^1.0.1",
    "axios": "^0.19.0"
  },
  [..]
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  [..]
}

Playing around with the Android Animation Framework

Mon, 27 Sep 2010 00:00:00 +0200

Animations add some spice to our Android applications and the offered animation framework makes it easy to create custom animations and tweens.

So lets dance around and create some animations ;) ..

About

There are two ways to create animations – via XML declaration or in a Java class. We’re going to focus on XML declaration – if you’re interested in java based declaration – take a look at the Android JavaDocs and the subclasses of android.view.animation.Animation.