Skip to content

Instantly share code, notes, and snippets.

@mat3u

mat3u/index.html

Last active February 4, 2019 08:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mat3u/134a2934c50b2ab09d2e3208b0dc7334 to your computer and use it in GitHub Desktop.
Save mat3u/134a2934c50b2ab09d2e3208b0dc7334 to your computer and use it in GitHub Desktop.
Download ZIP
CQRS Workshops
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CQRS Workshops</title>
<meta name="description" content="CQRS Workshops - Agenda">
<meta name="author" content="Matt Stasch">
<style>
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background: #FFF;
font-family: "Ubuntu Mono";
counter-reset: nums;
margin-left: 15px;
zoom: 1.25;
}
h1 {
margin-bottom: 0;
}
h5 {
margin-top: 0;
}
#header {
margin-left: 115px;
}
h5 {
font-weight: normal;
}
div {
display: inline-block;
margin-right: 25px;
}
.section {
position: relative;
display: block;
margin-bottom: 10px;
}
.desc {
display: block;
margin-bottom: 15px;
font-size: 0.7em;
padding-left: 120px;
}
.desc ul {
padding-left: 20px;
margin-top: 0;
}
.time {
font-size: 0.7em;
width: 18px;
text-align: right;
}
.time::before {
content: attr(time);
}
.point::before {
counter-increment: nums;
content: counter(nums)
}
.point {
background: #fff;
color: #000;
width: 30px;
height: 30px;
line-height: 30px;
display: inline-block;
border-radius: 50%;
text-align: center;
text-decoration: none;
border: 3px solid #fff;
box-shadow: 0px 0px 0px 3px #114dad;
}
.workshop .point {
box-shadow: 0px 0px 0px 3px #a01500;
}
.break .point {
box-shadow: 0px 0px 0px 3px #c0c0c0;
}
.line {
border-left: 1px dotted #000;
position: absolute;
top: 0px;
left: 69px;
height: 150%;
z-index: -10;
}
.copy {
font-size: 0.6em;
}
</style>
</head>
<body>
<div id="header">
<h1>
CQRS Workshop
</h1>
<h5>
Matt Stasch &lt;matt.stasch@gmail.com&gt;
</h5>
</div>
<div class="section">
<div class="time" time="15">m</div>
<div class="point"></div>
<div class="title">Wild, Wild West ... of Programming</div>
<div class="desc">
Introduction to "the state of the art" in terms of Software Engineering.
</div>
<div class="line">&nbsp;</div>
</div>
<div class="section workshop">
<div class="time" time="25">m</div>
<div class="point"></div>
<div class="title">Through drama of CRUDish domain</div>
<div class="desc"></div>
<div class="line">&nbsp;</div>
</div>
<div class="section">
<div class="time" time="15">m</div>
<div class="point"></div>
<div class="title">Why CQRS?</div>
<div class="desc">
<ul>
<li>Business goal</li>
<li>READ &gt;&gt; WRITE</li>
<li>Clear separation of concerns</li>
<li>Open for change!</li>
</ul>
</div>
<div class="line">&nbsp;</div>
</div>
<div class="section">
<div class="time" time="45">m</div>
<div class="point"></div>
<div class="title">CQRS in theory</div>
<div class="desc">
<ul>
<li>Introduction</li>
<li>Hexagonal Architecture</li>
<li>READ vs WRITE</li>
<li>Command</li>
<li>Command vs Domain - who does what?!</li>
<li>Query</li>
<li>Events</li>
</ul>
</div>
<div class="line">&nbsp;</div>
</div>
<div class="section">
<div class="time" time="30">m</div>
<div class="point"></div>
<div class="title">CQRS in Java Script</div>
<div class="desc">
<ul>
<li>Doing it right! (my opinion)</li>
<li>Existing frameworks</li>
</ul>
</div>
<div class="line">&nbsp;</div>
</div>
<div class="section break">
<div class="time" time="10">m</div>
<div class="point"></div>
<div class="title">Break</div>
<div class="desc"></div>
<div class="line">&nbsp;</div>
</div>
<div class="section workshop">
<div class="time" time="60">m</div>
<div class="point"></div>
<div class="title">CRUD &rarr; CQRS</div>
<div class="desc">
<ul>
<li>Storm the problem - introduction to Event Storming</li>
<li>Request should express purpose</li>
<li>How to test Commands</li>
<li>Separating Domain and Commands</li>
</ul>
</div>
<div class="line">&nbsp;</div>
</div>
<div class="section">
<div class="time" time="20">m</div>
<div class="point"></div>
<div class="title">The cost of CQRS</div>
<div class="desc">
<ul>
<li>Not a silver bullet</li>
<li>WRITE and READs</li>
<li>Eventual Consistency</li>
</ul>
</div>
<div class="line">&nbsp;</div>
</div>
<div class="section break">
<div class="time" time="30">m</div>
<div class="point"></div>
<div class="title">Break - Pizza!</div>
<div class="desc">Open discussion!</div>
<div class="line">&nbsp;</div>
</div>
<div class="section workshop">
<div class="time" time="60">m</div>
<div class="point"></div>
<div class="title">Separated READ model</div>
<div class="desc">
<ul>
<li>Event Dispatcher</li>
<li>Event Denormalizers</li>
</ul>
</div>
<div class="line">&nbsp;</div>
</div>
<div class="section">
<div class="time" time="30">m</div>
<div class="point"></div>
<div class="title">Advanced Topics</div>
<div class="desc">
<ul>
<li>Event Sourcing</li>
<li>Multi-READ systems</li>
<li>Testing Queryies</li>
</ul>
</div>
<div class="line">&nbsp;</div>
</div>
<div class="section">
<div class="time" time="5">m</div>
<div class="point"></div>
<div class="title">Fin!</div>
<div class="desc"><a href="https://goo.gl/forms/sX1uPEYeHCvEmUyC2">Assesment of the workshops</a></div>
<!-- <div class="line">&nbsp;</div> -->
</div>
<span class="copy">Copyright &copy; 2019 Matt Stasch</span>
<script>
const displayTime = t => {
if (t < 60) {
return `${t}m`
}
return `${Math.floor(t/60)}h${t%60}m`
}
let sum = 0
document.querySelectorAll('.section').forEach(s => {
sum = sum + s.querySelector('.time').getAttribute('time') * 1;
s.querySelector('.point').setAttribute('title', displayTime(sum))
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment