A place to cache linked articles (think custom and personal wayback machine)
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

index.html 12KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  4. <!-- Has to be within the first 1024 bytes, hence before the <title>
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>Integrated systems for integrated programmers (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f0f0ea">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f0f0ea">
  26. <!-- Documented, feel free to shoot an email. -->
  27. <link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
  28. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  29. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <script type="text/javascript">
  36. function toggleTheme(themeName) {
  37. document.documentElement.classList.toggle(
  38. 'forced-dark',
  39. themeName === 'dark'
  40. )
  41. document.documentElement.classList.toggle(
  42. 'forced-light',
  43. themeName === 'light'
  44. )
  45. }
  46. const selectedTheme = localStorage.getItem('theme')
  47. if (selectedTheme !== 'undefined') {
  48. toggleTheme(selectedTheme)
  49. }
  50. </script>
  51. <meta name="robots" content="noindex, nofollow">
  52. <meta content="origin-when-cross-origin" name="referrer">
  53. <!-- Canonical URL for SEO purposes -->
  54. <link rel="canonical" href="https://m.signalvnoise.com/integrated-systems-for-integrated-programmers/">
  55. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
  56. <article>
  57. <header>
  58. <h1>Integrated systems for integrated programmers</h1>
  59. </header>
  60. <nav>
  61. <p class="center">
  62. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  63. <a href="https://m.signalvnoise.com/integrated-systems-for-integrated-programmers/" title="Lien vers le contenu original">Source originale</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <main>
  68. <p>One of the great tragedies of modern web development over the last five years or so has been the irrational exuberance for microservices. The idea that making a single great web application had simply become too hard, but if we broke that app up into many smaller apps, it’d all be much easier. Turned out, surprise-surprise, that it mostly wasn’t.</p>
  69. <p>As Kelsey Hightower <a href="https://changelog.com/posts/monoliths-are-the-future">searingly put the fallacy</a>: “We’re gonna break it up and somehow find the engineering discipline we never had in the first place”.</p>
  70. <p>But it’s one of those hard lessons that nobody actually wants to hear. You don’t want to hear that the reason your monolith is a spaghetti monster is because you let it become that way, one commit at the time, due to weak habits, pressurized deadlines, or simply sheer lack of competence. No, what you want to hear is that none of that mess is your fault. That it was simply because of the oppressive monolithic architecture. And that, really, you’re just awesome, and if you take your dirty code and stick it into this new microservices tumbler, it’s going to come out sparking clean, smelling like fucking daffodils.</p>
  71. <p>The great thing about such delusions is that they can keep you warm for quite a while. A yeah, sure, maybe the complexities of your new microservices monstrosity are plain as day right from the get go, but you can always excuse them with “it’s really going to pay off once we…” bullshit. And it’ll work! For a while. Because, who knows? Maybe this is better? But it’s not. And the day you have to really admit its not, you’re probably not even still there. On to the next thing.</p>
  72. <p>Microservices as an architectural gold rush appealed to developers for the same reason TDD appeals to developers: <a href="https://www.youtube.com/watch?v=9LfmrkyP81M&amp;t=19m59s">it’s the pseudoscientific promise of a diet</a>. The absolution of a new paradigm to wash away and forgive our sins. Who doesn’t want that?</p>
  73. <p>Well, maybe you? Now after you’ve walked through the intellectual desert of a microservice approach to a problem that didn’t remotely warrant it (ie, almost all of them). Maybe now you’re ready to hear a different story. There’s a slot in your brain for a counterargument that just wasn’t there before.</p>
  74. <p>So here’s the counterargument: Integrated systems are good. Integrated developers are good. Being able to wrap your mind around the whole application, and have developers who are able to make whole features, is good! The road to madness and despair lays in specialization and compartmentalization.</p>
  75. <p>The galaxy brain takes it all in.</p>
  76. <p>But of course, you cry, what if the system is too large to fit in my brain? Won’t it just swap and swap until I kernel failure? Yes, if you try to stick in a bloated beast of an application, sure.</p>
  77. <p>So the work is to shrink the conceptual surface area of your application until it fits in a normal, but capable and competent, programmer’s brain. Using <a href="https://www.youtube.com/watch?v=zKyv-IGvgGE&amp;t=17m27s">conceptual compression</a>, sheer good code writing, a productive and succinct environment, using shortcuts and patterns. That’s the work.</p>
  78. <p>But the payoff is glorious. Magnificent. SUBLIME. The magic of working on an integrated system together with integrated programmers is a line without limits, arbitrary boundaries, or sully gatekeepers.</p>
  79. <p>Forget frontend or backend. The answer is all of it. At the same time. In the same mind.</p>
  80. <p>This sounds impossible if you’ve cooked your noodle too long in the stew of modern <a href="https://www.joelonsoftware.com/2001/04/21/dont-let-architecture-astronauts-scare-you/">astronautic abstractions</a>. If you turn down the temperature, you’ll see that the web is actually much the same as it always was. Sure, a few expectations increased here, and a couple of breakthrough techniques appeared there, but fundamentally, it’s the same. What changed was us. And mostly not in ways for the better.</p>
  81. <p>If your lived experience still haven’t hit the inevitable wall of defeat on the question of microservices, then be my guest, sit there with your folded arms and your smug pout. It’s ok. I get it. There’s not an open slot for this argument in your brain just yet. It’s ok. I’m patient! I’ll still be here in a couple of years when there’s room. And then I’ll send you a link to this article on twitter.</p>
  82. <p>Peace. Love. Integration.</p>
  83. </main>
  84. </article>
  85. <hr>
  86. <footer>
  87. <p>
  88. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  89. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  90. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  91. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  92. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  93. </p>
  94. <template id="theme-selector">
  95. <form>
  96. <fieldset>
  97. <legend>Thème</legend>
  98. <label>
  99. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  100. </label>
  101. <label>
  102. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  103. </label>
  104. <label>
  105. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  106. </label>
  107. </fieldset>
  108. </form>
  109. </template>
  110. </footer>
  111. <script type="text/javascript">
  112. function loadThemeForm(templateName) {
  113. const themeSelectorTemplate = document.querySelector(templateName)
  114. const form = themeSelectorTemplate.content.firstElementChild
  115. themeSelectorTemplate.replaceWith(form)
  116. form.addEventListener('change', (e) => {
  117. const chosenColorScheme = e.target.value
  118. localStorage.setItem('theme', chosenColorScheme)
  119. toggleTheme(chosenColorScheme)
  120. })
  121. const selectedTheme = localStorage.getItem('theme')
  122. if (selectedTheme && selectedTheme !== 'undefined') {
  123. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  124. }
  125. }
  126. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  127. window.addEventListener('load', () => {
  128. let hasDarkRules = false
  129. for (const styleSheet of Array.from(document.styleSheets)) {
  130. let mediaRules = []
  131. for (const cssRule of styleSheet.cssRules) {
  132. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  133. continue
  134. }
  135. // WARNING: Safari does not have/supports `conditionText`.
  136. if (cssRule.conditionText) {
  137. if (cssRule.conditionText !== prefersColorSchemeDark) {
  138. continue
  139. }
  140. } else {
  141. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  142. continue
  143. }
  144. }
  145. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  146. }
  147. // WARNING: do not try to insert a Rule to a styleSheet you are
  148. // currently iterating on, otherwise the browser will be stuck
  149. // in a infinite loop…
  150. for (const mediaRule of mediaRules) {
  151. styleSheet.insertRule(mediaRule.cssText)
  152. hasDarkRules = true
  153. }
  154. }
  155. if (hasDarkRules) {
  156. loadThemeForm('#theme-selector')
  157. }
  158. })
  159. </script>
  160. </body>
  161. </html>