davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292
							<!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>Keep it simple, stupid le plus longtemps possible (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://sklein.xyz/garden/020-keep-it-simple-stupid-le-plus-longtemps-possible/">

<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>Keep it simple, stupid le plus longtemps possible</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://sklein.xyz/garden/020-keep-it-simple-stupid-le-plus-longtemps-possible/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>Depuis quelques années, j’utilise les mots suivants pour décrire mon mindset de développement :</p>
<blockquote>
<p>« Je suis au maximum le principe KISS (<a href="https://fr.wikipedia.org/wiki/Principe_KISS">Keep it simple, stupid</a>), j’écris le code le plus direct possible
et quand j’ai trop de “douleur” alors je refactor mon code et j’y ajoute le minimum de sophistication indispensable »</p>
</blockquote>

<p>Ici j’utilise le mot “douleur” dans le sens de <a href="https://hn.algolia.com/?dateRange=all&amp;page=0&amp;prefix=false&amp;query=pain%20point&amp;sort=byPopularity&amp;type=story">“a pain point”</a> en anglais : quelque chose de casse-pieds, pénibilité, grosse difficulté…</p>
<h2 id="partie-1-la-quete-du-code-parfait" tabindex="-1">Partie 1 : la quête du code “parfait” </h2>
<p>Pendant la plus grande première partie de ma vie de développeur, j’ai essayé d’écrire le code le plus “propre” possible.</p>
<p>Cela passait par :</p>
<ul>
<li>Découper le code en petites fonctions</li>
<li>Éviter toute duplication de code (mon plus grand combat était le <a href="https://en.wikipedia.org/wiki/Copy-and-paste_programming">copy-and-paste programming</a>, j’ai embêté beaucoup de monde avec cela)</li>
<li>Organiser le plus logiquement possible l’arborescence des dossiers</li>
<li>Créer le maximum de classes (programmation objet) avec le maximum de niveau d’héritage (à l’époque c’était cool de faire de l’héritage)</li>
<li>Utiliser les <a href="https://en.wikipedia.org/wiki/Design_Patterns">Design Patterns</a> (j’ai aussi creusé la <a href="https://fr.wikipedia.org/wiki/Programmation_orient%C3%A9e_aspect">programmation orientée aspect</a>…)</li>
<li><a href="https://en.wikipedia.org/wiki/Don%27t_repeat_yourself">Don’t repeat yourself</a></li>
<li>Découper mon projet en de petits projets ou librairies réutilisables</li>
<li>Multiplier le nombres de repositories (Git…)</li>
<li>Écrire du code pérenne dans le temps</li>
<li>J’essayais d’écrire tout de suite le code dans sa version finale, devoir intervenir à nouveau sur du code était pour moi un échec, la preuve d’un mauvais choix de design.</li>
</ul>
<p>En résumé, un beau code était pour moi un code “intelligent” avec beaucoup de sophistication.</p>
<h2 id="partie-2-la-prise-de-conscience-le-trop-de-tout" tabindex="-1">Partie 2 : la prise de conscience, le “trop de tout” </h2>
<p>Il y a un peu moins de dix ans, j’ai commencé à prendre le chemin inverse, quand j’ai réalisé que je passais mon temps à chercher le code “parfait”.</p>
<ul>
<li>je me suis rendu compte que je passais énormément de temps à découper mon code en petites fonctions, ce qui impliquait :
<ul>
<li>se creuser la tête pour trouver des noms à ces fonctions</li>
<li>de savoir où les placer, dans quels fichiers, dans quels sous dossiers, trouver des noms logiques à ces fichiers et ces dossiers</li>
<li>de réorganiser encore et encore le découpage, le naming au fur et à mesure de l’évolution de l’application</li>
</ul>
</li>
<li>je me suis rendu compte qu’à force d’éviter la duplication de code :
<ul>
<li>que j’avais un code de plus en plus difficile à comprendre</li>
<li>qu’il fallait énormément de temps pour une nouvelle personne pour intervenir sur mon code</li>
</ul>
</li>
<li>j’ai accepté (par expérience) que le code était jetable et que ce n’était pas un échec s’il avait été utile pendant une certaine durée</li>
</ul>
<p>Mon but était-il de faire du code ou de créer un produit rapidement tout en étant de qualité d’un point de vue fonctionnel ?</p>
<h3 id="quest-ce-qui-ma-aide-a-prendre-ce-recul" tabindex="-1">Qu’est-ce qui m’a aidé à prendre ce recul ? </h3>
<h4 id="des-echecs" tabindex="-1">Des échecs </h4>
<p>De 2007 à 2013 j’ai poursuivi la quête du <a href="https://en.wikipedia.org/wiki/Don%27t_repeat_yourself">Don’t repeat yourself</a>, de <a href="https://fr.wikipedia.org/wiki/Pas_de_balle_en_argent">« la balle d’argent »</a> !</p>
<p>Influencé par <a href="https://fr.wikipedia.org/wiki/Ruby_on_Rails">Ruby On Rails</a>, <a href="https://fr.wikipedia.org/wiki/Django_(framework)">Django</a>,
mon rêve pour améliorer ma productivité était de générer automatiquement les applications à partir du modèle de données et des informations de paramétrages des UX.</p>
<p>Ce fut un échec, un <a href="https://github.com/stephane-klein/personnal-notebook/blob/master/003-ne-tonds-pas-de-yaks.md">Yak!</a> perpétuel !</p>
<p>Je passais la majorité de mon temps à :</p>
<ul>
<li>étudier, comprendre les Framework, sélectionner le “meilleur”</li>
<li>embrasser toujours plus de complexité en écrivant des extensions, des plugins pour traiter mes cas particuliers</li>
<li>modifier mes projets pour suivre la monté en version des frameworks</li>
<li>trouver des solutions pour contourner les bugs des frameworks</li>
</ul>
<p>Je me suis trouvé de plus en plus dans des situations où je passais par exemple plus d’une semaine pour modifier un cas particulier d’un simple champ select html,
chose qui m’aurait pris 30min sans framework, sans toutes les couches de magies.</p>
<p>À cela s’ajoute en équipe, les heures et les heures de <a href="https://fr.wikipedia.org/wiki/Troll_(Internet)">trolls</a> de choix de framework.<br>
Chaque développeur a ses préférences, pour tel ou tel framework et tout cela est parfaitement argumentable, car ils ont tous des forces et faiblesses.</p>
<p>C’est suite à cette expérience que j’ai très peur de bâtir une application sur des solutions comme <a href="https://github.com/marmelab/react-admin">React Admin</a>, <a href="https://www.forestadmin.com/">Forest Admin</a> si je sais que je vais devoir les adapter (solutions qui peuvent être très bien pour faire un <a href="https://fr.wikipedia.org/wiki/Preuve_de_concept">POC</a> ou un <a href="https://fr.wikipedia.org/wiki/Produit_minimum_viable">MVP</a>), j’ai très peur de tomber dans un énorme <a href="https://github.com/stephane-klein/personnal-notebook/blob/master/003-ne-tonds-pas-de-yaks.md">Yak!</a>.</p>
<h4 id="des-personnes" tabindex="-1">Des personnes </h4>
<p>Des rencontres, par exemples :</p>
<ul>
<li><a href="https://twitter.com/athoune">Mathieu Lecarme</a> qui m’a dit une fois « j’ai besoin d’intervenir sur …, je constate que c’est de l’horlogerie fine, j’ai besoin d’aide », je me suis dit que j’avais codé quelque chose de bien trop compliqué</li>
<li>Je me souviens de la quête vers le minimaliste dans le code de <a href="https://larlet.fr/david/blog/">David Larlet</a>
<ul>
<li>Est-ce qu’il est possible d’enlever des couches dans la stack ?</li>
</ul>
</li>
<li><a href="https://twitter.com/plafoucriere">Philippe Lafoucrière</a> qui m’a poussé vers du minimalisme, de grosse remise en question en contribuant au code source de Gemnasium
<ul>
<li>Est-ce que mon ORM me fait vraiment gagner du temps ?</li>
<li>Est-ce que je peux me passer de cette librairie ?</li>
</ul>
</li>
</ul>
<p>Ces deux dernières personnes m’ont poussé à réfléchir si je pouvais supprimer des couches, enlever des choses.</p>
<blockquote>
<p>Il semble que la perfection soit atteinte non quand il n’y a plus rien à ajouter, mais quand il n’y a plus rien à retrancher. – <a href="https://fr.wikiquote.org/wiki/Perfection">Antoine de Saint-Exupéry</a></p>
</blockquote>
<h4 id="linfluence-culturelle-de-technos" tabindex="-1">L’influence culturelle de technos </h4>
<p>Depuis 15 ans, je suis très influencé par <a href="https://fr.wikipedia.org/wiki/Zen_de_Python">les 19 principes du Zen de Python</a>, tout particulièrement :</p>
<blockquote>
<ul>
<li>Préfère :
<ul>
<li>l’explicite à l’implicite,</li>
<li>le déroulé à l’imbriqué,</li>
</ul>
</li>
<li>Prends en compte la lisibilité.</li>
<li>Mais, à la pureté, privilégie l’aspect pratique.</li>
<li>Face à l’ambiguïté, à deviner ne te laisse pas aller.</li>
</ul>
</blockquote>
<p>Les choix minimalistes avec peu de sophistication du langage <a href="https://en.wikipedia.org/wiki/Go_(programming_language)">Go</a> a conforté la direction <a href="https://fr.wikipedia.org/wiki/Principe_KISS">KISS</a>.</p>
<h2 id="partie-3-prise-de-decision-le-code-direct-du-code-stupide" tabindex="-1">Partie 3 : prise de décision, le code direct, du code “stupide” </h2>
<p>Depuis quelques années, j’essaie d’écrire un code le plus direct possible.</p>
<p>Mon objectif : diminuer au maximum ma <a href="https://fr.wikipedia.org/wiki/Charge_cognitive">charge cognitive</a>.</p>
<p>J’essaie d’ajouter, une librairie, un service ou une couche d’abstraction uniquement si c’est nécessaire fonctionnellement ou si j’ai beaucoup de “douleur” avec la solution actuelle.</p>
<p>J’essaie de garder un code le plus flat possible (<a href="https://www.thepythoncorner.com/2017/12/the-art-of-avoiding-nested-code/">The art of avoiding nested code</a>, <a href="https://medium.com/@ankushchoubey/clean-code-1-flat-is-better-than-nested-leave-when-not-okay-c09ba74090ef">Flat is better than nested</a>, <a href="http://matthewrocklin.com/blog/work/2019/06/23/avoid-indirection">Avoid Indirection in Code for human readability</a>)</p>
<p>J’essaie de découper mon code uniquement si j’ai trop de “douleur” ou si cela apporte de la valeur fonctionnelle, exemple :</p>
<ul>
<li>je crée une fonction si j’ai besoin de la tester dans un test unitaire, ce qui fini par être le cas si j’ai trop de difficulté sur une section de code</li>
<li>je crée une fonction pour éviter de la duplication en suivant la règle <a href="https://en.wikipedia.org/wiki/Rule_of_three_(computer_programming)">« Rule of three »</a></li>
</ul>

<h2>Ressources</h2>
<ul>
<li><a href="https://en.wikipedia.org/wiki/You_aren%27t_gonna_need_it">YAGNI</a> (You aren’t gonna need it)</li>
<li><a href="https://en.wikipedia.org/wiki/Overengineering">Overengineering</a></li>
<li><a href="https://en.wikipedia.org/wiki/KISS_principle">KISS principle</a></li>
<li><a href="https://en.wikipedia.org/wiki/Don%27t_repeat_yourself">Don’t repeat yourself</a></li>
<li><a href="https://en.wikipedia.org/wiki/Duplicate_code">Duplicate code</a></li>
<li><a href="https://en.wikipedia.org/wiki/Code_reuse">Code reuse</a></li>
<li><a href="https://en.wikipedia.org/wiki/Database_normalization">Database normalization</a></li>
<li><a href="https://en.wikipedia.org/wiki/Rule_of_three_(computer_programming)">Rule of three (computer programming)</a></li>
<li><a href="https://en.wikipedia.org/wiki/Separation_of_concerns">Separation of concerns</a></li>
<li><a href="https://en.wikipedia.org/wiki/Single_source_of_truth">Single source of truth</a></li>
<li><a href="https://josebrowne.com/on-coding-ego-and-attention/">On Coding, Ego and Attention</a></li>
</ul>
</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>