162 lines
13 KiB
HTML
162 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>YBlog - Les idées de yesod</title>
|
||
<meta name="keywords" content="yesod, framework, web, haskell, ideas" />
|
||
|
||
<link rel="shortcut icon" type="image/x-icon" href="../../../../Scratch/img/favicon.ico" />
|
||
<link rel="stylesheet" type="text/css" href="../../../../css/y.css" />
|
||
<link rel="stylesheet" type="text/css" href="/css/legacy.css" />
|
||
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link rel="apple-touch-icon" href="../../../../Scratch/img/about/FlatAvatar@2x.png" />
|
||
<!--[if lt IE 9]>
|
||
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
|
||
<![endif]-->
|
||
<!-- IndieAuth -->
|
||
<link href="https://twitter.com/yogsototh" rel="me">
|
||
<link href="https://github.com/yogsototh" rel="me">
|
||
<link href="mailto:yann.esposito@gmail.com" rel="me">
|
||
<link rel="pgpkey" href="../../../../pubkey.txt">
|
||
</head>
|
||
<body lang="fr" class="article">
|
||
<div id="content">
|
||
<div id="header">
|
||
<div id="choix">
|
||
<span id="choixlang">
|
||
<a href="../../../../Scratch/en/blog/Yesod-excellent-ideas/">Anglais</a>
|
||
</span>
|
||
<span class="tomenu"><a href="#navigation">↓ Menu ↓</a></span>
|
||
<span class="flush"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="titre">
|
||
<h1>Les idées de yesod</h1>
|
||
|
||
</div>
|
||
<div class="flush"></div>
|
||
<div id="afterheader" class="article">
|
||
<div class="corps">
|
||
<div>
|
||
<img src="../../../../Scratch/img/blog/Yesod-excellent-ideas/main.png" alt="Title image" />
|
||
</div>
|
||
<div class="intro">
|
||
<p><span class="sc"><abbr title="Trop long; pas lu">tlpl</abbr>: </span></p>
|
||
<p>Cela fait un moment que je suis la progression du <a href="http://www.yesodweb.com">framework yesod</a>. À mon humble avis on peut commencer à l’utiliser pour des applications sérieuses (comprendre en prod). Avant de vous dire pourquoi vous devriez aussi le considérer, je préfère vous parler de bonnes idées (parmi d’autres) introduites par yesod que je n’avais jamais vu ailleurs.</p>
|
||
</div>
|
||
<h2 id="types-saufs">Types saufs</h2>
|
||
<p>Commençons par une BD d’<a href="http://xkcd.com">xkcd</a> :</p>
|
||
<figure>
|
||
<img src="http://imgs.xkcd.com/comics/exploits_of_a_mom.png" alt="SQL injection by a mom" /><figcaption>SQL injection by a mom</figcaption>
|
||
</figure>
|
||
<p>Lorsque vous créez une application web, beaucoup de temps est passé à s’occuper de chaînes de caractères. Des chaînes de caractère pour les URL, le HTML, le Javascript, les CSS, les requêtes SQL, etc… Pour éviter des utilisation malicieuses vous devez protéger chaque chaîne de caractère entre chaque étape. Par exemple supposons que vous entriez comme nom :</p>
|
||
<div class="sourceCode" id="cb1"><pre class="sourceCode javascript"><code class="sourceCode javascript"><a class="sourceLine" id="cb1-1" title="1">Newton<span class="op"><</span>script<span class="op">></span><span class="at">alert</span>(<span class="st">"An apple fall"</span>)</script<span class="op">></span></a></code></pre></div>
|
||
<p>Sans une protection correcte, le message “An apple fall” sera affiché à chaque fois que quelqu’un essayera d’accéder au nom de cet utilisateur. Les “types saufs” sont le <a href="https://www.youtube.com/watch?v=1IWF3IsEPBE">tonyglandil du web</a>. A chaque chaine de caractère, on lui associe un “type”. A quoi sert cette chaîne de caractère ? Est-ce une URL ? Du javascript ? De l’HTML ? Entre chaque passage d’une représentation à une autre, un transformation is faite par défaut.</p>
|
||
<p>Yesod fait de son mieux pour typer les objets manipulés et ainsi il fera ce qu’il faut pour ne pas mettre du script dans une URL par exemple.</p>
|
||
<div class="sourceCode" id="cb2"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb2-1" title="1"><span class="kw"><a</span><span class="ot"> href=</span><span class="st">@[AnotherPageR]</span><span class="kw">></span>Go to the other page</a></code></pre></div>
|
||
<p>Comme <code>AnotherPageR</code> est une URL elle ne pourra contiendra pas (par défaut) de caractère dangereux comme par exemple :</p>
|
||
<div class="sourceCode" id="cb3"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb3-1" title="1">falselink"><span class="kw"><script></span> <span class="at">bad_code</span>()<span class="op">;</span> <span class="kw"></script><a</span><span class="ot"> href=</span><span class="st">"pipo</span></a></code></pre></div>
|
||
<h2 id="les-widgets">Les widgets</h2>
|
||
<p>Les widgets de yesod sont différents des widgets Javascripts (ou java). Pour yesod un widget est un ensemble de morceaux d’appli web. Et si dans une page on veut utiliser plusieurs widgets, alors yesod s’occupe de tout. Des exemples de widgets (au sens yesod) sont :</p>
|
||
<ul>
|
||
<li>Le «footer» d’une page web,</li>
|
||
<li>Le «header» d’une page web,</li>
|
||
<li>un bouton qui apparaît lorsque l’on «scrolle» vers le bas,</li>
|
||
<li>etc…</li>
|
||
</ul>
|
||
<p>Pour chacun de ces widgets vous pourriez avoir besoin d’</p>
|
||
<ul>
|
||
<li>un peu d’HTML,</li>
|
||
<li>un peu de CSS et</li>
|
||
<li>un peu de javascript.</li>
|
||
</ul>
|
||
<p>Certain morceau doivent être placés dans le «header» de la page et d’autre dans le «body».</p>
|
||
<p>Vous pouvez déclarer un widget comme suit (je n’utilise pas la vrai syntaxe) :</p>
|
||
<pre><code>htmlheader = ...
|
||
cssheader = ...
|
||
javascriptheader = ...
|
||
htmlbody = ...</code></pre>
|
||
<p>La vraie syntaxe est :</p>
|
||
<div class="sourceCode" id="cb5"><pre class="sourceCode haskell"><code class="sourceCode haskell"><a class="sourceLine" id="cb5-1" title="1">toWidgetHeader cassiusFile <span class="st">"button.cassius"</span></a>
|
||
<a class="sourceLine" id="cb5-2" title="2">toWidgetHeader juliusFile <span class="st">"button.julius"</span></a>
|
||
<a class="sourceLine" id="cb5-3" title="3">toWidget hamletFile <span class="st">"buttonTemplate.hamlet"</span></a></code></pre></div>
|
||
<p>Veuillez aussi noté la convention Shakespearienne des noms. Encore une bonne raison d’utiliser yesod.</p>
|
||
<ul>
|
||
<li>Cassius <em>&</em> Lucius pour le CSS (très similaire à SASS et SCSS)</li>
|
||
<li>Julius pour le javascript (notons qu’il existe aussi un CoffeeScript qui traîne dans les sources de yesod)</li>
|
||
<li>Hamlet pour l’HTML (similaire à haml)</li>
|
||
</ul>
|
||
<p>Lorsque vous générez votre page, yesod se débrouille pour que tout fonctionne ensemble:</p>
|
||
<div class="sourceCode" id="cb6"><pre class="sourceCode haskell"><code class="sourceCode haskell"><a class="sourceLine" id="cb6-1" title="1">myBigWidget <span class="ot">=</span> menuWidget <span class="op">>></span> contentWidget <span class="op">>></span> footerWidget</a></code></pre></div>
|
||
<p>De plus, si vous utilisez 10 widgets avec un peu de CSS, yesod fabriquera un unique fichier CSS pour vous. Bien entendu si vous préférez avoir une dizaine de fichier CSS vous pouvez aussi le faire.</p>
|
||
<p>C’est juste génial !</p>
|
||
<h2 id="routage-optimisé">Routage optimisé</h2>
|
||
<p>Dans un système de routage standard (à la ruby on rails par exemple) vous avez pour chaque entrée un couple: regexp → handler</p>
|
||
<p>La seule façon de découvrir la bonne règle est d’essayer de matcher l’url demandée à chaque expression régulière.</p>
|
||
<p>Au lieu d’essayer chaque expression régulière, yesod regroupe et compile les routes pour les optimiser. Bien entendu pour pouvoir profiter de cet avantage au mieux, il ne faut pas que deux routes interfèrent entres elles.</p>
|
||
<div class="sourceCode" id="cb7"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb7-1" title="1">/blog/2003 Date2003R</a>
|
||
<a class="sourceLine" id="cb7-2" title="2">/blog/$DATE DateR</a></code></pre></div>
|
||
<p>Cette définition de route est invalide par défaut dans yesod. Si vous voulez vraiment vous pouvez le faire foncionner quand même, mais il me semble que ça doit être quasiment toujours une mauvaise idée.</p>
|
||
<p>Il vaut mieux faire :</p>
|
||
<div class="sourceCode" id="cb8"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb8-1" title="1">/blog/$DATE DateR</a></code></pre></div>
|
||
<p>et faire le test “est-ce que date = 2003 ?” dans le «handler».</p>
|
||
<h2 id="pourquoi-yesod">Pourquoi yesod?</h2>
|
||
<ol type="1">
|
||
<li><em>La vitesse</em>. Simplement incroyable, je ne pense pas qu’il existe quelque chose de plus rapide aujourd’hui. Regardez d’abord cet <a href="http://snapframework.com/blog/2010/11/17/snap-0.3-benchmarks">article</a> puis <a href="http://www.yesodweb.com/blog/2011/02/warp-speed-ahead">celui-ci</a>.</li>
|
||
<li><em>Haskell</em>. C’est certainement le langage de programmation le plus difficile à apprendre que j’ai jamais rencontré. Mais aussi l’un des plus incroyables. Si vous voulez rencontrer tout un tas de notions que vous n’avez jamais croisées avant et faire exploser votre cerveau avec de nouvelles idées, alors apprenez Haskell.</li>
|
||
<li><em>Bonnes idées et communauté excellente</em>. Cela fait quelques mois que je suis la progression de yesod. Et la vitesse à laquelle tout s’est déroulé est simplement incroyable. De plus les développeurs sont intelligents et super sympa.</li>
|
||
</ol>
|
||
<p>Si vous êtes un “haskeller”, je pense que vous ne devriez pas avoir peur de la syntaxe particulière imposée par la façon standard de faire les choses avec yesod. Il faut essayer un peu plus loin que les premiers tutoriaux du livre.</p>
|
||
<p>Je pense que yesod va dans la bonne direction d’un web plus sûr et plus rapide. Même si je pense que l’avenir sera que les serveurs devront être limités à faire serveur d’API (JSON ou XML ou n’importe quel autre mode de représentation d’objets).</p>
|
||
<p>Yesod est juste incroyable. Dépassez les difficultés liées à l’apprentissage d’haskell et essayez le !</p>
|
||
</div>
|
||
<div id="afterarticle">
|
||
<div id="social">
|
||
<a href="/rss.xml" target="_blank" rel="noopener noreferrer nofollow" class="social">RSS</a>
|
||
·
|
||
<a href="https://twitter.com/home?status=http%3A%2F%2Fyannesposito.com/Scratch/fr/blog/Yesod-excellent-ideas/%20via%20@yogsototh" target="_blank" rel="noopener noreferrer nofollow" class="social">Tweet</a>
|
||
·
|
||
<a href="http://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fyannesposito.com/Scratch/fr/blog/Yesod-excellent-ideas/" target="_blank" rel="noopener noreferrer nofollow" class="social">FB</a>
|
||
<br />
|
||
<a class="message" href="../../../../Scratch/fr/blog/Social-link-the-right-way/">Ces liens sociaux préservent votre vie privée</a>
|
||
</div>
|
||
<div id="navigation">
|
||
<a href="../../../../">Accueil</a>
|
||
<span class="sep">¦</span>
|
||
<a href="../../../../Scratch/fr/blog">Blog</a>
|
||
<span class="sep">¦</span>
|
||
<a href="../../../../Scratch/fr/softwares">Logiciels</a>
|
||
<span class="sep">¦</span>
|
||
<a href="../../../../Scratch/fr/about">Auteur</a>
|
||
</div>
|
||
<div id="totop"><a href="#header">↑ Top ↑</a></div>
|
||
<div id="bottom">
|
||
<div>
|
||
Published on 2011-10-04
|
||
</div>
|
||
<div>
|
||
<a href="https://twitter.com/yogsototh">Follow @yogsototh</a>
|
||
</div>
|
||
<div>
|
||
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_US">Yann Esposito©</a>
|
||
</div>
|
||
|
||
<div>
|
||
Done with
|
||
<a href="http://www.vim.org" target="_blank" rel="noopener noreferrer nofollow"><strike>Vim</strike></a>
|
||
<a href="http://spacemacs.org" target="_blank" rel="noopener noreferrer nofollow">spacemacs</a>
|
||
<span class="pala">&</span>
|
||
<a href="http://nanoc.ws" target="_blank" rel="noopener noreferrer nofollow"><strike>nanoc</strike></a>
|
||
<a href="http://jaspervdj.be/hakyll" target="_blank" rel="noopener noreferrer nofollow">Hakyll</a>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|