A place to cache linked articles (think custom and personal wayback machine)
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

index.html 14KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  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` element
  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>La dette technique - Carnet de notes (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="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <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>
  31. <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>
  32. <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>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <meta name="robots" content="noindex, nofollow">
  53. <meta content="origin-when-cross-origin" name="referrer">
  54. <!-- Canonical URL for SEO purposes -->
  55. <link rel="canonical" href="https://n.survol.fr/n/la-dette-technique">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>La dette technique - Carnet de notes</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://n.survol.fr/n/la-dette-technique" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p>J’en­tends trop souvent parler de dette tech­nique comme le gros monstre qui va tout manger et comme d’une faute impar­don­nable. Je ne le vois pas ainsi.</p>
  71. <p>D’abord, pour parler de la même chose, ce que j’ap­pelle une dette : </p>
  72. <blockquote class="wp-block-quote"><p>La créa­tion d’une situa­tion qui permet un gain à court terme (plus vite, moins cher, etc.) mais qui va entraî­ner un coût à long terme.</p></blockquote>
  73. <p>Et la dette, présen­tée ainsi, c’est juste un outil arri­ver à ses fins. J’ai au moins trois situa­tions qui peuvent arri­ver rela­ti­ve­ment fréquem­ment : </p>
  74. <ol><li>« Chaque chose en son temps »<br>Je n’ai pas les moyens<sup><sub>(*)</sub></sup> aujourd’­hui mais je pense les avoir demain.</li></ol>
  75. <ol start="2"><li>« Je fais un inves­tis­se­ment »<br>J’au­rais les moyens de ne pas créer cette situa­tion mais le gain à court terme va entrai­ner des béné­fices qui surpassent le coût à long terme.</li></ol>
  76. <ol start="3"><li>« Pas le choix »<br>Je sais que j’y perds mais c’est une arbi­trage par rapport à une autre situa­tion qui serait pire.</li></ol>
  77. <hr class="wp-block-separator has-alpha-channel-opacity">
  78. <p>Je comprends que c’est frus­trant pour les équipes tech­niques, l’im­pres­sion de ne pas faire <em>ce qu’il faut</em>, ainsi que celle de parfois perdre du temps à cause de dettes qu’on a créé dans le passé.</p>
  79. <p>C’est juste parfois quand même (souvent) le bon outil pour l’en­tre­prise, parce que la pureté n’est pas toujours (et même rare­ment) la bonne stra­té­gie.</p>
  80. <p>Plutôt que de combattre les choix de dette tech­nique et l’uti­li­ser comme grand épou­van­tail, deman­dez plutôt à expli­ci­ter le gain court terme, le coût long terme, et pourquoi on choi­sit de prendre cette dette. On arri­vera peut-être parfois à la conclu­sion que c’est une erreur. Le reste du temps ça vous permet­tra de comprendre la stra­té­gie et de vous y inscrire.</p>
  81. <p>Atten­tion toute­fois : <em>Faites de la dette, pas de la merde</em>. Les deux sont très diffé­rent.</p>
  82. <hr class="wp-block-separator has-alpha-channel-opacity">
  83. <p>Tout ça est parti­cu­liè­re­ment vrai en star­tup.</p>
  84. <p>La dette c’est le modèle de base de la star­tup. On emprunte (via les levées de fonds) pour des gains futurs. La struc­ture elle-même est une énorme dette. Prétendre, à l’in­té­rieur, éviter toute dette, ça n’a pas de sens.</p>
  85. <p>C’est parti­cu­liè­re­ment vrai les premières années. On vit à crédit sur un poten­tiel. Il faut prou­ver les promesses pour toucher le crédit suivant, et ça jusqu’à avoir l’échelle suffi­sante pour ne plus en avoir besoin.</p>
  86. <p>Les premières années il faut trou­ver explo­rer la problé­ma­tique, trou­ver le bon produit avec la bonne cible utili­sa­teur, puis prou­ver qu’il y a une oppor­tu­nité de crois­sance et de béné­fice en adéqua­tion avec la mise de départ.</p>
  87. <p>C’est une course de vitesse avant la fin des crédits. Tout ce qui est « pour plus tard » est hors sujet. Si on peut créer de la dette pour plus tard de façon à avoir un meilleur produit, à toucher sa cible utili­sa­teur, ou à enclen­cher la montée de chiffre d’af­faire, on crée cette dette. </p>
  88. <p>Dans une de mes expé­riences on m’a dit « <em>J’ai vu plein de jeunes star­tup échouer parce qu’elles ont pris trop de temps, je n’en ai vu aucune échouer à cause de la dette tech­nique</em> ». </p>
  89. <p>En bon ingé­nieur ce n’est pas un discours qui me fait plai­sir intel­lec­tuel­le­ment mais je n’ai jamais pu le démen­tir. La dette est juste le bon outil à ce moment là, et la dette tech­nique n’est un problème qu’in­tel­lec­tuel­le­ment.</p>
  90. <p>La dette c’est un problème de riche. Ça arrive après, quand on a trouvé le bon produit, qu’on a trouvé sa cible, qu’on a prouvé qu’on était capable d’ac­qué­rir des clients. Là on aura aussi le finan­ce­ment qui va avec pour embau­cher des ingé­nieurs qui vont refaire ce qui doit l’être, et élimi­ner une bonne partie des travaux qu’on avait remis à plus tard. </p>
  91. <p>L’enjeu c’est d’ar­ri­ver jusque là.</p>
  92. <hr class="wp-block-separator has-alpha-channel-opacity">
  93. <p><em>Je fais une note addi­tion­nelle suite à une discus­sion. Je renforce le « Faites de la dette, pas de la merde ». C’est vrai autant au niveau tech­nique qu’au niveau orga­ni­sa­tion­nel.</em></p>
  94. <ul><li><em>Ne mettez pas à risque les données de vos utili­sa­teurs</em></li><li><em>Four­nis­sez le service et la qualité que vous promet­tez à vos utili­sa­teurs</em></li><li><em>Ne faites pas payer la dette par les membres de vos équipes</em></li></ul>
  95. <p><em>Ce dernier point est majeur.</em> <em>La dette n’a pas a être trans­for­mée en pres­sion ou charge supplé­men­taire pour les sala­riés en espé­rant avoir les gains sans en payer les coûts. C’est le meilleur moyen d’ar­ri­ver à l’épui­se­ment, la dépres­sion, le burn-out, et au mieux un turn-over impor­tant. Dans tous les cas, ça ne fonc­tion­nera pas et n’aura que des effets néga­tifs à la fois sur la santé des sala­riés et sur le fonc­tion­ne­ment de l’en­tre­prise.</em></p>
  96. <p><em>S’en­det­ter peut impliquer d’al­ler ensuite moins vite, de produire moins, et de réduire le péri­mètre ou les exigences. Faites avec : ça fait partie du choix.</em></p>
  97. <p><em>Plus loin : Les équipes ressen­ti­ront cette pres­sion et cette charge même si on ne leur donne pas. La volonté de bien faire et l’im­pres­sion de ne pas faire ce qu’il faut sont une charge psycho­lo­gique signi­fi­ca­tive à laquelle le mana­ge­ment doit être extrê­me­ment atten­tif.</em></p>
  98. <p><em>Le seul outil que j’ai vu fonc­tion­ner contre ça c’est expli­ci­ter la dette, la choi­sir ensemble en expliquant pourquoi, comment, et le plan ensuite. Quand la stra­té­gie est parta­gée ça devient un choix collec­tif et plus une mauvaise exécu­tion.</em></p>
  99. </article>
  100. <hr>
  101. <footer>
  102. <p>
  103. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  104. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  105. </svg> Accueil</a> •
  106. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  107. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  108. </svg> Suivre</a> •
  109. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  110. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  111. </svg> Pro</a> •
  112. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  113. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  114. </svg> Email</a> •
  115. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  116. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  117. </svg> Légal</abbr>
  118. </p>
  119. <template id="theme-selector">
  120. <form>
  121. <fieldset>
  122. <legend><svg class="icon icon-brightness-contrast">
  123. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  124. </svg> Thème</legend>
  125. <label>
  126. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  127. </label>
  128. <label>
  129. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  130. </label>
  131. <label>
  132. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  133. </label>
  134. </fieldset>
  135. </form>
  136. </template>
  137. </footer>
  138. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  139. <script>
  140. function loadThemeForm(templateName) {
  141. const themeSelectorTemplate = document.querySelector(templateName)
  142. const form = themeSelectorTemplate.content.firstElementChild
  143. themeSelectorTemplate.replaceWith(form)
  144. form.addEventListener('change', (e) => {
  145. const chosenColorScheme = e.target.value
  146. localStorage.setItem('theme', chosenColorScheme)
  147. toggleTheme(chosenColorScheme)
  148. })
  149. const selectedTheme = localStorage.getItem('theme')
  150. if (selectedTheme && selectedTheme !== 'undefined') {
  151. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  152. }
  153. }
  154. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  155. window.addEventListener('load', () => {
  156. let hasDarkRules = false
  157. for (const styleSheet of Array.from(document.styleSheets)) {
  158. let mediaRules = []
  159. for (const cssRule of styleSheet.cssRules) {
  160. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  161. continue
  162. }
  163. // WARNING: Safari does not have/supports `conditionText`.
  164. if (cssRule.conditionText) {
  165. if (cssRule.conditionText !== prefersColorSchemeDark) {
  166. continue
  167. }
  168. } else {
  169. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  170. continue
  171. }
  172. }
  173. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  174. }
  175. // WARNING: do not try to insert a Rule to a styleSheet you are
  176. // currently iterating on, otherwise the browser will be stuck
  177. // in a infinite loop…
  178. for (const mediaRule of mediaRules) {
  179. styleSheet.insertRule(mediaRule.cssText)
  180. hasDarkRules = true
  181. }
  182. }
  183. if (hasDarkRules) {
  184. loadThemeForm('#theme-selector')
  185. }
  186. })
  187. </script>
  188. </body>
  189. </html>