davidbgk
/
larlet-fr-david
Sledovat 1
Oblíbit 0
Rozštěpit 0
Zdrojový kód Vydání 0 Aktivita
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
233 Revize
1 Větev
Strom: a53cd109b4
Větve Značky
${ item.name }
Vytvořit větev ${ searchTerm }
z „a53cd109b4“
${ noResults }
larlet-fr-david/david/blog/2015/prospective-python/index.html

index.html 30KB
Surový Blame Historie

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821 
  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>Prospective Python — 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/2015/prospective-python/">

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

  31.   <meta name="description" content="J’ai retrouvé un vieux brouillon de mon intervention aux rencontres Django 2012." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="J’ai retrouvé un vieux brouillon de mon intervention aux rencontres Django 2012." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="Prospective Python" />

  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/2015/prospective-python/" />

  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/blog/2015/prospective-python.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.   Prospective Python

  468.   <time>Publié le 28 janvier 2015</time>

  469. </h1>

  470. <article class="single">

  471.   <p><em>J’ai retrouvé un vieux brouillon de mon intervention aux rencontres Django (novembre 2012) donné sous le titre « Pourquoi je ne veux plus utiliser Django ? ». Je le publie en l’état et je reviens dessus à la fin.</em></p>

  472. <p>Titre clairement provocateur pour cette intervention aux rencontres Django de Toulouse qui est né d’un ressenti que j’ai depuis quelques mois/années. Je vais essayer de détailler les doutes que j’ai sur le futur de Django et Python. Je vois plusieurs défis majeurs pour les mois à venir :</p>

  473. <h2>Python 3</h2>

  474. <p>Python 3.0 est sorti il y a 4 ans quasiment jour pour jour (3 décembre). Qui l’utilise aujourd’hui ? Qui a un projet web en production qui repose sur cette version ? Très peu. Principalement car la rétro-compatibilité n’a pas été conservée pour cette version ce qui pose clairement des problèmes de <a href="https://python3wos.appspot.com/">mise à jour des bibliothèques</a> sans lesquelles un projet ne peux pas se faire aussi rapidement qu’en 2.X. C’était un risque énorme qui a été pris et la communauté en paye le prix fort. Combien faudra-t-il encore d’années pour que cela change ? Quels sont les gains réels ? Qu’en est-il de <a href="http://pypy.org/">Pypy</a> ?</p>

  475. <p>Et quitte à réapprendre une partie du langage, est-ce qu’il ne faudrait pas aller voir ce qui se fait ailleurs ?</p>

  476. <h2>Node.js</h2>

  477. <blockquote>

  478. <p>Node.js is a tumor on the programming community, in that not only is it completely braindead, but the people who use it go on to infect other people who can’t think for themselves, until eventually, every asshole I run into wants to tell me the gospel of event loops. — <a href="http://pages.citebite.com/b2x0j8q1megb">Ted Dziuba</a>, Fibonacci’s lover</p>

  479. </blockquote>

  480. <p>Phénomène de mode ou futur proche ? Il y a énormément de côtés plaisants à Node.js : notion de callbacks, promesse d’une validation des données partagée entre le client et le serveur, performances, etc. Par contre le manque de maturité est vite bloquant aussi : traceback incompréhensibles, outils insuffisants, manque de bonnes pratiques et de retours d’expériences, etc. Certains ont clairement fait le choix de s’engager dans cette voie mais ça me rappelle bien trop l’engouement autour de Ruby on Rails il y a quelques années auquel j’ai résisté et dont je me félicite aujourd’hui (ce n’est pas une critique de RoR sans lequel Django ne serait très certainement pas ce qu’il est aujourd’hui).</p>

  481. <h2>Flask</h2>

  482. <blockquote>

  483. <p>OH: "Microframework (n): A small amount of crap. See also Framework (n): A large amount of crap." — <a href="https://twitter.com/nikita_ppv/status/264292485134692352">@nikita_ppv</a></p>

  484. </blockquote>

  485. <p>Django se complexifie. Release après release. L’héritage des <code>class-based views</code> est assez symptomatique du problème (disclaimer : j’ai participé à ce sac de nœuds…) de la généralisation à outrance qui nuit au framework. Les alternatives comme Flask sont alléchantes mais il y a des frameworks basés sur Node.js qui arrivent aussi et qui apportent des réponses aux problématiques de temps-réel, ou plutôt…</p>

  486. <h2>Temps-humain</h2>

  487. <p>J’ai abandonné le terme <em>temps-réel</em> qui ne veut pas dire grand chose au profit de celui-ci qui repose sur la perception humaine de rapidité que l’on peut avoir avec une interface et qui me semble beaucoup plus proche de la réalité. Il est toujours relativement compliqué d’utiliser les <em>websockets</em> avec Django et même Python. Comment développer les applications interactives de demain ?</p>

  488. <h2>Et après ?</h2>

  489. <blockquote>

  490. <p>It’s so much easier to talk about how something sucks than to talk about how it could be awesome. Negativity is for the lazy. — <a href="https://twitter.com/defunkt/status/264475764483842048">@defunkt</a></p>

  491. </blockquote>

  492. <p>Parlons d’avenir et de web. Il y a eu 2/3 évolutions ces dernières années dans les implémentations et leurs usages (car les standards existent depuis un moment) permettant d’introduire de nouveaux paradigmes dans le développement d’applications. Voici quelques exemples de pistes à explorer :</p>

  493. <ul>

  494. <li>API-first : le modèle MVC a pris du plomb dans l’aile avec la multiplication des périphériques et des moyens de consommation des données, il faut repenser la gestion de la donnée ;</li>

  495. <li>asynchronicité : certaines requêtes mettent plus de temps que d’autres mais ce qui importe c’est la perception qu’à le visiteur de la réactivité de votre application, il manque des outils permettant de gérer ces cas aux limites qui font pourtant parfois la valeur réelle de l’application ;</li>

  496. <li>single page apps : de plus en plus de sites se développent en n’utilisant qu’une seule page, il y a même <a href="http://singlepageappbook.com/goal.html">un livre dédié</a> à ce concept, or les frameworks ont bien souvent un contrat unique de requête/réponse par page qui répond mal aux exigences d’une mise à jour partielle de page ;</li>

  497. <li>mobilité : le web est dans de plus en plus de poches, à portée de doigts, avec une inégalité des accès au réseau en fonction de la localisation. Il faudrait que les frameworks soient adaptés à ces nouveaux usages avec du stockage local et de la synchronisation, avec des rendus adaptés aux vitesses de connexion, avec des concepts moins gourmands en énergie et en bande passante.</li>

  498. </ul>

  499. <p>J’espère que ces pistes seront partie prenante des discussions relatives à Django 2.0 ou de nouveaux frameworks que j’espère en Python. Ces nouveaux paradigmes me redonneraient à coup sûr l’envie de développer en utilisant Django ;-).</p>

  500. <h3>Retour en 2015</h3>

  501. <p>Malheureusement, 2 ans plus tard, j’ai toujours les mêmes doutes sur le futur de Python/Django. J’expérimente avec <a href="https://facebook.github.io/react/">ReactJS</a> depuis maintenant un an. Relire <a href="/david/stream/2014/#tw-438307750141894656">ce tweet</a> me fait sourire de naïveté :</p>

  502. <blockquote>

  503. <p>ReactJS is to Web Components what microformats were to Semantic Web. And I can’t conclude anything from that.</p>

  504. </blockquote>

  505. <p>Il y a une effervescence dans la communauté JavaScript qui serait grisante si elle ne cessait de réinventer la roue. <em>Plusieurs fois.</em> Mais force est de constater qu’il y a des pistes intéressantes dans ReactJS : ils ont justement « repensé la gestion de la donnée » avec Flux, ils permettent l’asynchronicité, on peut faire des <code>SPA</code> sans se prendre la tête, ils expérimentent avec la mobilité (React Native et GraphQL/Relay ont été annoncés ce jour). Autant d’approches que je n’ai pas vues dans la communauté Python. Je ne compte pas <a href="http://www.ianbicking.org/blog/2014/02/saying-goodbye-to-python.html">dire au revoir à Python</a> (<a href="/david/cache/540de92e7533f8ad5af02742676af4c5/">cache</a>) car je prends toujours beaucoup de plaisir à coder avec mais je commence à me poser de sérieuses questions sur sa pertinence pour des projets Web réactifs (huhuhu).</p>

  506. </article>

  507. 

  508. 

  509.   <figure class="image" property="schema:image">

  510.     <img src="/static/david/blog/2015/prospective-python.jpg" alt="" />

  511.   </figure>

  512. 

  513. 

  514. 

  515. <nav id="jumpto">

  516.   <p>

  517.     <a rel=prev href="/david/blog/2015/cours-iut-construction-collaborative/">← Cours IUT : Construction collaborative</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2015/cours-iut-composants-web/">Cours IUT : Composants Web →</a>

  518.   </p>

  519. </nav>

  520. 

  521. <footer>

  522.   <div>

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

  524.     <p>

  525.       Bonjour/Hi!

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

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

  528.     </p>

  529.     <p>

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

  531.     </p>

  532. 

  533.       <p>

  534.         Les dernières publications hebdomadaires sont :

  535.       </p>

  536.       <ul class="with_columns">

  537. 

  538.           <li>

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

  540.           </li>

  541. 

  542.           <li>

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

  544.           </li>

  545. 

  546.           <li>

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

  548.           </li>

  549. 

  550.           <li>

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

  552.           </li>

  553. 

  554.           <li>

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

  556.           </li>

  557. 

  558.           <li>

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

  560.           </li>

  561. 

  562.           <li>

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

  564.           </li>

  565. 

  566.           <li>

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

  568.           </li>

  569. 

  570.           <li>

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

  572.           </li>

  573. 

  574.           <li>

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

  576.           </li>

  577. 

  578.           <li>

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

  580.           </li>

  581. 

  582.           <li>

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

  584.           </li>

  585. 

  586.           <li>

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

  588.           </li>

  589. 

  590.           <li>

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

  592.           </li>

  593. 

  594.           <li>

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

  596.           </li>

  597. 

  598.           <li>

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

  600.           </li>

  601. 

  602.           <li>

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

  604.           </li>

  605. 

  606.           <li>

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

  608.           </li>

  609. 

  610.           <li>

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

  612.           </li>

  613. 

  614.           <li>

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

  616.           </li>

  617. 

  618.           <li>

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

  620.           </li>

  621. 

  622.           <li>

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

  624.           </li>

  625. 

  626.           <li>

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

  628.           </li>

  629. 

  630.           <li>

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

  632.           </li>

  633. 

  634.           <li>

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

  636.           </li>

  637. 

  638.           <li>

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

  640.           </li>

  641. 

  642.           <li>

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

  644.           </li>

  645. 

  646.           <li>

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

  648.           </li>

  649. 

  650.           <li>

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

  652.           </li>

  653. 

  654.           <li>

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

  656.           </li>

  657. 

  658.           <li>

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

  660.           </li>

  661. 

  662.           <li>

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

  664.           </li>

  665. 

  666.           <li>

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

  668.           </li>

  669. 

  670.           <li>

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

  672.           </li>

  673. 

  674.           <li>

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

  676.           </li>

  677. 

  678.           <li>

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

  680.           </li>

  681. 

  682.           <li>

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

  684.           </li>

  685. 

  686.           <li>

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

  688.           </li>

  689. 

  690.           <li>

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

  692.           </li>

  693. 

  694.           <li>

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

  696.           </li>

  697. 

  698.           <li>

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

  700.           </li>

  701. 

  702.           <li>

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

  704.           </li>

  705. 

  706.           <li>

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

  708.           </li>

  709. 

  710.           <li>

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

  712.           </li>

  713. 

  714.           <li>

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

  716.           </li>

  717. 

  718.           <li>

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

  720.           </li>

  721. 

  722.           <li>

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

  724.           </li>

  725. 

  726.           <li>

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

  728.           </li>

  729. 

  730.           <li>

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

  732.           </li>

  733. 

  734.       </ul>

  735. 

  736.     <p>

  737.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  754.     </p>

  755.     <p>

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

  757.     </p>

  758.     <p>

  759.       Je ne traque pas ta navigation mais mon

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

  761.       conserve des logs d’accès.

  762.     </p>

  763.   </div>

  764. </footer>

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

  766.   ;(_ => {

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

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

  769.       e.preventDefault()

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

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

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

  773.     })

  774.   })()

  775. </script>

  776. 

  777.   <script>

  778.   /* Service workers */

  779.   if (navigator.serviceWorker) {

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

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

  782.       function sendLinks (selector) {

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

  784.           return link.getAttribute('href')

  785.         })

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

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

  788.       }

  789.       navigator.serviceWorker.getRegistration()

  790.         .then(function (registration) {

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

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

  793.               .then(navigator.serviceWorker.ready)

  794.               .then(function () {

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

  796.               })

  797.               .catch(console.error.bind(console))

  798.           } else {

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

  800.             sendLinks(selector)

  801.           }

  802.         })

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

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

  805.         sendLinks(selector)

  806.       })

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

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

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

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

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

  812. 

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

  814. 

  815.         }

  816.       })

  817.     })

  818.   } else {

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

  820.   }

  821. </script>