{"componentChunkName":"component---src-features-presentation-presentation-template-jsx","path":"/presentation/diagrams/","webpackCompilationHash":"b34a21a065b9afd8f6a8","result":{"data":{"site":{"siteMetadata":{"title":"Kuznia Kodu","author":"Józef Piecyk"}},"markdownRemark":{"id":"f2f4ef90-6515-59f1-ace2-666649589e45","excerpt":"What eyes don't see, the ears will not hear - how to use diagrams to make your work easier About me Józef Piecyk Software Engineer at Schibsted Tech Polska…","html":"

What eyes don't see, the ears will not hear - how to use diagrams to make your work easier

\n
\n

About me

\n

Józef Piecyk

\n

Software Engineer at Schibsted Tech Polska

\n

Bootcamp trainer

\n

I know awesome waffles recipe

\n
\n

Presentation plan

\n\n

Disclamer

\n

I'll call everything visual diagram.

\n
\n

The problem

\n
    \n
  1. Complex(many details) and complicated(many parts) problems
    2. \n
  2. Multiple component communicating
    3. \n
  3. Multiple technical and business events
    4. \n
  4. Lack of clear naming and visibility
    5. \n
  5. Lack of documentation
    6. \n
\n
\n

These are not exclusive, can happen all at once!

\n
\n
\n

Motivation

\n
    \n
  1. Make live easier
    2. \n
  2. Limit repetition
    3. \n
  3. Improve/enable debugging
    4. \n
  4. Make getting back into conversation easier
    5. \n
  5. Position yourself as an expert
    6. \n
\n
\n

How diagrams help us

\n
\n

Complexity

\n\n

\n \n \n \n \n

\n

https://www.eventstorming.com/

\n
\n

Names and meaning

\n\n

\n \n \n

\n

Excalidraw

\n

https://excalidraw.com/

\n

\n \n \n \n \n

\n
\n

Structurizer

\n

https://c4model.com/

\n

https://structurizr.com/dsl

\n
workspace {\n    model {\n        user = person "App user"\n        \n        github = softwareSystem "Github" \n        \n        stripe = softwareSystem "Stripe"\n        \n        myApp = softwareSystem "my sample application" {\n          frontend = container "Frontend" "Frontend for taskworld" "React" {\n              loginPage = component "User management"\n              productsPage = component "Shopping module for products"\n          }\n          \n          productApi = container "product api" "Microservice managing products" "Nest.js"{\n              listingModule = component "listingModule"\n              emailModule = component "email module"\n              authModule = component "auth module"\n              orderModule = component "order module"\n              paymentModule = component "payment module"\n          }\n          \n          database = container "Database" "Database" "Mongo"\n          redis = container "Redis" "Pub-sub" "Redis"\n        }\n\n        # product display\n        user -> productsPage "Displays product list"\n        productsPage -> listingModule "Fetches product list"\n        listingModule -> database "Gets products"\n        \n        # auth\n        loginPage -> authModule "Logs in"\n        authModule -> github "Authenticates user with github"\n        authModule -> database "Authenticates user"\n        \n        # order\n        productsPage -> orderModule "Creates order"\n        orderModule -> emailModule "Sends notification"\n        orderModule -> paymentModule "Triggers payment"\n        paymentModule -> stripe "Processes payment"\n        paymentModule -> redis "Publish event on successful purchase"        \n    }\n    \n    views {\n        systemContext myApp {\n            include *\n            autolayout\n        }\n        \n        container myApp productApi {\n            include *\n            autolayout\n        }\n        \n        \n        component productApi listingModule {\n            include *\n            autolayout\n        }\n        \n        theme default\n    }\n    \n}
\n
\n

Mermaid

\n

https://mermaid.live

\n
graph LR\n    ValuersController-->ValuersService\n    ValuersService-->|Update case|IndicationModule\n    ValuersService-->|Get users|WorkatoModule\n    ValuersService-->SchedulingModule\n    ValuersService-->ValuersRepository
\n
\n

Real life examples

\n
\n

Example - common components library

\n\n\n

\n \n \n \n \n

\n
\n

Example - impossible local login

\n

Situation

\n

To develop your application locally just setup the platform api and web which are responsible for integrating microfrontends. Then you'll need to develop your own feature web and api.

\n

To authorize you'll be using JWT tokens that are signed by some api hidden behind the VPN so you won't access it anyways. Just get the token from live environment.

\n

Diagram

\n\n\n

\n \n \n \n \n

\n
\n

Example - call flow and bottleneck

\n

\n \n \n \n \n

\n
\n

Example - what is an automation

\n

If there's an issue with naming showing elements in context can make us find new words to name it. We can also see that different people name same thing differently.

\n

\n \n \n \n \n

\n
\n

Example - how to structure our code

\n

\n \n \n \n \n

\n
\n

Example - explain why things don't work

\n

We had a bug where if you imported styles from npm package using chakra it would use one of two styles available(npm package or local). Turns out since it uses React.Context you need to have same reference to the context. Since it's defined in node_modules you have to ensure it only has one copy of the library. To do it you need to mark @chakra-ui/react as peer dependencies.

\n

\n \n \n \n \n

\n
\n

Example - payment flow

\n

\n \n \n \n \n

\n
\n

Example - app diagrams

\n

Define elements and relations in application and them look at appropriate level.

\n

https://c4model.com/

\n

\n \n \n \n \n

\n
\n

Conclusion

\n

Diagrams can save a lot pain and are easy to use. Just use them. Please.

\n

https://excalidraw.com/ - default

\n

https://miro.com - collab with business, event storming

\n

https://structurizr.com/dsl - C4 architecture

\n

https://mermaid.live - dev docs

","frontmatter":{"title":"What eyes don't see, the ears will not hear - how to use diagrams to make your work easier","date":null,"description":"When programming, we often operate on complex problems. Writing or talking about them can lead to all sorts of troubles - from frustration through wasted time to misunderstandings. As part of the presentation, I would like to encourage you to create diagrams and visualize problems yourself. I will present examples of problems and tools that help us deal with them."}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/diagrams/"}}}