312 lines
No EOL
15 KiB
HTML
312 lines
No EOL
15 KiB
HTML
<?xml version="1.0" encoding="utf-8"?>
|
||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||
|
||
|
||
<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="/Scratch/assets/css/main.css" />
|
||
<link rel="stylesheet" type="text/css" href="/Scratch/css/twilight.css" />
|
||
<link rel="stylesheet" type="text/css" href="/Scratch/css/idc.css" />
|
||
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://feeds.feedburner.com/yannespositocomfr"/>
|
||
|
||
<link rel="alternate" lang="fr" xml:lang="fr" title="Les idées de yesod" type="text/html" hreflang="fr" href="/Scratch/fr/blog/Yesod-excellent-ideas/" />
|
||
<link rel="alternate" lang="en" xml:lang="en" title="Yesod excellent ideas" type="text/html" hreflang="en" href="/Scratch/en/blog/Yesod-excellent-ideas/" />
|
||
<script type="text/javascript" src="/Scratch/js/jquery-1.3.1.min.js"></script>
|
||
<script type="text/javascript" src="/Scratch/js/jquery.cookie.js"></script>
|
||
<script type="text/javascript" src="/Scratch/js/index.js"></script>
|
||
<!--[if lt IE 9]>
|
||
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
|
||
<![endif]-->
|
||
<title>Les idées de yesod</title>
|
||
</head>
|
||
<body lang="fr" class="article">
|
||
<script type="text/javascript">// <![CDATA[
|
||
document.write('<div id="blackpage"><img src="/Scratch/img/loading.gif" alt="Chargement en cours..."/></div>');
|
||
// ]]>
|
||
</script>
|
||
|
||
<div id="content">
|
||
|
||
<div id="choix">
|
||
<div class="return"><a href="#entete">↓ Menu ↓</a></div>
|
||
<div id="choixlang">
|
||
<a href="/Scratch/en/blog/Yesod-excellent-ideas/" onclick="setLanguage('en')">in English</a>
|
||
</div>
|
||
<div class="flush"></div>
|
||
</div>
|
||
<div id="titre">
|
||
<h1>
|
||
Les idées de yesod
|
||
</h1>
|
||
|
||
</div>
|
||
<div class="flush"></div>
|
||
|
||
|
||
|
||
|
||
|
||
<div class="flush"></div>
|
||
<div id="afterheader">
|
||
<div class="corps">
|
||
<p><img alt="Title image" src="/Scratch/img/blog/Yesod-excellent-ideas/main.png" /></p>
|
||
|
||
|
||
<div class="intro">
|
||
|
||
|
||
<p><span class="sc"><abbr title="Trop long à lire">tlàl</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>
|
||
|
||
<p><img src="http://imgs.xkcd.com/comics/exploits_of_a_mom.png" alt="SQL injection by a mom" /></p>
|
||
|
||
<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>
|
||
|
||
<pre class="twilight">
|
||
Newton<span class="Keyword"><</span>script<span class="Keyword">></span><span class="SupportFunction">alert</span>(<span class="String"><span class="String">"</span>An apple fall<span class="String">"</span></span>)<span class="Keyword"><</span>/script<span class="Keyword">></span>
|
||
</pre>
|
||
|
||
<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>
|
||
|
||
<pre class="twilight"><span class="MetaTagInline"><span class="MetaTagInline"><</span><span class="MetaTagInline">a</span> <span class="MetaTagInline">href</span>=@[<span class="MetaTagInline">AnotherPageR</span>]<span class="MetaTagInline">></span></span>Go to the other page
|
||
</pre>
|
||
|
||
<p>Comme <code>AnotherPageR</code> est une URL elle ne pourra contiendra pas (par défaut) de caractère dangereux comme par exemple :</p>
|
||
|
||
<pre class="twilight">
|
||
falselink"><span class="EmbeddedSource"><span class="EmbeddedSource"><</span><span class="MetaTagInline">script</span><span class="EmbeddedSource">></span> bad_code<span class="EmbeddedSource">(</span><span class="EmbeddedSource">)</span><span class="EmbeddedSource">;</span> <span class="EmbeddedSource"></</span><span class="MetaTagInline">script</span><span class="EmbeddedSource">></span></span><span class="MetaTagInline"><span class="MetaTagInline"><</span><span class="MetaTagInline">a</span> <span class="MetaTagInline">href</span>=<span class="String"><span class="String">"</span>pipo</span></span>
|
||
</pre>
|
||
|
||
<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>
|
||
|
||
<pre class="twilight">
|
||
toWidgetHeader cassiusFile <span class="String"><span class="String">"</span>button.cassius<span class="String">"</span></span>
|
||
toWidgetHeader juliusFile <span class="String"><span class="String">"</span>button.julius<span class="String">"</span></span>
|
||
toWidget hamletFile <span class="String"><span class="String">"</span>buttonTemplate.hamlet<span class="String">"</span></span>
|
||
</pre>
|
||
|
||
<p>Veuillez aussi noté la convention Shakespearienne des noms.
|
||
Encore une bonne raison d’utiliser yesod.</p>
|
||
|
||
<ul>
|
||
<li>Cassius <em class="pala">&</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>
|
||
|
||
<pre class="twilight">
|
||
myBigWidget = menuWidget >> contentWidget >> footerWidget
|
||
</pre>
|
||
|
||
<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>
|
||
|
||
<pre class="twilight">
|
||
/blog/2003 Date2003R
|
||
/blog/$DATE DateR
|
||
</pre>
|
||
|
||
<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>
|
||
|
||
<pre class="twilight">
|
||
/blog/$DATE DateR
|
||
</pre>
|
||
|
||
<p>et faire le test “est-ce que date = 2003 ?” dans le «handler».</p>
|
||
|
||
<h2 id="pourquoi-yesod">Pourquoi yesod?</h2>
|
||
|
||
<ol>
|
||
<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="choixrss">
|
||
<a id="rss" href="http://feeds.feedburner.com/yannespositocomfr">
|
||
s'abonner
|
||
</a>
|
||
</div>
|
||
<script type="text/javascript">
|
||
$(document).ready(function(){
|
||
$('#comment').hide();
|
||
$('#clickcomment').click(showComments);
|
||
});
|
||
function showComments() {
|
||
$('#comment').show();
|
||
$('#clickcomment').fadeOut();
|
||
}
|
||
document.write('<div id="clickcomment">Commentaires</div>');
|
||
</script>
|
||
<div class="flush"></div>
|
||
<div class="corps" id="comment">
|
||
<h2 class="first">commentaires</h2>
|
||
<noscript>
|
||
Vous devez activer javascript pour commenter.
|
||
</noscript>
|
||
|
||
<script type="text/javascript">
|
||
var idcomments_acct = 'a307f0044511ff1b5cfca573fc0a52e7';
|
||
var idcomments_post_id = '/Scratch/fr/blog/Yesod-excellent-ideas/';
|
||
var idcomments_post_url = 'http://yannesposito.com/Scratch/fr/blog/Yesod-excellent-ideas/';
|
||
</script>
|
||
<span id="IDCommentsPostTitle" style="display:none"></span>
|
||
<script type='text/javascript' src='/Scratch/js/genericCommentWrapperV2.js'></script>
|
||
|
||
</div>
|
||
|
||
<div id="entete" class="corps_spaced">
|
||
<div id="liens">
|
||
<ul><li><a href="/Scratch/fr/">Bienvenue</a></li>
|
||
<li><a href="/Scratch/fr/blog/">Blog</a></li>
|
||
<li><a href="/Scratch/fr/softwares/">Softwares</a></li>
|
||
<li><a href="/Scratch/fr/about/">À propos</a></li></ul>
|
||
</div>
|
||
<div class="flush"></div>
|
||
<hr/>
|
||
<div id="next_before_articles">
|
||
<div id="previous_articles">
|
||
articles précédents
|
||
|
||
<div class="previous_article">
|
||
<a href="/Scratch/fr/blog/Higher-order-function-in-zsh/"><span class="nicer">«</span> Fonctions d'ordre supérieur en zsh</a>
|
||
</div>
|
||
|
||
|
||
<div class="previous_article">
|
||
<a href="/Scratch/fr/blog/programming-language-experience/"><span class="nicer">«</span> Mon expérience avec les languages de programmation</a>
|
||
</div>
|
||
|
||
|
||
<div class="previous_article">
|
||
<a href="/Scratch/fr/blog/Learn-Vim-Progressively/"><span class="nicer">«</span> Apprenez Vim Progressivement</a>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<div id="next_articles">
|
||
articles suivants
|
||
|
||
<div class="next_article">
|
||
<a href="/Scratch/fr/blog/SVG-and-m4-fractals/">Accroître le pouvoir des languages déficients. <span class="nicer">»</span></a>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
</div>
|
||
<div class="flush"></div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="bottom">
|
||
<div>
|
||
<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/deed.fr">Droits de reproduction ©, Yann Esposito</a>
|
||
</div>
|
||
<div id="lastmod">
|
||
Écrit le : 04/10/2011
|
||
modifié le : 26/10/2011
|
||
</div>
|
||
<div>
|
||
Site entièrement réalisé avec
|
||
<a href="http://www.vim.org">Vim</a>
|
||
et
|
||
<a href="http://nanoc.stoneship.org">nanoc</a>
|
||
</div>
|
||
<div>
|
||
<a href="/Scratch/fr/validation/">Validation</a>
|
||
<a href="http://validator.w3.org/check?uri=referer"> [xhtml] </a>
|
||
.
|
||
<a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3"> [css] </a>
|
||
.
|
||
<a href="http://validator.w3.org/feed/check.cgi?url=http%3A//yannesposito.com/Scratch/fr/blog/feed/feed.xml">[rss]</a>
|
||
</div>
|
||
</div>
|
||
<div class="clear"></div>
|
||
</div>
|
||
</body>
|
||
</html> |