Add Desirable Properties article

Author: RoyalIcing

apps/components_guide_web/assets/css/app.css

@@ -66,6 +66,7 @@ a:hover {
 h1,
 h2,
 h3,
+h4,
 p,
 li,
 table,
@@ -89,6 +90,10 @@ h3 {
   font-size: var(--heading-3-size);
   padding: var(--heading-3-spacing);
 }
+h4 {
+  font-size: var(--heading-4-size);
+  padding: var(--heading-4-spacing);
+}
 p {
   padding: var(--paragraph-spacing);
 }
@@ -140,6 +145,8 @@ pre {
   --heading-2-spacing: var(--size-base) 0;
   --heading-3-size: var(--size-2xl);
   --heading-3-spacing: var(--size-base) 0;
+  --heading-4-size: var(--size-xl);
+  --heading-4-spacing: var(--size-base) 0;
   --paragraph-spacing: 0.5rem 0;
   --listitem-spacing: 0.5rem 0;
   --table-spacing: var(--size-xl) 0;

apps/components_guide_web/lib/components_guide_web/controllers/composable_systems_controller.ex

@@ -6,7 +6,7 @@ defmodule ComponentsGuideWeb.ComposableSystemsController do
     render(conn, "index.html", article: "intro")
   end
 
-  @articles ["opinionated-vs-flexible"]
+  @articles ["opinionated-vs-flexible", "desirable-properties"]
 
   def show(conn, %{"id" => article}) when article in @articles do
     render(conn, "index.html", article: article)

apps/components_guide_web/lib/components_guide_web/templates/composable_systems/_nav.html.eex

@@ -2,6 +2,7 @@
   <ul y-y x-x=md class="text-lg font-bold" style="--link-padding: 0.75em">
     <li><%= link("Why?", to: '/composable-systems') %>
     <li><%= link("Opinionated vs Flexible", to: '/composable-systems/opinionated-vs-flexible') %>
+    <li><%= link("Desirable Properties", to: '/composable-systems/desirable-properties') %>
     <li hidden><%= link("Single Responsibility", to: '/composable-systems/roles') %>
     <li hidden><%= link("Deterministic", to: '/composable-systems/roles') %>
   </ul>

apps/components_guide_web/lib/components_guide_web/templates/composable_systems/desirable-properties.html.md

@@ -0,0 +1,90 @@
+# Desirable Properties
+
+<h2>Values</h2>
+
+<h3 id=deterministic>Deterministic</h3>
+
+- A given input always produces the same output
+- Easily Cacheable
+- Verifiable by multiple actors
+- *e.g. Converting to lowercase or uppercase*
+- *e.g. Concatenating strings*
+- *e.g. SHA256 hash digest (RFC 6234)*
+- *e.g. Base64 encoding/decoding (RFC 4648)*
+- *e.g. Gzip decoding (RFC 1952)*
+
+```console
+# Converting to lowercase
+> echo "AbC" | tr "[:upper:]" "[:lower:]"
+abc
+
+# SHA256 hash digest
+> echo "abc" | shasum -a 256
+edeaaff3f1774ad2888673770c6d64097e391bc362d7d6fb34982ddf0efd18cb  -
+
+# Base64 encoding
+> echo "abc" | base64
+YWJjCg==
+
+# Base64 decoding
+> echo "YWJjCg==" | base64 -d
+abc
+
+# Gzip decompressing
+> echo "H4sIADFoHGAAA0tMSuYCAE6BiEcEAAAA" | base64 --decode | gzip --decompress
+abc
+```
+
+<h3 id=unique>Unique</h3>
+
+- Unique within a context or globally unique?
+- Won’t clash with existing values
+- *e.g. UUID (RFC 4122)*
+- *e.g. SHA256 hash digest (RFC 6234)*
+- Could still be guessable: *e.g. Auto increment SQL primary key*
+
+```console
+# UUID
+> uuidgen
+5F36D0E2-F524-46B8-870B-9AA70128F8AF
+```
+
+<h3 id=random>Random</h3>
+
+- Not [Guessable](#guessable)
+- Should never clash with existing values
+- *e.g. UUID v4*
+- *e.g. Cryptographically Random source*
+
+<h3 id=guessable>Guessable</h3>
+
+- Not Secure
+- Not [Random](#random)
+- *e.g. Auto increment SQL primary key*
+
+----
+
+<h2>Acts</h2>
+
+<h3 id=immutable>Immutable</h3>
+
+- Benefits caching
+- Benefits syncing
+- *e.g. Twitter tweets are not editable*
+- *e.g. a Git commit*
+- *e.g. a YouTube video cannot be edited*
+
+<h2 id=stateless>Stateless</h2>
+
+- Is [Deterministic](#deterministic)
+- *e.g. A Restful 
+
+<h2 id=idempotent>Idempotent</h2>
+
+- e.g. receiving at least once events
+- Could use Random identifier in request to record which commands have already been completed
+
+<h2 id=versioned>Versioned</h2>
+
+- Won't break previous usages
+- *e.g. [Stripe’s API Versioning](https://stripe.com/blog/api-versioning)*