<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.8.5">Jekyll</generator><link href="https://andreo.eu/feed.xml" rel="self" type="application/atom+xml" /><link href="https://andreo.eu/" rel="alternate" type="text/html" /><updated>2021-01-01T12:47:07+00:00</updated><id>https://andreo.eu/feed.xml</id><title type="html">A.N.D.R.E.O</title><subtitle>Sébastien's personal website</subtitle><author><name>Sébastien Andreo</name></author><entry><title type="html">Diagram as code</title><link href="https://andreo.eu/posts/2020-12-29-diagram-as-code/" rel="alternate" type="text/html" title="Diagram as code" /><published>2020-12-29T00:00:00+00:00</published><updated>2020-12-29T09:00:00+00:00</updated><id>https://andreo.eu/posts/diagram-as-code</id><content type="html" xml:base="https://andreo.eu/posts/2020-12-29-diagram-as-code/">&lt;p&gt;We have seen in the &lt;a href=&quot;/posts/2020-12-28-arch-doc/&quot;&gt;previous article&lt;/a&gt; that our primary driver is to keep the software documentation as near as possible to the developer, from a tool landscape and also from a process point of view. But if the documentation contains a couple of sentences, there are also many diagrams like the following.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://c4model.com/img/sketch-2.jpg&quot; alt=&quot;&quot; /&gt;
&lt;em&gt;source: https://c4model.com&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;a lovely picture from a whiteboard, or if the author took the time to transfer the drawing in a modeling tool, you could have something like that&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;https://i.pinimg.com/564x/80/e2/1b/80e21b2b4f9d1ce8ac3d4f41e4ada86a.jpg&quot; alt=&quot;&quot; /&gt;
&lt;em&gt;source: https://sparxsystems.com&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;And in all the cases, it ends with a jpeg or png. Unfortunately, the diagram will evolve, and comparing two jpegs is not so easy :). Following the same approach, documentation as code, it was natural to move to diagrams as code. &lt;a href=&quot;https://twitter.com/simonbrown&quot;&gt;Simon Brown&lt;/a&gt; mentioned the growth of such an approach in this &lt;a href=&quot;https://dev.to/simonbrown/diagrams-as-code-20eo&quot;&gt;post&lt;/a&gt;. It was comforting to see that the way we were following since the last two years is taking speed.&lt;/p&gt;

&lt;p&gt;To make our diagrams versionable and comparable, we use different &lt;a href=&quot;https://plantuml.com/&quot;&gt;plantuml&lt;/a&gt; dialects:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;&lt;a href=&quot;https://github.com/RicardoNiepel/C4-PlantUML&quot;&gt;Plantuml for C4&lt;/a&gt;, yes we use &lt;a href=&quot;https://c4model.com/&quot;&gt;C4&lt;/a&gt; for the architecture documentation because we like the simplicity of the modeling and also the idea of navigability. We use then&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;https://github.com/awslabs/aws-icons-for-plantuml&quot;&gt;Plantuml for AWS &lt;/a&gt; as our application is deployed on AWS, but you can also find versions for&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;https://github.com/RicardoNiepel/Azure-PlantUML&quot;&gt;Azure&lt;/a&gt;, or&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;https://github.com/davidholsgrove/gcp-icons-for-plantuml&quot;&gt;GCP&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And with a simple code like that,&lt;/p&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;@startuml Basic Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

Person(admin, &quot;Administrator&quot;)
System_Boundary(c1, &quot;Sample System&quot;) {
    Container(web_app, &quot;Web Application&quot;, &quot;C#, ASP.NET Core 2.1 MVC&quot;, &quot;Allows users to compare multiple Twitter timelines&quot;)
}
System(twitter, &quot;Twitter&quot;)

Rel(admin, web_app, &quot;Uses&quot;, &quot;HTTPS&quot;)
Rel(web_app, twitter, &quot;Gets tweets from&quot;, &quot;HTTPS&quot;)
@enduml
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;we obtain&lt;/p&gt;

&lt;p&gt;&lt;object data=&quot;/uml/b040e6d53a101c276eefb829931e9e55.svg&quot; type=&quot;image/svg+xml&quot; class=&quot;plantuml&quot;&gt;&lt;/object&gt;&lt;/p&gt;

&lt;h3 id=&quot;everything-versionable&quot;&gt;everything versionable&lt;/h3&gt;

&lt;p&gt;Now we have everything versionable. We can finally compare diagrams. As &lt;a href=&quot;https://twitter.com/simonbrown&quot;&gt;Simon Brown&lt;/a&gt; says, we are just diagraming, not modeling, and it is true. With the latest improvements of &lt;a href=&quot;https://structurizr.com/&quot;&gt;structurizr&lt;/a&gt; in the direction of &lt;code class=&quot;highlighter-rouge&quot;&gt;diagram as code&lt;/code&gt; and cloud architecture, we can envisage a migration to such a modeling tool.&lt;/p&gt;

&lt;p&gt;Our approach is strongly based on the idea of linking information allowing better navigation, and avoiding redundancy. We wanted to have the same experience at the diagram level, being able to jump into the documentation of the component or in the code directly. To this end, we extended:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;&lt;a href=&quot;https://github.com/yegor256/jekyll-plantuml&quot;&gt;jekyll-plantuml&lt;/a&gt; plugin to generate SVG with embed URLs&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;https://github.com/SebastienAndreo/C4-PlantUML&quot;&gt;plantuml for C4&lt;/a&gt; to naturally embed Url&lt;/li&gt;
&lt;/ul&gt;

&lt;div class=&quot;highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;@startuml
!include C4/C4_Container.puml
Person(admin, Administrator, &quot;Alice&quot;, {{site.baseurl}}/alice/)
System_Boundary(c1, &quot;Sample System&quot;) {
    Container(web_app, &quot;Web Application&quot;, &quot;C#, ASP.NET Core 2.1 MVC&quot;, &quot;Allows users to compare multiple Twitter timelines&quot;)
}
System(twitter, &quot;Twitter&quot;)
Rel(admin, web_app, &quot;Uses&quot;, &quot;HTTPS&quot;)
Rel(web_app, twitter, &quot;Gets tweets from&quot;, &quot;HTTPS&quot;)
@enduml
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;And you can try to click on Alice or twitter.&lt;/p&gt;

&lt;object class=&quot;plantuml&quot; data=&quot;/assets/images/2020-12-29-diag/C4-link.svg&quot; type=&quot;image/svg+xml&quot;&gt;&lt;/object&gt;

&lt;p&gt;To conclude, a diagram as code is a lightweight manner of documenting your architecture; you can focus on the content and not on tool usage. Give it a try, and if you combine it with jekyll, you have a fully navigable documentation.&lt;/p&gt;</content><author><name>Sébastien Andreo</name></author><summary type="html">We have seen in the previous article that our primary driver is to keep the software documentation as near as possible to the developer, from a tool landscape and also from a process point of view. But if the documentation contains a couple of sentences, there are also many diagrams like the following.</summary></entry><entry><title type="html">Architecture Documentation teaser</title><link href="https://andreo.eu/posts/2020-12-28-arch-doc-serie/" rel="alternate" type="text/html" title="Architecture Documentation teaser" /><published>2020-12-28T00:00:00+00:00</published><updated>2020-12-28T07:00:00+00:00</updated><id>https://andreo.eu/posts/arch-doc-serie</id><content type="html" xml:base="https://andreo.eu/posts/2020-12-28-arch-doc-serie/">&lt;p&gt;For a while, I found a list of articles from &lt;a href=&quot;https://medium.com/@nvashanin&quot;&gt;Nikolay Ashanin&lt;/a&gt; about &lt;a href=&quot;https://medium.com/@nvashanin/the-path-to-becoming-a-software-architect-de53f1cb310a&quot;&gt;software architect role&lt;/a&gt; and software architecture in general, and I encourage any software engineer to have a look at those. It gave me the idea to share my experience with a series of posts on how I envisage software architecture and, in particular, the documentation. Within the next articles, I will describe topics:&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;&lt;a href=&quot;/posts/2020-12-28-arch-doc/&quot;&gt;around documentation dissemination&lt;/a&gt;, then&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;/posts/2020-12-29-diagram-as-code/&quot;&gt;how to deal with diagrams&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I hope you will enjoy that series, waiting for your comments.&lt;/p&gt;</content><author><name>Sébastien Andreo</name></author><summary type="html">For a while, I found a list of articles from Nikolay Ashanin about software architect role and software architecture in general, and I encourage any software engineer to have a look at those. It gave me the idea to share my experience with a series of posts on how I envisage software architecture and, in particular, the documentation. Within the next articles, I will describe topics: around documentation dissemination, then how to deal with diagrams</summary></entry><entry><title type="html">Architecture documentation authoring and dissemination</title><link href="https://andreo.eu/posts/2020-12-28-arch-doc/" rel="alternate" type="text/html" title="Architecture documentation authoring and dissemination" /><published>2020-12-28T00:00:00+00:00</published><updated>2020-12-28T09:00:00+00:00</updated><id>https://andreo.eu/posts/arch-doc</id><content type="html" xml:base="https://andreo.eu/posts/2020-12-28-arch-doc/">&lt;p&gt;This article will present how I envisage software documentation from the development, and tooling side.
First of all, architecture documentation is a critical asset as soon as you are more than two or three in the team. As Nikolay described in &lt;a href=&quot;https://medium.com/@nvashanin/documentation-in-software-architecture-4f2e4159c4fc&quot;&gt;his article&lt;/a&gt;, the primary goals are knowledge sharing, communication, and analyses. But documenting the system’s architecture is a difficult task. You always face the divergence between code and the documentation. Word/pdf documents or modelization files contain the documentation, making it challenging to find information and navigate between the artifacts.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/images/2020-12-28-arch-doc/pict1.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;For sure we can argue that each tool addresses different stakeholder needs. A modeling tool might be the preferred tool for a software architect, the repository selected by a developer, and a pdf for a management level. But we have to be honest; maintaining all is a pain. While setting up the documentation with my team, I asked the group: “what do we/they “feel” about the architecture and the documentation? It came out that:&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;Architecture is mostly from developers for developers&lt;/li&gt;
  &lt;li&gt;Architecture is living; it changes iterations after iterations&lt;/li&gt;
  &lt;li&gt;Code and architecture always diverge over time&lt;/li&gt;
  &lt;li&gt;Architecture is not a book you read from page one to the end&lt;/li&gt;
  &lt;li&gt;Architecture is not something to fulfill a process step, but it needs a process&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Based on those thoughts, the concept of content as code was quite promising. Indeed the same rules should apply for the documentation as for the code. If the architecture is from developers for developers, why not use the same tool landscape (e.g., Git, vscode, or any IDE). Architecture is a living object like code, and it is also a critical asset we can apply the same processes (e.g., Quality gates within a CI, Merge Request…). Architecture and code always diverge over time; maybe putting them together might reduce the risk.
We ended with a classical developer tool landscape for the authoring part: Gitlab or any other source control system, markdown for the content, and Git for versioning.&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/images/2020-12-28-arch-doc/pict2.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;With that solution, we were able to guarantee:&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;The versioning: the documentation evolves like the code following the same life cycle.&lt;/li&gt;
  &lt;li&gt;The quality, with merge requests like code&lt;/li&gt;
  &lt;li&gt;The traceability: with the ability to compare different versions as we are text-based.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The authoring aspect is addressed, but the reader’s side was still not implemented. The team mentioned that you do not read architecture documentation like a book, starting from page one to the end. We prefer to navigate from a piece of information to another, from a high level of abstraction to an implementation detail. Fundamentally the reader wants to navigate! Which system has in his heart the navigability? &lt;strong&gt;The Web&lt;/strong&gt; indeed! The documentation should be web-based. The web is navigable, links are the heart of the web, and with a single URL, you can dive into your documentation.
&lt;img src=&quot;/assets/images/2020-12-28-arch-doc/pict3.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;As depicted in the previous picture, we extended our tool landscape to generate a static website with Jekyll and the full integration into our CI/CD pipeline. Now the generated website is a kind of artifact like any dll or cloud deployment. It is synchronized with the code. It is readable to anyone who has the URL, and the unique tool needed by a reader is a web browser.&lt;/p&gt;

&lt;p&gt;To conclude, in this article I presented how I tried with my team to address the authoring and dissemination of software architecture. Below some links to tools or concepts I used. In the next article, I will present how we handled the architecture diagrams.&lt;/p&gt;

&lt;h2 id=&quot;links&quot;&gt;Links&lt;/h2&gt;
&lt;ul&gt;
  &lt;li&gt;&lt;a href=&quot;https://www.writethedocs.org/guide/docs-as-code/&quot;&gt;Documentation as code &lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;https://jekyllrb.com/&quot;&gt;jekyll&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;https://gitlab.com/SebastienAndreo/jekyll-ci&quot;&gt;my CI image&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</content><author><name>Sébastien Andreo</name></author><summary type="html">This article will present how I envisage software documentation from the development, and tooling side. First of all, architecture documentation is a critical asset as soon as you are more than two or three in the team. As Nikolay described in his article, the primary goals are knowledge sharing, communication, and analyses. But documenting the system’s architecture is a difficult task. You always face the divergence between code and the documentation. Word/pdf documents or modelization files contain the documentation, making it challenging to find information and navigate between the artifacts.</summary></entry><entry><title type="html">Hello world</title><link href="https://andreo.eu/posts/2019-01-19-hello-world/" rel="alternate" type="text/html" title="Hello world" /><published>2019-01-19T00:00:00+00:00</published><updated>2019-01-19T07:05:34+00:00</updated><id>https://andreo.eu/posts/hello-world</id><content type="html" xml:base="https://andreo.eu/posts/2019-01-19-hello-world/">&lt;p&gt;Howdy,
Now I am online, I am &lt;a href=&quot;https://andreo.eu/about/&quot;&gt;Sébastien&lt;/a&gt; this is my personal blog. 
I will write about generally software development, technology, software architecture&lt;/p&gt;

&lt;p&gt;my topics of interest are :&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;API management&lt;/li&gt;
  &lt;li&gt;Software architecture description and documentation&lt;/li&gt;
  &lt;li&gt;Software code base management (metrics, quality, decision support)&lt;/li&gt;
  &lt;li&gt;.Net but I can deal with other languages&lt;/li&gt;
  &lt;li&gt;Developer tools: how can we make our life easier&lt;/li&gt;
  &lt;li&gt;How can we develop application with the &lt;strong&gt;business&lt;/strong&gt; and not the technology on focus&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For the tech aficionados this web site is completly generated and for that I would like to thank:&lt;/p&gt;
&lt;ul&gt;
  &lt;li&gt;&lt;a href=&quot;&quot;&gt;Jekyll&lt;/a&gt; for existing, it is so much fun to generate static websites&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;https://mademistakes.com/work/jekyll-themes/&quot;&gt;Michael Rose&lt;/a&gt; for developing incredible themes for jekyll&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;img src=&quot;/assets/images/jekyll.png&quot; alt=&quot;&quot; /&gt; &lt;img src=&quot;/assets/images/apple-touch-icon.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Cheers
Sébastien&lt;/p&gt;</content><author><name>Sébastien Andreo</name></author><summary type="html">Howdy, Now I am online, I am Sébastien this is my personal blog. I will write about generally software development, technology, software architecture</summary></entry></feed>