davidbgk
/
larlet-fr-david
İzle 1
Yıldızla 0
Çatalla 0
Kod Sürümler 0 Aktivite
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
893 İşlemeler
1 Dal
Ağaç: 095649a126
Dallar Biçim İmleri
${ item.name }
Branş ${ searchTerm } oluştur
'095649a126'den
${ noResults }
larlet-fr-david/david/blog/2013/tdd-conception-emergente/index.html

index.html 30KB
Ham Blame Geçmiş

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826 
  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,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>TDD et conception émergente — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <!-- Canonical URL for SEO purposes -->

  29.   <link rel="canonical" href="https://larlet.fr/david/blog/2013/tdd-conception-emergente/">

  30.   <!-- SEO/Semantic metadata -->

  31.   <meta name="description" content="Il n’y a qu’en codant le client ET le serveur d’une API Web en parallèle que j’en arrive à de la conception émergente." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="Il n’y a qu’en codant le client ET le serveur d’une API Web en parallèle que j’en arrive à de la conception émergente." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="TDD et conception émergente" />

  34.   <meta name="twitter:card" content="summary" />

  35.   <meta name="twitter:creator" content="@davidbgk" />

  36.   <meta name="twitter:url" property="og:url" content="https://larlet.fr/david/blog/2013/tdd-conception-emergente/" />

  37.   <meta property="og:type" content="article" />

  38.   <meta property="og:site_name" content="David Larlet (@davidbgk)" />

  39. 

  40.   <meta name="twitter:image" property="og:image" itemprop="image" content="https://larlet.fr/static/david/david-larlet-avatar-thumbnail.jpg" />

  41. 

  42. 

  43. <style>

  44. /* http://meyerweb.com/eric/tools/css/reset/ */

  45. html, body, div, span,

  46. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  47. a, abbr, address, big, cite, code,

  48. del, dfn, em, img, ins,

  49. small, strike, strong, tt, var,

  50. dl, dt, dd, ol, ul, li,

  51. fieldset, form, label, legend,

  52. table, caption, tbody, tfoot, thead, tr, th, td,

  53. article, aside, canvas, details, embed,

  54. figure, figcaption, footer, header, hgroup,

  55. menu, nav, output, ruby, section, summary,

  56. time, mark, audio, video {

  57.   margin: 0;

  58.   padding: 0;

  59.   border: 0;

  60.   font-size: 100%;

  61.   font: inherit;

  62.   vertical-align: baseline;

  63. }

  64. /* HTML5 display-role reset for older browsers */

  65. article, aside, details, figcaption, figure,

  66. footer, header, hgroup, menu, nav, section { display: block; }

  67. body { line-height: 1; }

  68. blockquote, q { quotes: none; }

  69. blockquote:before, blockquote:after,

  70. q:before, q:after {

  71.   content: '';

  72.   content: none;

  73. }

  74. table {

  75.   border-collapse: collapse;

  76.   border-spacing: 0;

  77. }

  78. 

  79. /* http://practicaltypography.com/equity.html */

  80. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  81. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  82. @font-face {

  83.   font-family: 'EquityTextB';

  84.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  85.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  86.   font-weight: 300;

  87.   font-style: normal;

  88.   font-display: swap;

  89. }

  90. @font-face {

  91.   font-family: 'EquityTextB';

  92.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  93.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  94.   font-weight: 300;

  95.   font-style: italic;

  96.   font-display: swap;

  97. }

  98. @font-face {

  99.   font-family: 'EquityTextB';

  100.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  101.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  102.   font-weight: 700;

  103.   font-style: normal;

  104.   font-display: swap;

  105. }

  106. 

  107. @font-face {

  108.   font-family: 'ConcourseT3';

  109.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  110.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  111.   font-weight: 300;

  112.   font-style: normal;

  113.   font-display: swap;

  114. }

  115. 

  116. 

  117. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  118. body {

  119.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  120.   font-family: "EquityTextB", Palatino, serif;

  121.   background-color: #f0f0ea;

  122.   color: #07486c;

  123.   font-kerning: normal;

  124.   -moz-osx-font-smoothing: grayscale;

  125.   -webkit-font-smoothing: subpixel-antialiased;

  126.   text-rendering: optimizeLegibility;

  127.   font-variant-ligatures: common-ligatures contextual;

  128.   font-feature-settings: "kern", "liga", "clig", "calt";

  129. }

  130. pre, code, kbd, samp, var, tt {

  131.   font-family: 'TriplicateT4c', monospace;

  132. }

  133. em {

  134.   font-style: italic;

  135.   color: #323a45;

  136. }

  137. strong {

  138.   font-weight: bold;

  139.   color: black;

  140. }

  141. nav {

  142.   background-color: #323a45;

  143.   color: #f0f0ea;

  144.   display: flex;

  145.   justify-content: space-around;

  146.   padding: 1rem .5rem;

  147. }

  148.   nav:last-child {

  149.     border-bottom: 1vh solid #2d7474;

  150.   }

  151.   nav a {

  152.     color: #f0f0ea;

  153.   }

  154.   nav abbr {

  155.     border-bottom: 1px dotted white;

  156.   }

  157. 

  158. h1 {

  159.   border-top: 1vh solid #2d7474;

  160.   border-bottom: .2vh dotted #2d7474;

  161.   background-color: #e3e1e1;

  162.   color: #323a45;

  163.   text-align: center;

  164.   padding: 5rem 0 4rem 0;

  165.   width: 100%;

  166.   font-family: 'ConcourseT3';

  167.   display: flex;

  168.   flex-direction: column;

  169. }

  170.   h1.single {

  171.     padding-bottom: 10rem;

  172.   }

  173.   h1 span {

  174.     position: absolute;

  175.     top: 1vh;

  176.     left: 20%;

  177.     line-height: 0;

  178.   }

  179.     h1 span a {

  180.       line-height: 1.7;

  181.       padding: 1rem 1.2rem .6rem 1.2rem;

  182.       border-radius: 0 0 6% 6%;

  183.       background: #2d7474;

  184.       font-size: 1.3rem;

  185.       color: white;

  186.       text-decoration: none;

  187.     }

  188. h2 {

  189.   margin: 4rem 0 1rem;

  190.   border-top: .2vh solid #2d7474;

  191.   padding-top: 1vh;

  192. }

  193. h3 {

  194.   text-align: center;

  195.   margin: 3rem 0 .75em;

  196. }

  197. hr {

  198.   height: .4rem;

  199.   width: .4rem;

  200.   border-radius: .4rem;

  201.   background: #07486c;

  202.   margin: 2.5rem auto;

  203. }

  204. time {

  205.   display: bloc;

  206.   margin-left: 0 !important;

  207. }

  208. ul, ol {

  209.   margin: 2rem;

  210. }

  211. ul {

  212.   list-style-type: square;

  213. }

  214. a {

  215.   text-decoration-skip-ink: auto;

  216.   text-decoration-thickness: 0.05em;

  217.   text-underline-offset: 0.09em;

  218. }

  219. article {

  220.   max-width: 50rem;

  221.   display: flex;

  222.   flex-direction: column;

  223.   margin: 2rem auto;

  224. }

  225.   article.single {

  226.     border-top: .2vh dotted #2d7474;

  227.     margin: -6rem auto 1rem auto;

  228.     background: #f0f0ea;

  229.     padding: 2rem;

  230.   }

  231.   article p:last-child {

  232.     margin-bottom: 1rem;

  233.   }

  234. p {

  235.   padding: 0 .5rem;

  236.   margin-left: 3rem;

  237. }

  238.   p + p,

  239.   figure + p {

  240.     margin-top: 2rem;

  241.   }

  242. 

  243. blockquote {

  244.   background-color: #e3e1e1;

  245.   border-left: .5vw solid #2d7474;

  246.   display: flex;

  247.   flex-direction: column;

  248.   align-items: center;

  249.   padding: 1rem;

  250.   margin: 1.5rem;

  251. }

  252.   blockquote cite {

  253.     font-style: italic;

  254.   }

  255.   blockquote p {

  256.     margin-left: 0;

  257.   }

  258. 

  259. figure {

  260.   border-top: .2vh solid #2d7474;

  261.   background-color: #e3e1e1;

  262.   text-align: center;

  263.   padding: 1.5rem 0;

  264.   margin: 1rem 0 0;

  265.   font-size: 1.5rem;

  266.   width: 100%;

  267. }

  268.   figure img {

  269.     max-width: 250px;

  270.     max-height: 250px;

  271.     border: .5vw solid #323a45;

  272.     padding: 1px;

  273.   }

  274. figcaption {

  275.   padding: 1rem;

  276.   line-height: 1.4;

  277. }

  278. aside {

  279.   display: flex;

  280.   flex-direction: column;

  281.   background-color: #e3e1e1;

  282.   padding: 1rem 0;

  283.   border-bottom: .2vh solid #07486c;

  284. }

  285.   aside p {

  286.     max-width: 50rem;

  287.     margin: 0 auto;

  288.   }

  289. 

  290. /* https://fvsch.com/code/css-locks/ */

  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  292.   font-size: 1rem;

  293.   line-height: calc( 1.5em + 0.2 * 1rem );

  294. }

  295. h1 {

  296.   font-size: 1.9rem;

  297.   line-height: calc( 1.2em + 0.2 * 1rem );

  298. }

  299. h2 {

  300.   font-size: 1.6rem;

  301.   line-height: calc( 1.3em + 0.2 * 1rem );

  302. }

  303. h3 {

  304.   font-size: 1.35rem;

  305.   line-height: calc( 1.4em + 0.2 * 1rem );

  306. }

  307. @media (min-width: 20em) {

  308.   /* The (100vw - 20rem) / (50 - 20) part

  309.      resolves to 0-1rem, depending on the

  310.      viewport width (between 20em and 50em). */

  311.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  312.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  313.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  314.     margin-left: 0;

  315.   }

  316.   h1 {

  317.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  318.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  319.   }

  320.   h2 {

  321.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  322.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  323.   }

  324.   h3 {

  325.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  326.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  327.   }

  328. }

  329. @media (min-width: 50em) {

  330.   /* The right part of the addition *must* be a

  331.      rem value. In this example we *could* change

  332.      the whole declaration to font-size:2.5rem,

  333.      but if our baseline value was not expressed

  334.      in rem we would have to use calc. */

  335.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  336.     font-size: calc( 1rem + .6 * 1rem );

  337.     line-height: 1.5em;

  338.   }

  339.   p, li, pre, details {

  340.     margin-left: 3rem;

  341.   }

  342.   h1 {

  343.     font-size: calc( 1.9rem + 1.5 * 1rem );

  344.     line-height: 1.2em;

  345.   }

  346.   h2 {

  347.     font-size: calc( 1.5rem + 1.5 * 1rem );

  348.     line-height: 1.3em;

  349.   }

  350.   h3 {

  351.     font-size: calc( 1.35rem + 1.5 * 1rem );

  352.     line-height: 1.4em;

  353.   }

  354.   figure img {

  355.     max-width: 500px;

  356.     max-height: 500px;

  357.   }

  358. }

  359. 

  360. figure.unsquared {

  361.   margin-bottom: 1.5rem;

  362. }

  363.   figure.unsquared img {

  364.     height: inherit;

  365.   }

  366. 

  367. 

  368. 

  369. @media print {

  370.   body { font-size: 100%; }

  371.   a:after { content: " (" attr(href) ")"; }

  372.   a, a:link, a:visited, a:after {

  373.     text-decoration: underline;

  374.     text-shadow: none !important;

  375.     background-image: none !important;

  376.     background: white;

  377.     color: black;

  378.   }

  379.   abbr[title] { border-bottom: 0; }

  380.   abbr[title]:after { content: " (" attr(title) ")"; }

  381.   img { page-break-inside: avoid; }

  382.   @page { margin: 2cm .5cm; }

  383.   h1, h2, h3 { page-break-after: avoid; }

  384.   p3 { orphans: 3; widows: 3; }

  385.   img {

  386.     max-width: 250px !important;

  387.     max-height: 250px !important;

  388.   }

  389.   nav, aside { display: none; }

  390. }

  391. 

  392. ul.with_columns {

  393.   column-count: 1;

  394. }

  395. @media (min-width: 20em) {

  396.   ul.with_columns {

  397.     column-count: 2;

  398.   }

  399. }

  400. @media (min-width: 50em) {

  401.   ul.with_columns {

  402.     column-count: 3;

  403.   }

  404. }

  405. ul.with_two_columns {

  406.   column-count: 1;

  407. }

  408. @media (min-width: 20em) {

  409.   ul.with_two_columns {

  410.     column-count: 1;

  411.   }

  412. }

  413. @media (min-width: 50em) {

  414.   ul.with_two_columns {

  415.     column-count: 2;

  416.   }

  417. }

  418. 

  419. .gallery {

  420.   display: flex;

  421.   flex-wrap: wrap;

  422.   justify-content: space-around;

  423. }

  424.   .gallery figure img {

  425.     margin-left: 1rem;

  426.     margin-right: 1rem;

  427.   }

  428.   .gallery figure figcaption {

  429.     font-family: 'ConcourseT3'

  430.   }

  431. 

  432. footer {

  433.   font-family: 'ConcourseT3';

  434.   display: flex;

  435.   flex-direction: column;

  436.   border-top: 3px solid white;

  437.   padding: 4rem 0;

  438.   background-color: #07486c;

  439.   color: white;

  440. }

  441.   footer > * {

  442.     max-width: 50rem;

  443.     margin: 0 auto;

  444.   }

  445.   footer a {

  446.     color: #f1c40f;

  447.   }

  448.   footer .avatar {

  449.     width: 200px;

  450.     height: 200px;

  451.     border-radius: 50%;

  452.     float: left;

  453.     -webkit-shape-outside: circle();

  454.     shape-outside: circle();

  455.     margin-right: 2rem;

  456.     padding: 2px 5px 5px 2px;

  457.     background: white;

  458.     border-left: 1px solid #f1c40f;

  459.     border-top: 1px solid #f1c40f;

  460.     border-right: 5px solid #f1c40f;

  461.     border-bottom: 5px solid #f1c40f;

  462.   }

  463. </style>

  464. 

  465. <h1 class="single">

  466.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  467.   TDD et conception émergente

  468.   <time>Publié le 15 décembre 2013</time>

  469. </h1>

  470. <article class="single">

  471.   <p>On me parle de <em>Test Driven Development</em> depuis des années maintenant et je n’ai toujours pas vu la lumière de la <em>« conception émergente »</em>. J’ai profité de l’Agile Open Sud et d’être entouré de <a href="http://blog.avoustin.com/">personnes</a> <a href="http://blog.crafting-labs.fr/">pratiquantes</a> pour faire un point sur les raisons de ce désintérêt au cours d’une session d’<em>OpenSpace</em>.</p>

  472. <p>La première raison, et c’est <a href="http://www.rui.fr/">Rui</a> qui a mis le doigt dessus, c’est que le Web nous offre un moyen de visualiser ce que nous développons très rapidement dans un navigateur. Or, les tests sont un moyen d’<strong>avoir un feedback sur notre code</strong> : est-ce que le résultat est celui attendu ? Ce qui correspond bien souvent à un simple rafraîchissement de page. Est-ce que la conception émergente se trouve être supplantée par la <em>conception visuelle</em> dans le cas de pages web ?</p>

  473. <p>La seconde est relative à la complexité, le développement d’un site Web avec un <em>framework</em> (bien testé) réduit le périmètre critique qu’il faut valider au cours du développement et ne nécessite pas forcément d’avoir une couverture à 100%. <strong>Retester le framework est une perte de temps.</strong> La difficulté revient à savoir ce qu’il faut tester en fonction du contexte du projet et de ses spécificités. Il est à noter que le <em>framework</em> masque potentiellement la conception émergente en proposant des contraintes fortes qui guident cette conception.</p>

  474. <p>La dernière est liée au niveau des tests, mon avis actuel est qu’il faut <strong>tester la complexité au plus près (unitaire) et la généralité au plus large (fonctionnel),</strong> surtout lorsqu’elle vient interagir avec un second langage — JavaScript — ce qui permet de faire d’une pierre deux coups grâce à <a href="http://casperjs.org/">CasperJS</a> par exemple. Peut-on parvenir à de la conception émergente lorsque le résultat est la combinaison de plusieurs langages intimement liés ?</p>

  475. <p>Finalement, le seul gain réel que j’ai à faire des tests en premier réside dans leur <em>répétabilité</em>, notamment dans le cadre de soumission de formulaires qui peut se révéler être une tâche fastidieuse lorsque réalisée à la main. C’est le seul moment où je commence réellement par les tests mais je crois que c’est plus par flemme de devoir faire le <em>template</em> avant de pouvoir valider mon développement. <strong>Il n’y a qu’en codant le client ET le serveur d’une API Web en parallèle que j’en arrive à de la conception émergente.</strong> Cela peut sembler éloigné du <em>TDD</em> mais il s’agit pourtant d’un test grandeur nature qui m’en apprend plus que n’importe quel <em>mock</em>… Est-ce qu’il vous arrive aussi de pratiquer du <em>Client Driven Development</em> pour vos API Web ?</p>

  476. </article>

  477. 

  478.   <section>

  479.     <h3>Discussion suite à l’article :</h3>

  480. 

  481.       <article id="comment-1" class="comment">

  482.         <blockquote>

  483. <p>Est-ce qu’il vous arrive aussi de pratiquer du Client Driven Development pour vos API Web ?</p>

  484. </blockquote>

  485. <p>Tout le temps. Dans le sens, où ce que je développe en premier (même pour des petits scripts) est ce qui consomme la donnée (encore inexistante) avant de créer ce qui produit la donnée.</p>

  486. <p>Consumer - Producer.</p>

  487. <p>Ainsi cela permet de maximiser l’efficacité du Producer et de minimiser les fonctionnalités du Producer. Moins de déchets. </p>

  488. <p>Le TDD, j’ai essayé aussi. Le bénéfice que j’ai eu quand <a href="https://github.com/karlcow/websurvey/blob/master/tests/survey_tests.py">j’ai essayé</a>, n’était pas du tout la maintenance du code. Mais plutôt la modularité du code. Les tests forçant à avoir une contrainte plus forte sur les input/output et passage des variables. Bien sûr étant un petit padawan du développement, cela doit être un champ d’horreurs. </p>

  489. <p>Aussi je trouve très difficile de comprendre et je n’ai toujours pas vraiment réussi à faire du TDD au niveau du protocole lui-même plutôt que le message transporté par le protocole.</p>

  490.         <p><cite>Karl Dubost, le <a href="#comment-1">2013-12-15 à 18:50</a></cite></p>

  491.       </article>

  492. 

  493.       <article id="comment-2" class="comment">

  494.         <p>Je pratique le TDD depuis quelques temps déjà. J’ai pu améliorer ma pratique grace au Dojo de dev. Aujourd’hui je ne sais plus faire sans.</p>

  495. <p>Pour moi le TDD me permet de savoir quoi coder. Je ne pense pas a mon code, je pense juste au test, le prochain que je doit écrire. Et c’est ce changement de position qui est, je crois, le plus dur à faire pour ce sentir mieux avec cette pratique, et commencer à voir le principe de "design émergent". A partir du monent ou tu ne penses plus ton architecture/code en "design up-front", ta conception deviens émergente.</p>

  496. <p>C’est très intéressant ce que tu évoque sur les frameworks ainsi que sur le dev web. Voici un déroulé assez classique pour moi (j’esère que ça ne sera pas trop long):</p>

  497. <ul>

  498. <li>je dessine la page que je veux voir (html pure, éventuellenement un poil de css)</li>

  499. <li>je click sur l’action, mais elle ne fait rien (c’est une forme de test unitaire non programmé et non reproductible à l’identique, mais un casper, ou l’enregistrement d’un scénario sélénium le permettrait... il faut que j’essaie)</li>

  500. <li>Je code l’action la plus simple possible. Si c’est juste une configuration de route, je le fait sans plus de test. Si c’est un code plus complexe, avec des validation et/ou regle métier,:</li>

  501. <li>je fait un test pour décrire ce que je veux...</li>

  502. <li>je code</li>

  503. <li>je refactor</li>

  504. <li>...</li>

  505. </ul>

  506. <p>Je vais m ’arreter là, je pourrais en parler toute la nuit. L’idée pour moi est d’avoir une approche top-down, avec des tests pour m’aider à exprimer ce que je souhaite faire, et non penser directement à ce que je veux coder.</p>

  507.         <p><cite>Yannick François, le <a href="#comment-2">2013-12-15 à 23:02</a></cite></p>

  508.       </article>

  509. 

  510.       <article id="comment-3" class="comment">

  511.         <p>Ce que j’ai cherché maladroitement à montrer ici, c’est qu’à aucun moment je ne refléchi à mon architecture. Fu un temps ou je gribouillais des diag UML ou autre esquisse, mais je ne le fait plus vraiment. Je code par petit pas, en gardant des principes (genre SOLID) en tête pour avancer proprement.</p>

  512.         <p><cite>Yannick François, le <a href="#comment-3">2013-12-16 à 11:02</a></cite></p>

  513.       </article>

  514. 

  515.   </section>

  516. 

  517. 

  518. 

  519. 

  520. <nav id="jumpto">

  521.   <p>

  522.     <a rel=prev href="/david/blog/2013/opendata-culture/">← OpenData et culture</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2013/propositions-citoyennes/">Propositions citoyennes →</a>

  523.   </p>

  524. </nav>

  525. 

  526. <footer>

  527.   <div>

  528.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  529.     <p>

  530.       Bonjour/Hi!

  531.       Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>

  532.       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>).

  533.     </p>

  534.     <p>

  535.       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>.

  536.     </p>

  537. 

  538.       <p>

  539.         Les dernières publications hebdomadaires sont :

  540.       </p>

  541.       <ul class="with_columns">

  542. 

  543.           <li>

  544.             <a href="/david/stream/2019/12/31/">Merci</a>

  545.           </li>

  546. 

  547.           <li>

  548.             <a href="/david/stream/2019/12/27/">Intemporels</a>

  549.           </li>

  550. 

  551.           <li>

  552.             <a href="/david/stream/2019/12/24/">Outils</a>

  553.           </li>

  554. 

  555.           <li>

  556.             <a href="/david/stream/2019/12/17/">Origines</a>

  557.           </li>

  558. 

  559.           <li>

  560.             <a href="/david/stream/2019/12/10/">Publier</a>

  561.           </li>

  562. 

  563.           <li>

  564.             <a href="/david/stream/2019/12/03/">En forêt</a>

  565.           </li>

  566. 

  567.           <li>

  568.             <a href="/david/stream/2019/11/26/">Ecocentric</a>

  569.           </li>

  570. 

  571.           <li>

  572.             <a href="/david/stream/2019/11/19/">Se livrer</a>

  573.           </li>

  574. 

  575.           <li>

  576.             <a href="/david/stream/2019/11/12/">Dépendances</a>

  577.           </li>

  578. 

  579.           <li>

  580.             <a href="/david/stream/2019/11/05/">Positif</a>

  581.           </li>

  582. 

  583.           <li>

  584.             <a href="/david/stream/2019/10/29/">Dettes</a>

  585.           </li>

  586. 

  587.           <li>

  588.             <a href="/david/stream/2019/10/22/">Privilèges</a>

  589.           </li>

  590. 

  591.           <li>

  592.             <a href="/david/stream/2019/10/15/">Discrétion</a>

  593.           </li>

  594. 

  595.           <li>

  596.             <a href="/david/stream/2019/10/08/">Désespérance</a>

  597.           </li>

  598. 

  599.           <li>

  600.             <a href="/david/stream/2019/10/01/">Présent</a>

  601.           </li>

  602. 

  603.           <li>

  604.             <a href="/david/stream/2019/09/24/">Manifester</a>

  605.           </li>

  606. 

  607.           <li>

  608.             <a href="/david/stream/2019/09/17/">Arpenter</a>

  609.           </li>

  610. 

  611.           <li>

  612.             <a href="/david/stream/2019/09/10/">Nostalgie</a>

  613.           </li>

  614. 

  615.           <li>

  616.             <a href="/david/stream/2019/09/03/">Déconstruire</a>

  617.           </li>

  618. 

  619.           <li>

  620.             <a href="/david/stream/2019/08/27/">Documenter</a>

  621.           </li>

  622. 

  623.           <li>

  624.             <a href="/david/stream/2019/08/20/">Frustration</a>

  625.           </li>

  626. 

  627.           <li>

  628.             <a href="/david/stream/2019/08/13/">Holisme</a>

  629.           </li>

  630. 

  631.           <li>

  632.             <a href="/david/stream/2019/08/06/">1%</a>

  633.           </li>

  634. 

  635.           <li>

  636.             <a href="/david/stream/2019/07/30/">Exemplarité</a>

  637.           </li>

  638. 

  639.           <li>

  640.             <a href="/david/stream/2019/07/23/">Timelines</a>

  641.           </li>

  642. 

  643.           <li>

  644.             <a href="/david/stream/2019/07/16/">Écoute</a>

  645.           </li>

  646. 

  647.           <li>

  648.             <a href="/david/stream/2019/07/02/">Anxiété</a>

  649.           </li>

  650. 

  651.           <li>

  652.             <a href="/david/stream/2019/06/21/">À lier</a>

  653.           </li>

  654. 

  655.           <li>

  656.             <a href="/david/stream/2019/06/14/">Pauvreté</a>

  657.           </li>

  658. 

  659.           <li>

  660.             <a href="/david/stream/2019/06/07/">Amateur</a>

  661.           </li>

  662. 

  663.           <li>

  664.             <a href="/david/stream/2019/05/31/">Pollution</a>

  665.           </li>

  666. 

  667.           <li>

  668.             <a href="/david/stream/2019/05/24/">Apaisement</a>

  669.           </li>

  670. 

  671.           <li>

  672.             <a href="/david/stream/2019/05/10/">Folie</a>

  673.           </li>

  674. 

  675.           <li>

  676.             <a href="/david/stream/2019/05/03/">Sympathie</a>

  677.           </li>

  678. 

  679.           <li>

  680.             <a href="/david/stream/2019/04/12/">Péremption</a>

  681.           </li>

  682. 

  683.           <li>

  684.             <a href="/david/stream/2019/04/05/">Définitions</a>

  685.           </li>

  686. 

  687.           <li>

  688.             <a href="/david/stream/2019/03/29/">Acceptation</a>

  689.           </li>

  690. 

  691.           <li>

  692.             <a href="/david/stream/2019/03/22/">Dissonance</a>

  693.           </li>

  694. 

  695.           <li>

  696.             <a href="/david/stream/2019/03/15/">Reconnaissance</a>

  697.           </li>

  698. 

  699.           <li>

  700.             <a href="/david/stream/2019/03/08/">Lecture</a>

  701.           </li>

  702. 

  703.           <li>

  704.             <a href="/david/stream/2019/03/01/">Journaux</a>

  705.           </li>

  706. 

  707.           <li>

  708.             <a href="/david/stream/2019/02/22/">Écriture</a>

  709.           </li>

  710. 

  711.           <li>

  712.             <a href="/david/stream/2019/02/15/">Kyriarchie</a>

  713.           </li>

  714. 

  715.           <li>

  716.             <a href="/david/stream/2019/02/08/">Mots-serrures</a>

  717.           </li>

  718. 

  719.           <li>

  720.             <a href="/david/stream/2019/02/01/">Sans voie</a>

  721.           </li>

  722. 

  723.           <li>

  724.             <a href="/david/stream/2019/01/25/">Auto-diagnostic</a>

  725.           </li>

  726. 

  727.           <li>

  728.             <a href="/david/stream/2019/01/18/">Agilité</a>

  729.           </li>

  730. 

  731.           <li>

  732.             <a href="/david/stream/2019/01/11/">Métaphores</a>

  733.           </li>

  734. 

  735.           <li>

  736.             <a href="/david/stream/2019/01/04/">Balbutiements</a>

  737.           </li>

  738. 

  739.       </ul>

  740. 

  741.     <p>

  742.       Voici quelques articles choisis :

  743.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  744.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  745.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  746.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  747.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  748.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  749.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  750.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  751.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  752.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  753.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  754.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  755.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  756.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  757.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  758.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  759.     </p>

  760.     <p>

  761.       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>.

  762.     </p>

  763.     <p>

  764.       Je ne traque pas ta navigation mais mon

  765.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  766.       conserve des logs d’accès.

  767.     </p>

  768.   </div>

  769. </footer>

  770. <script type="text/javascript">

  771.   ;(_ => {

  772.     const jumper = document.getElementById('jumper')

  773.     jumper.addEventListener('click', e => {

  774.       e.preventDefault()

  775.       const anchor = e.target.getAttribute('href')

  776.       const targetEl = document.getElementById(anchor.substring(1))

  777.       targetEl.scrollIntoView({behavior: 'smooth'})

  778.     })

  779.   })()

  780. </script>

  781. 

  782.   <script>

  783.   /* Service workers */

  784.   if (navigator.serviceWorker) {

  785.     window.addEventListener('load', function () {

  786.       var selector = 'a[href^="/david/cache/"], a[rel=prev], a[rel=next]'

  787.       function sendLinks (selector) {

  788.         var links = [].slice.call(document.querySelectorAll(selector)).map(function (link) {

  789.           return link.getAttribute('href')

  790.         })

  791.         links.push(location.pathname)  // Put the current page in cache too.

  792.         navigator.serviceWorker.controller.postMessage({ links: links })

  793.       }

  794.       navigator.serviceWorker.getRegistration()

  795.         .then(function (registration) {

  796.           if (!registration || !navigator.serviceWorker.controller) {

  797.             return navigator.serviceWorker.register('/serviceworker.js')

  798.               .then(navigator.serviceWorker.ready)

  799.               .then(function () {

  800.                 console.log('[ServiceWorker] Ready to go!')

  801.               })

  802.               .catch(console.error.bind(console))

  803.           } else {

  804.             console.log('[ServiceWorker] Send links via registration')

  805.             sendLinks(selector)

  806.           }

  807.         })

  808.       navigator.serviceWorker.addEventListener('controllerchange', function () {

  809.         console.log('[ServiceWorker] Send links via controller change')

  810.         sendLinks(selector)

  811.       })

  812.       navigator.serviceWorker.addEventListener('message', function (event) {

  813.         var link = document.querySelector('a[href="' + event.data.link + '"]')

  814.         if (event.data.status && link) {

  815.           link.style.backgroundColor = '#2d7474'

  816.           link.style.color = '#f0f0ea'

  817. 

  818.             link.setAttribute('title', 'En cache pour consultation sans connexion')

  819. 

  820.         }

  821.       })

  822.     })

  823.   } else {

  824.     console.warn('[ServiceWorker] No cache for old browsers.')

  825.   }

  826. </script>