|
|
|
@@ -0,0 +1,228 @@ |
|
|
|
<!doctype html><!-- This is a valid HTML5 document. --> |
|
|
|
<!-- Screen readers, SEO, extensions and so on. --> |
|
|
|
<html lang="fr"> |
|
|
|
<!-- Has to be within the first 1024 bytes, hence before the `title` element |
|
|
|
See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> |
|
|
|
<meta charset="utf-8"> |
|
|
|
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> |
|
|
|
<!-- The viewport meta is quite crowded and we are responsible for that. |
|
|
|
See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> |
|
|
|
<meta name="viewport" content="width=device-width,initial-scale=1"> |
|
|
|
<!-- Required to make a valid HTML5 document. --> |
|
|
|
<title>La dette technique - Carnet de notes (archive) — David Larlet</title> |
|
|
|
<meta name="description" content="Publication mise en cache pour en conserver une trace."> |
|
|
|
<!-- That good ol' feed, subscribe :). --> |
|
|
|
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> |
|
|
|
<!-- Generated from https://realfavicongenerator.net/ such a mess. --> |
|
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> |
|
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> |
|
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> |
|
|
|
<link rel="manifest" href="/static/david/icons2/site.webmanifest"> |
|
|
|
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> |
|
|
|
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> |
|
|
|
<meta name="msapplication-TileColor" content="#f7f7f7"> |
|
|
|
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> |
|
|
|
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> |
|
|
|
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> |
|
|
|
<!-- Documented, feel free to shoot an email. --> |
|
|
|
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> |
|
|
|
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> |
|
|
|
<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> |
|
|
|
<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> |
|
|
|
<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> |
|
|
|
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> |
|
|
|
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> |
|
|
|
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> |
|
|
|
<script> |
|
|
|
function toggleTheme(themeName) { |
|
|
|
document.documentElement.classList.toggle( |
|
|
|
'forced-dark', |
|
|
|
themeName === 'dark' |
|
|
|
) |
|
|
|
document.documentElement.classList.toggle( |
|
|
|
'forced-light', |
|
|
|
themeName === 'light' |
|
|
|
) |
|
|
|
} |
|
|
|
const selectedTheme = localStorage.getItem('theme') |
|
|
|
if (selectedTheme !== 'undefined') { |
|
|
|
toggleTheme(selectedTheme) |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<meta name="robots" content="noindex, nofollow"> |
|
|
|
<meta content="origin-when-cross-origin" name="referrer"> |
|
|
|
<!-- Canonical URL for SEO purposes --> |
|
|
|
<link rel="canonical" href="https://n.survol.fr/n/la-dette-technique"> |
|
|
|
|
|
|
|
<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> |
|
|
|
|
|
|
|
|
|
|
|
<article> |
|
|
|
<header> |
|
|
|
<h1>La dette technique - Carnet de notes</h1> |
|
|
|
</header> |
|
|
|
<nav> |
|
|
|
<p class="center"> |
|
|
|
<a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home"> |
|
|
|
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use> |
|
|
|
</svg> Accueil</a> • |
|
|
|
<a href="https://n.survol.fr/n/la-dette-technique" title="Lien vers le contenu original">Source originale</a> |
|
|
|
</p> |
|
|
|
</nav> |
|
|
|
<hr> |
|
|
|
<p>J’entends trop souvent parler de dette technique comme le gros monstre qui va tout manger et comme d’une faute impardonnable. Je ne le vois pas ainsi.</p> |
|
|
|
|
|
|
|
<p>D’abord, pour parler de la même chose, ce que j’appelle une dette : </p> |
|
|
|
|
|
|
|
<blockquote class="wp-block-quote"><p>La création d’une situation qui permet un gain à court terme (plus vite, moins cher, etc.) mais qui va entraîner un coût à long terme.</p></blockquote> |
|
|
|
|
|
|
|
<p>Et la dette, présentée ainsi, c’est juste un outil arriver à ses fins. J’ai au moins trois situations qui peuvent arriver relativement fréquemment : </p> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
<ol start="2"><li>« Je fais un investissement »<br>J’aurais les moyens de ne pas créer cette situation mais le gain à court terme va entrainer des bénéfices qui surpassent le coût à long terme.</li></ol> |
|
|
|
|
|
|
|
<ol start="3"><li>« Pas le choix »<br>Je sais que j’y perds mais c’est une arbitrage par rapport à une autre situation qui serait pire.</li></ol> |
|
|
|
|
|
|
|
<hr class="wp-block-separator has-alpha-channel-opacity"> |
|
|
|
|
|
|
|
<p>Je comprends que c’est frustrant pour les équipes techniques, l’impression 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> |
|
|
|
|
|
|
|
<p>C’est juste parfois quand même (souvent) le bon outil pour l’entreprise, parce que la pureté n’est pas toujours (et même rarement) la bonne stratégie.</p> |
|
|
|
|
|
|
|
<p>Plutôt que de combattre les choix de dette technique et l’utiliser comme grand épouvantail, demandez plutôt à expliciter le gain court terme, le coût long terme, et pourquoi on choisit de prendre cette dette. On arrivera peut-être parfois à la conclusion que c’est une erreur. Le reste du temps ça vous permettra de comprendre la stratégie et de vous y inscrire.</p> |
|
|
|
|
|
|
|
<p>Attention toutefois : <em>Faites de la dette, pas de la merde</em>. Les deux sont très différent.</p> |
|
|
|
|
|
|
|
<hr class="wp-block-separator has-alpha-channel-opacity"> |
|
|
|
|
|
|
|
<p>Tout ça est particulièrement vrai en startup.</p> |
|
|
|
|
|
|
|
<p>La dette c’est le modèle de base de la startup. On emprunte (via les levées de fonds) pour des gains futurs. La structure elle-même est une énorme dette. Prétendre, à l’intérieur, éviter toute dette, ça n’a pas de sens.</p> |
|
|
|
|
|
|
|
<p>C’est particulièrement vrai les premières années. On vit à crédit sur un potentiel. Il faut prouver les promesses pour toucher le crédit suivant, et ça jusqu’à avoir l’échelle suffisante pour ne plus en avoir besoin.</p> |
|
|
|
|
|
|
|
<p>Les premières années il faut trouver explorer la problématique, trouver le bon produit avec la bonne cible utilisateur, puis prouver qu’il y a une opportunité de croissance et de bénéfice en adéquation avec la mise de départ.</p> |
|
|
|
|
|
|
|
<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 utilisateur, ou à enclencher la montée de chiffre d’affaire, on crée cette dette. </p> |
|
|
|
|
|
|
|
<p>Dans une de mes expériences on m’a dit « <em>J’ai vu plein de jeunes startup échouer parce qu’elles ont pris trop de temps, je n’en ai vu aucune échouer à cause de la dette technique</em> ». </p> |
|
|
|
|
|
|
|
<p>En bon ingénieur ce n’est pas un discours qui me fait plaisir intellectuellement mais je n’ai jamais pu le démentir. La dette est juste le bon outil à ce moment là, et la dette technique n’est un problème qu’intellectuellement.</p> |
|
|
|
|
|
|
|
<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’acquérir des clients. Là on aura aussi le financement qui va avec pour embaucher des ingénieurs qui vont refaire ce qui doit l’être, et éliminer une bonne partie des travaux qu’on avait remis à plus tard. </p> |
|
|
|
|
|
|
|
<p>L’enjeu c’est d’arriver jusque là.</p> |
|
|
|
|
|
|
|
<hr class="wp-block-separator has-alpha-channel-opacity"> |
|
|
|
|
|
|
|
<p><em>Je fais une note additionnelle suite à une discussion. Je renforce le « Faites de la dette, pas de la merde ». C’est vrai autant au niveau technique qu’au niveau organisationnel.</em></p> |
|
|
|
|
|
|
|
<ul><li><em>Ne mettez pas à risque les données de vos utilisateurs</em></li><li><em>Fournissez le service et la qualité que vous promettez à vos utilisateurs</em></li><li><em>Ne faites pas payer la dette par les membres de vos équipes</em></li></ul> |
|
|
|
|
|
|
|
<p><em>Ce dernier point est majeur.</em> <em>La dette n’a pas a être transformée en pression ou charge supplémentaire pour les salariés en espérant avoir les gains sans en payer les coûts. C’est le meilleur moyen d’arriver à l’épuisement, la dépression, le burn-out, et au mieux un turn-over important. Dans tous les cas, ça ne fonctionnera pas et n’aura que des effets négatifs à la fois sur la santé des salariés et sur le fonctionnement de l’entreprise.</em></p> |
|
|
|
|
|
|
|
<p><em>S’endetter peut impliquer d’aller ensuite moins vite, de produire moins, et de réduire le périmètre ou les exigences. Faites avec : ça fait partie du choix.</em></p> |
|
|
|
|
|
|
|
<p><em>Plus loin : Les équipes ressentiront cette pression et cette charge même si on ne leur donne pas. La volonté de bien faire et l’impression de ne pas faire ce qu’il faut sont une charge psychologique significative à laquelle le management doit être extrêmement attentif.</em></p> |
|
|
|
|
|
|
|
<p><em>Le seul outil que j’ai vu fonctionner contre ça c’est expliciter la dette, la choisir ensemble en expliquant pourquoi, comment, et le plan ensuite. Quand la stratégie est partagée ça devient un choix collectif et plus une mauvaise exécution.</em></p> |
|
|
|
</article> |
|
|
|
|
|
|
|
|
|
|
|
<hr> |
|
|
|
|
|
|
|
<footer> |
|
|
|
<p> |
|
|
|
<a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home"> |
|
|
|
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use> |
|
|
|
</svg> Accueil</a> • |
|
|
|
<a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2"> |
|
|
|
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use> |
|
|
|
</svg> Suivre</a> • |
|
|
|
<a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie"> |
|
|
|
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use> |
|
|
|
</svg> Pro</a> • |
|
|
|
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail"> |
|
|
|
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use> |
|
|
|
</svg> Email</a> • |
|
|
|
<abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2"> |
|
|
|
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use> |
|
|
|
</svg> Légal</abbr> |
|
|
|
</p> |
|
|
|
<template id="theme-selector"> |
|
|
|
<form> |
|
|
|
<fieldset> |
|
|
|
<legend><svg class="icon icon-brightness-contrast"> |
|
|
|
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use> |
|
|
|
</svg> Thème</legend> |
|
|
|
<label> |
|
|
|
<input type="radio" value="auto" name="chosen-color-scheme" checked> Auto |
|
|
|
</label> |
|
|
|
<label> |
|
|
|
<input type="radio" value="dark" name="chosen-color-scheme"> Foncé |
|
|
|
</label> |
|
|
|
<label> |
|
|
|
<input type="radio" value="light" name="chosen-color-scheme"> Clair |
|
|
|
</label> |
|
|
|
</fieldset> |
|
|
|
</form> |
|
|
|
</template> |
|
|
|
</footer> |
|
|
|
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> |
|
|
|
<script> |
|
|
|
function loadThemeForm(templateName) { |
|
|
|
const themeSelectorTemplate = document.querySelector(templateName) |
|
|
|
const form = themeSelectorTemplate.content.firstElementChild |
|
|
|
themeSelectorTemplate.replaceWith(form) |
|
|
|
|
|
|
|
form.addEventListener('change', (e) => { |
|
|
|
const chosenColorScheme = e.target.value |
|
|
|
localStorage.setItem('theme', chosenColorScheme) |
|
|
|
toggleTheme(chosenColorScheme) |
|
|
|
}) |
|
|
|
|
|
|
|
const selectedTheme = localStorage.getItem('theme') |
|
|
|
if (selectedTheme && selectedTheme !== 'undefined') { |
|
|
|
form.querySelector(`[value="${selectedTheme}"]`).checked = true |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const prefersColorSchemeDark = '(prefers-color-scheme: dark)' |
|
|
|
window.addEventListener('load', () => { |
|
|
|
let hasDarkRules = false |
|
|
|
for (const styleSheet of Array.from(document.styleSheets)) { |
|
|
|
let mediaRules = [] |
|
|
|
for (const cssRule of styleSheet.cssRules) { |
|
|
|
if (cssRule.type !== CSSRule.MEDIA_RULE) { |
|
|
|
continue |
|
|
|
} |
|
|
|
// WARNING: Safari does not have/supports `conditionText`. |
|
|
|
if (cssRule.conditionText) { |
|
|
|
if (cssRule.conditionText !== prefersColorSchemeDark) { |
|
|
|
continue |
|
|
|
} |
|
|
|
} else { |
|
|
|
if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { |
|
|
|
continue |
|
|
|
} |
|
|
|
} |
|
|
|
mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) |
|
|
|
} |
|
|
|
|
|
|
|
// WARNING: do not try to insert a Rule to a styleSheet you are |
|
|
|
// currently iterating on, otherwise the browser will be stuck |
|
|
|
// in a infinite loop… |
|
|
|
for (const mediaRule of mediaRules) { |
|
|
|
styleSheet.insertRule(mediaRule.cssText) |
|
|
|
hasDarkRules = true |
|
|
|
} |
|
|
|
} |
|
|
|
if (hasDarkRules) { |
|
|
|
loadThemeForm('#theme-selector') |
|
|
|
} |
|
|
|
}) |
|
|
|
</script> |
|
|
|
</body> |
|
|
|
</html> |
