123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768 |
- <!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>
- 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,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
- <!-- Required to make a valid HTML5 document. -->
- <title>What is good code? (archive) — David Larlet</title>
- <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
- <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
- <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
- <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
- <link rel="manifest" href="/manifest.json">
- <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
- <link rel="shortcut icon" href="/static/david/icons/favicon.ico">
- <meta name="apple-mobile-web-app-title" content="David Larlet">
- <meta name="application-name" content="David Larlet">
- <meta name="msapplication-TileColor" content="#da532c">
- <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
- <meta name="theme-color" content="#f0f0ea">
- <!-- That good ol' feed, subscribe :p. -->
- <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">
-
- <meta name="robots" content="noindex, nofollow">
- <meta content="origin-when-cross-origin" name="referrer">
- <!-- Canonical URL for SEO purposes -->
- <link rel="canonical" href="http://loup-vaillant.fr/articles/good-code">
-
- <style>
- /* http://meyerweb.com/eric/tools/css/reset/ */
- html, body, div, span,
- h1, h2, h3, h4, h5, h6, p, blockquote, pre,
- a, abbr, address, big, cite, code,
- del, dfn, em, img, ins,
- small, strike, strong, tt, var,
- dl, dt, dd, ol, ul, li,
- fieldset, form, label, legend,
- table, caption, tbody, tfoot, thead, tr, th, td,
- article, aside, canvas, details, embed,
- figure, figcaption, footer, header, hgroup,
- menu, nav, output, ruby, section, summary,
- time, mark, audio, video {
- margin: 0;
- padding: 0;
- border: 0;
- font-size: 100%;
- font: inherit;
- vertical-align: baseline;
- }
- /* HTML5 display-role reset for older browsers */
- article, aside, details, figcaption, figure,
- footer, header, hgroup, menu, nav, section { display: block; }
- body { line-height: 1; }
- blockquote, q { quotes: none; }
- blockquote:before, blockquote:after,
- q:before, q:after {
- content: '';
- content: none;
- }
- table {
- border-collapse: collapse;
- border-spacing: 0;
- }
-
- /* http://practicaltypography.com/equity.html */
- /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
- /* https://www.filamentgroup.com/lab/js-web-fonts.html */
- @font-face {
- font-family: 'EquityTextB';
- src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
- url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
- font-weight: 300;
- font-style: normal;
- font-display: swap;
- }
- @font-face {
- font-family: 'EquityTextB';
- src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
- url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
- font-weight: 300;
- font-style: italic;
- font-display: swap;
- }
- @font-face {
- font-family: 'EquityTextB';
- src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
- url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
- font-weight: 700;
- font-style: normal;
- font-display: swap;
- }
-
- @font-face {
- font-family: 'ConcourseT3';
- src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
- url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
- font-weight: 300;
- font-style: normal;
- font-display: swap;
- }
-
-
- /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
- body {
- /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
- font-family: "EquityTextB", Palatino, serif;
- background-color: #f0f0ea;
- color: #07486c;
- font-kerning: normal;
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: subpixel-antialiased;
- text-rendering: optimizeLegibility;
- font-variant-ligatures: common-ligatures contextual;
- font-feature-settings: "kern", "liga", "clig", "calt";
- }
- pre, code, kbd, samp, var, tt {
- font-family: 'TriplicateT4c', monospace;
- }
- em {
- font-style: italic;
- color: #323a45;
- }
- strong {
- font-weight: bold;
- color: black;
- }
- nav {
- background-color: #323a45;
- color: #f0f0ea;
- display: flex;
- justify-content: space-around;
- padding: 1rem .5rem;
- }
- nav:last-child {
- border-bottom: 1vh solid #2d7474;
- }
- nav a {
- color: #f0f0ea;
- }
- nav abbr {
- border-bottom: 1px dotted white;
- }
-
- h1 {
- border-top: 1vh solid #2d7474;
- border-bottom: .2vh dotted #2d7474;
- background-color: #e3e1e1;
- color: #323a45;
- text-align: center;
- padding: 5rem 0 4rem 0;
- width: 100%;
- font-family: 'ConcourseT3';
- display: flex;
- flex-direction: column;
- }
- h1.single {
- padding-bottom: 10rem;
- }
- h1 span {
- position: absolute;
- top: 1vh;
- left: 20%;
- line-height: 0;
- }
- h1 span a {
- line-height: 1.7;
- padding: 1rem 1.2rem .6rem 1.2rem;
- border-radius: 0 0 6% 6%;
- background: #2d7474;
- font-size: 1.3rem;
- color: white;
- text-decoration: none;
- }
- h2 {
- margin: 4rem 0 1rem;
- border-top: .2vh solid #2d7474;
- padding-top: 1vh;
- }
- h3 {
- text-align: center;
- margin: 3rem 0 .75em;
- }
- hr {
- height: .4rem;
- width: .4rem;
- border-radius: .4rem;
- background: #07486c;
- margin: 2.5rem auto;
- }
- time {
- display: bloc;
- margin-left: 0 !important;
- }
- ul, ol {
- margin: 2rem;
- }
- ul {
- list-style-type: square;
- }
- a {
- text-decoration-skip-ink: auto;
- text-decoration-thickness: 0.05em;
- text-underline-offset: 0.09em;
- }
- article {
- max-width: 50rem;
- display: flex;
- flex-direction: column;
- margin: 2rem auto;
- }
- article.single {
- border-top: .2vh dotted #2d7474;
- margin: -6rem auto 1rem auto;
- background: #f0f0ea;
- padding: 2rem;
- }
- article p:last-child {
- margin-bottom: 1rem;
- }
- p {
- padding: 0 .5rem;
- margin-left: 3rem;
- }
- p + p,
- figure + p {
- margin-top: 2rem;
- }
-
- blockquote {
- background-color: #e3e1e1;
- border-left: .5vw solid #2d7474;
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 1rem;
- margin: 1.5rem;
- }
- blockquote cite {
- font-style: italic;
- }
- blockquote p {
- margin-left: 0;
- }
-
- figure {
- border-top: .2vh solid #2d7474;
- background-color: #e3e1e1;
- text-align: center;
- padding: 1.5rem 0;
- margin: 1rem 0 0;
- font-size: 1.5rem;
- width: 100%;
- }
- figure img {
- max-width: 250px;
- max-height: 250px;
- border: .5vw solid #323a45;
- padding: 1px;
- }
- figcaption {
- padding: 1rem;
- line-height: 1.4;
- }
- aside {
- display: flex;
- flex-direction: column;
- background-color: #e3e1e1;
- padding: 1rem 0;
- border-bottom: .2vh solid #07486c;
- }
- aside p {
- max-width: 50rem;
- margin: 0 auto;
- }
-
- /* https://fvsch.com/code/css-locks/ */
- p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
- font-size: 1rem;
- line-height: calc( 1.5em + 0.2 * 1rem );
- }
- h1 {
- font-size: 1.9rem;
- line-height: calc( 1.2em + 0.2 * 1rem );
- }
- h2 {
- font-size: 1.6rem;
- line-height: calc( 1.3em + 0.2 * 1rem );
- }
- h3 {
- font-size: 1.35rem;
- line-height: calc( 1.4em + 0.2 * 1rem );
- }
- @media (min-width: 20em) {
- /* The (100vw - 20rem) / (50 - 20) part
- resolves to 0-1rem, depending on the
- viewport width (between 20em and 50em). */
- p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
- font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
- line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
- margin-left: 0;
- }
- h1 {
- font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
- line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
- }
- h2 {
- font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
- line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
- }
- h3 {
- font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
- line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
- }
- }
- @media (min-width: 50em) {
- /* The right part of the addition *must* be a
- rem value. In this example we *could* change
- the whole declaration to font-size:2.5rem,
- but if our baseline value was not expressed
- in rem we would have to use calc. */
- p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
- font-size: calc( 1rem + .6 * 1rem );
- line-height: 1.5em;
- }
- p, li, pre, details {
- margin-left: 3rem;
- }
- h1 {
- font-size: calc( 1.9rem + 1.5 * 1rem );
- line-height: 1.2em;
- }
- h2 {
- font-size: calc( 1.5rem + 1.5 * 1rem );
- line-height: 1.3em;
- }
- h3 {
- font-size: calc( 1.35rem + 1.5 * 1rem );
- line-height: 1.4em;
- }
- figure img {
- max-width: 500px;
- max-height: 500px;
- }
- }
-
- figure.unsquared {
- margin-bottom: 1.5rem;
- }
- figure.unsquared img {
- height: inherit;
- }
-
-
-
- @media print {
- body { font-size: 100%; }
- a:after { content: " (" attr(href) ")"; }
- a, a:link, a:visited, a:after {
- text-decoration: underline;
- text-shadow: none !important;
- background-image: none !important;
- background: white;
- color: black;
- }
- abbr[title] { border-bottom: 0; }
- abbr[title]:after { content: " (" attr(title) ")"; }
- img { page-break-inside: avoid; }
- @page { margin: 2cm .5cm; }
- h1, h2, h3 { page-break-after: avoid; }
- p3 { orphans: 3; widows: 3; }
- img {
- max-width: 250px !important;
- max-height: 250px !important;
- }
- nav, aside { display: none; }
- }
-
- ul.with_columns {
- column-count: 1;
- }
- @media (min-width: 20em) {
- ul.with_columns {
- column-count: 2;
- }
- }
- @media (min-width: 50em) {
- ul.with_columns {
- column-count: 3;
- }
- }
- ul.with_two_columns {
- column-count: 1;
- }
- @media (min-width: 20em) {
- ul.with_two_columns {
- column-count: 1;
- }
- }
- @media (min-width: 50em) {
- ul.with_two_columns {
- column-count: 2;
- }
- }
-
- .gallery {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-around;
- }
- .gallery figure img {
- margin-left: 1rem;
- margin-right: 1rem;
- }
- .gallery figure figcaption {
- font-family: 'ConcourseT3'
- }
-
- footer {
- font-family: 'ConcourseT3';
- display: flex;
- flex-direction: column;
- border-top: 3px solid white;
- padding: 4rem 0;
- background-color: #07486c;
- color: white;
- }
- footer > * {
- max-width: 50rem;
- margin: 0 auto;
- }
- footer a {
- color: #f1c40f;
- }
- footer .avatar {
- width: 200px;
- height: 200px;
- border-radius: 50%;
- float: left;
- -webkit-shape-outside: circle();
- shape-outside: circle();
- margin-right: 2rem;
- padding: 2px 5px 5px 2px;
- background: white;
- border-left: 1px solid #f1c40f;
- border-top: 1px solid #f1c40f;
- border-right: 5px solid #f1c40f;
- border-bottom: 5px solid #f1c40f;
- }
- </style>
-
- <h1>
- <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
- What is good code? (archive)
- <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
- </h1>
- <section>
- <article>
- <h3><a href="http://loup-vaillant.fr/articles/good-code">Source originale du contenu</a></h3>
- <p><strong>Good code is cheap code that meets our needs. The cheaper the
- better.</strong></p>
- <p>Well, assuming code is just a means to an end. Sometimes we want to
- enjoy the code for itself. Most of the time however, the overriding
- concern is the <em>bottom line</em>.</p>
- <p>I could almost stop right there, but I feel like I should elaborate.</p>
- <h2>Good (enough) programs</h2>
- <p>There is the code, and there is the program. Code is read by a human.
- Programs are interpreted by computers (or virtual machines).</p>
- <p>Programs have many requirements, most of which are domain specific.
- Some requirements however are universal:</p>
- <ul>
- <li>
- <p><strong>Correctness.</strong> The program must not have too many bugs. It would
- make it worse than useless.</p>
- </li>
- <li>
- <p><strong>Performance.</strong> The program must not be too slow. It would waste
- the users' time, make them angry, or even behave incorrectly (in the
- case of real time software).</p>
- </li>
- <li>
- <p><strong>Frugality.</strong> The program must not use too much resources. We have
- plenty of CPU memory… but they still have limits. Use too much
- resources and your program will drain the battery of your phone,
- waste your bandwidth, or plain stop working.</p>
- </li>
- </ul>
- <p>We don't always think of these requirements explicitly. Still, they
- must be met, and they have a cost. Want more performance or waste
- less resources? Your code will be more complex. Want less bugs? You
- will have to spend more time shaking them out.</p>
- <p>Once a program do meet all its requirements however, it is good
- enough. There is little point in trying to make it even better. With
- that goal set, the only thing left to optimise is the cost of code.</p>
- <h2>Code as a dependency graph</h2>
- <p>Before we can hope to estimate the cost of code, we must understand a
- few things about its structure.</p>
- <p>Basically, your code is made up of little chunks that can fit in your
- head (if it didn't, you couldn't have written it in the first place).
- Most of the time, a chunk is a function âor a method, or a procedure.
- Each such chunk is a node of your graph. And their dependencies form
- the edges.</p>
- <p>Like in any directed graph, when you have N nodes, you can have up to
- N² edges. This has important consequences when estimating the cost of
- code. The number of edges, relative to the number of nodes is called
- the <em>density</em> of the graph. Dense graphs have many edges (close to
- N²). Sparse graphs have relatively few edges (close to N).</p>
- <p>Each chunk of code have 2 levels of understanding: interface, and
- implementation.</p>
- <ul>
- <li>If you just want to <em>use</em> a piece of code, understanding its
- interface is enough.</li>
- <li>If you want to <em>contribute</em> to a piece of code, you have to
- understand its implementation. Which requires understanding the
- interface of all the direct dependencies.</li>
- </ul>
- <p>A few caveats, however</p>
- <ul>
- <li>
- <p>Dependencies aren't always obvious. With purely functional code,
- the dependency graph and the call graph are one and the same. On
- the other hand, things like shared state create more edges.
- <em>Implicit</em> edges. Those implicit dependencies are often easy to
- miss.</p>
- </li>
- <li>
- <p>To understand a properly documented interface, you generally don't
- have to look at anything else. Of course, some <em>aren't</em> properly
- documented, forcing you to check the implementation… This little
- dance can go coup<a href="https://en.wikipedia.org/wiki/Transitive_closure" title="Transitive closure (Wikipedia)">pretty far</a>).</p>
- </li>
- </ul>
- <h2>The cost of code</h2>
- <p>Basically, code costs however much time we spend on it. I personally
- break it down to 3 activities:</p>
- <ul>
- <li><strong>Typing.</strong> We need to write the code.</li>
- <li><strong>Understanding.</strong> We can't type randomly.</li>
- <li><strong>Coordination.</strong> We should avoid duplicate or incompatible work.</li>
- </ul>
- <p>Some would talk about development, maintenance, testing… But this is
- not an interesting way to break things down. Development and
- maintenance have a <em>lot</em> in common. Even testing involves writing and
- reading code. And all three activities involve typing, understanding,
- and coordination.</p>
- <h3>Typing</h3>
- <p>It is generally admitted that we spend much more time thinking about
- our code than we do typing it down. I still find it interesting
- however, because it provides an obvious lower bound. Code <em>cannot</em>
- cost less than the time taken to type it.</p>
- <p>Imagine a 20,000 lines program. By current standards, this is not a
- big program. If you were to print it, it would fit in a medium-sized
- book: 400 pages, 50 lines per page. Prose would typically have about
- 12 words per line, but lines of code are shorter. Let's say 6 words
- per line. That's 120,000 words.</p>
- <p>Assuming you type 50 words per minute (a fair speed), typing it all
- down would take 40 hours. A full work week of mindless typing, and
- the program is not even "big". I say current standards are insane.</p>
- <h3>Understanding</h3>
- <p>You can't write code randomly. You need to know what you're doing.
- More specifically, you need to understand three things:</p>
- <ul>
- <li>New code (that you are about to write).</li>
- <li>Existing code. (<em>This</em> is why code is so expensive.)</li>
- <li>Prerequisites. (Required background knowledge.)</li>
- </ul>
- <h4>New code</h4>
- <p>The depth of understanding required to write new code is significant.
- This is going to take longer than 50 words per minute. Those 20,000
- lines aren't going to write themselves in a week. Nevertheless,
- assuming you work on this code piecemeal (it is impossible not to),
- the time taken to understand new code is still proportional to the
- length of that code.</p>
- <p>Oh, right. <em>Length.</em></p>
- <p>Intuitively, the time required to understand a piece of code is
- proportional to its <em>complexity</em>, not its length. Length, measured in
- lines of code, is an incredibly crude proxy. But it works. It is
- strongly correlated with most complexity measures we came up with so
- far, and those don't have more predictive power than length alone.
- For instance, if you know a program's length, learning its cyclomatic
- complexity won't tell you anything more about things like time to
- completion or number of bugs.</p>
- <p>Besides a <a href="https://en.wikipedia.org/wiki/Code_golf" title="Code Golf (Wikipedia)">few exceptions</a>, complexity and length are roughly
- proportional. Of two chunks of code solving the same problem, if one
- is twice as big, it is probably twice as complex. Roughly.
- Amazingly, this heuristic works across languages. Terser languages
- make the code cheaper. (Again, we may have some <a href="https://en.wikipedia.org/wiki/APL_%28programming_language%29" title="APL (Wikipedia)">exceptions</a>).</p>
- <h4>Existing code</h4>
- <p>Any new code you write will use, or be used by, existing code. You
- need to understand some of the old code before you write anything new.
- Unless you're just starting your project, but you won't start forever.</p>
- <p>The ideal case is when you work alone, and everything you have written
- so far is still fresh in your mind. Understanding it <em>again</em> costs
- you nothing.</p>
- <p>Well, that never happens. You forget about code you have written long
- ago. You don't work alone, and must understand code <em>others</em> have
- written. Or maybe you arrived late in the project. Now the density
- of your dependency graph matters a great deal:</p>
- <ul>
- <li>
- <p>If the graph is sparse, you'll rarely have to understand more than a
- few dependencies to contribute. The cost is not nil, but it can
- still be proportional to the size of the code base.</p>
- </li>
- <li>
- <p>If the graph is dense however, you may have to understand many
- things before you do anything. In the worst case, that cost can
- rise up to the <em>square</em> of the size of code base. Even if no graph
- gets <em>that</em> dense, density can still kill your project.</p>
- </li>
- </ul>
- <h4>Prerequisites</h4>
- <p>This one is highly context specific. Common knowledge costs nothing,
- because everyone knows it (by definition), and some knowledge is
- required to merely understand the problem.</p>
- <p>Some background knowledge however relates to <em>how</em> you solve your
- problem. There are different ways to write a program, and some are
- more… esoteric than others. Take for instance that little
- <a href="../projects/metacompilers">metacompiler</a> I have written in Haskell. Very handy when you need
- to parse some textual data format. On the other hand, you will need
- to know about top-down parsing, parsing expression grammars, parser
- combinators, monads, applicative functors… are you <em>sure</em> you want to
- learn all that just to parse some text? By the way, I no longer
- maintain this tool.</p>
- <p>Required background knowledge is the reason why lambdas and recursion
- are often frowned upon in mainstream settings. The typical OOP
- programmer is not used to this eldritch stuff from <a href="../tutorials/from-imperative-to-functional">FP hell</a>. Not
- yet, at least.</p>
- <p>I don't have a magic bullet for this problem. If you don't know some
- useful concept or external tool, you can't use it unless you spend
- time to learn it. Good luck with the cost-benefit analysis.</p>
- <h3>Coordination</h3>
- <p><em>(I have worked in several teams, but never lead one. Take this
- section with a grain of salt.)</em></p>
- <p>Most of the time, you will work in a team. You have to. Most
- programmers can't do everything a full system requires. Domain
- specific algorithms, user interface, network, database, security… Even
- if you're one of those miraculous full stack experts, you probably
- won't have the time to code it by yourself.</p>
- <p>Hence coordination. In the worst case, everyone communicates with
- everyone else all the time. The cost of that overhead is quadratic
- with respect to the size of the team. Not a problem with 4 people.
- Quite a mess with 40. In practice, when teams grow large enough, two
- things inevitably happen:</p>
- <ul>
- <li>Someone ends up leading the team. Most communications go through
- that person. This brings the amount of communication back to linear
- (mostly), but it is all concentrated on one person.</li>
- <li>When the team gets <em>real</em> big, it gets divided into sub-teams, each
- with their own leader. That means less overhead for the main
- leader, without increasing the communication overhead too much.</li>
- </ul>
- <p>(If neither happens, communication overhead explodes and little gets
- done.)</p>
- <p>How that relates to code is explained by <a href="https://en.wikipedia.org/w/index.php?title=Conway%27s_law" title="Wikipedia">Conway's law:</a></p>
- <p>> organizations which design systems … are constrained to produce
- > designs which are copies of the communication structures of these
- > organizations</p>
- <p>This works both ways. The organisation of your team will shape the
- code it produces, and the code you ask of your team will shape its
- organisation. You just can't build a big monolith with separate
- sub-teams. Either the teams will communicate a lot (effectively
- merging them together), or they will come up with a more modular
- design.</p>
- <h2>Driving down the costs</h2>
- <p>From the above we can deduce 4 levers to reduce the cost of code:</p>
- <ul>
- <li>
- <p><strong>Write less code.</strong> Less code is just plain cheaper. Enough said.</p>
- </li>
- <li>
- <p><strong>Keep it modular.</strong> Make your dependency graph as sparse as you
- can. It will reduce communication overheads, let your team work in
- parallel, and reduce the amount of code you need to understand
- before you write something new.</p>
- </li>
- <li>
- <p><strong>Ponder your external dependencies.</strong> External tools are a tough
- call. While they can massively reduce the amount of code you need
- to write, they can have a steep learning curve, or a significant
- maintenance burden. Make sure your external dependencies are worth
- your while.</p>
- </li>
- <li>
- <p><strong>Use fewer concepts.</strong> If your code requires less background
- knowledge, the time saved not learning it can be put to good use.
- Be careful, though. The right concepts often makes your code
- shorter, and are often widely applicable.</p>
- </li>
- </ul>
- <p>Pretty standard stuff. I just want to stress one thing: those 4
- levers are probably the <em>only</em> ones that matter. Found a new
- technique, a new language, a new methodology? It has to do one of
- those:</p>
- <ul>
- <li>Reduce the amount of code;</li>
- <li>increase its modularity;</li>
- <li>replace or subsume heavier external dependencies;</li>
- <li>or <em>maybe</em> reduce the amount of required background knowledge.</li>
- </ul>
- <p>Otherwise it won't reduce your costs.</p>
- </article>
- </section>
-
-
- <nav id="jumpto">
- <p>
- <a href="/david/blog/">Accueil du blog</a> |
- <a href="http://loup-vaillant.fr/articles/good-code">Source originale</a> |
- <a href="/david/stream/2019/">Accueil du flux</a>
- </p>
- </nav>
-
- <footer>
- <div>
- <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
- <p>
- Bonjour/Hi!
- Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
- Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
- </p>
- <p>
- Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
- </p>
-
- <p>
- Voici quelques articles choisis :
- <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
- <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
- <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
- <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
- <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
- <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
- <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
- <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
- <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
- <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
- <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
- <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
- <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
- <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
- <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
- et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
- </p>
- <p>
- On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
- </p>
- <p>
- Je ne traque pas ta navigation mais mon
- <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
- conserve des logs d’accès.
- </p>
- </div>
- </footer>
- <script type="text/javascript">
- ;(_ => {
- const jumper = document.getElementById('jumper')
- jumper.addEventListener('click', e => {
- e.preventDefault()
- const anchor = e.target.getAttribute('href')
- const targetEl = document.getElementById(anchor.substring(1))
- targetEl.scrollIntoView({behavior: 'smooth'})
- })
- })()
- </script>
|