Pré/Post-Processeur et autres outils

Comme nous pouvons le voir dans l’article Les automatiseurs de tâches il existe un grand nombre d’outils nous permettant d’automatiser un certain nombre de processus inhérents au développement de site et applications web.

Nous allons voir au cour de ce présent article que le flux d’écriture du code, et même l’ensemble de la conception d’applications web, peut encore être affiné et optimisé. Qu’il s’agisse de HTML, de CSS ou de JavaScript, nous avons à disposition un grand nombre d’outils qui vont nous aider, et surtout simplifier, la production de modèles.

Les divers modes d’aide à l’écriture

Certains outils vont permettre d’utiliser un méta langage abrégé qu’il suffira de compiler afin de générer un code plus abouti, d’autres seront plus complet apporteront au travers d’un véritable framework tout un ensemble de possibilités permettant de travailler sur des modèles de conception plus élaborés. Voici quelques exemples, non exhaustifs, mais permettant de mieux comprendre ces types d’outils.

Emmet avec l’abréviation suivante

ul.ensemble>(li>i[class="pe-7s-"]+a[href="../html/"]{Menu $})*6

produira le code HTML suivant

<ul class="ensemble">
      <li><i class="pe-7s-"></i><a href="../html/">Menu 1</a></li>
      <li><i class="pe-7s-"></i><a href="../html/">Menu 2</a></li>
      <li><i class="pe-7s-"></i><a href="../html/">Menu 3</a></li>
      <li><i class="pe-7s-"></i><a href="../html/">Menu 4</a></li>
      <li><i class="pe-7s-"></i><a href="../html/">Menu 5</a></li>
      <li><i class="pe-7s-"></i><a href="../html/">Menu 6</a></li>
</ul>

Sass et sa syntaxe proche de CSS, mais complétée par des directives

$portail                     : 'portail',rgb(209, 205, 205);
$accueil                     : 'accueil',rgb(0, 70, 140);
$etablissements              : 'etablissements',rgb(140, 0, 0);
$ENVIRONNEMENTS : $portail,$accueil,$etablissements;

@each $i,$j in $ENVIRONNEMENTS {
     body {
          &.#{$i} {
               .container > nav[role=navigation] {
                    background-color: transparentize($j, 0.85);
             }
          }
     }
}

compilera le code CSS suivant

body.portail .container > nav[role=navigation] {
    background-color: rgba(209, 205, 205, 0.15);
}
body.accueil .container > nav[role=navigation] {
    background-color: rgba(0, 70, 140, 0.15);
}
body.etablissements .container > nav[role=navigation] {
    background-color: rgba(140, 0, 0, 0.15);
}

Un grand nombre de langage de modèle client permettent de séparer modèle et contenu

template: "<h1>{{titrepage}}</h1><p>Le contenu du paragraphe {{valeurparaf}}!</p>"
variables: {titrepage: "Bienvenue dans les modèles", valeurparaf: "peut être généré par le modèle"}

produiront le contenu suivant

<h1>Bienvenue dans les modèles</h1>
<p>Le contenu du paragraphe peut être généré par le modèle!</p>

Bien que tout ceci puisse paraître plus compliqué que de directement écrire le code, il n’en est rien, et, en pratiquant et en utilisant ces outils au quotidien, on réalise rapidement le gain de productivité qu’ils apportent et surtout la grande souplesse qu’ils nous offrent sur la maintenance et l’évolutivité de nos algorithmes.

Les principaux outils à disposition

Voici un tableau rassemblant les principaux outils et convertisseurs que l’on peut trouver dans la panoplie du web développeur. Nous explorerons, en fonction des besoins, leur mise en place et leur utilisation de manière plus verticale au travers d’articles dédiés. S’ils existent, chaque article est listé à la suite de la description du logiciel.

Pre-Post Processeurs - Templating

Outils		Langages	Nature	Description
CoffeeScript		JS	Langage de programmation	CoffeeScript is a little language that compiles into JavaScript. Underneath that awkward Java-esque patina, JavaScript has always had a gorgeous heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way. The golden rule of CoffeeScript is just JavaScript. The code compiles one-to-one into the equivalent JS, and there is no interpretation at runtime. You can use any existing JavaScript library seamlessly from CoffeeScript (and vice-versa). The compiled output is readable, pretty-printed, and tends to run as fast or faster than the equivalent handwritten JavaScript.
Dust		JS	Javascript Templating Engine	Dust is a Javascript templating engine. It inherits its look from the ctemplate family of languages, and is designed to run asynchronously on both the server and the browser.
ECT		JS	Javascript Templating Engine	Fastest JavaScript template engine with embedded CoffeeScript syntax
EJS (Effective)		JS/HTML	Client-side templating language	E' is for 'effective.' EJS is a simple templating language that lets you generate HTML markup with plain JavaScript. No religiousness about how to organize things. No reinvention of iteration and control-flow. It's just plain JavaScript.
EJS (Embedded)		JS/HTML	Client-side templating language	EJS is a client-side templating language that was originally part of JavaScriptMVC, which has now been replaced by DoneJS.
Emmet		HTML/CSS	Convert abbrreviations	Basically, most text editors out there allow you to store and re-use commonly used code chunks, called snippets. While snippets are a good way to boost your productivity, all implementations have common pitfalls: you have to define the snippet first and you can't extend them in runtime. Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too.
Fortitude		CSS	CSS Framework	Fortitude is built on top of some of the best conceptual layers that have hit the industry, to save you from common difficulties in CSS at scale.
HAML		HTML	Abstraction language	Haml (HTML Abstraction Markup Language) is a templating system that is designed to avoid writing inline code in a web document and make the HTML easy and clean. Haml gives the flexibility to have some dynamic content in HTML. Similar to other web languages like PHP, ASP, JSP and template systems like eRuby, Haml also embeds some code that gets executed during runtime and generates HTML code in order to provide some dynamic content. In order to run Haml code, files need to have .haml extension. These files are similar to .erb or eRuby files which also help to embed Ruby code while developing a web application.
Handelbars		JS/HTML	Client-side templating language	Handlebars provides the power necessary to let you build semantic templates effectively with no frustration. Handlebars is largely compatible with Mustache templates. In most cases it is possible to swap out Mustache with Handlebars and continue using your current templates.
Hogan		JS/HTML	Javascript Templating Engine	Hogan.js is a 3.4k JS templating engine developed at Twitter. Use it as a part of your asset packager to compile templates ahead of time or include it in your browser to handle dynamic templates.
Jade		HTML	Client-side templating language	Jade is a terse language for writing HTML templates. Produces HTML, Supports dynamic code and Supports reusability (DRY)
Jazz		JS/HTML	Javascript Templating Engine	Jazz is a simple template engine built specifically for nodejs.
JSON-T		JS/HTML	Javascript Templating Engine	JSON Template (JSON-T) is a minimal but powerful template language, designed to be paired with a JSON dataset. This data is provided by Squarespace and is dynamically generated, containing all of your site content. Squarespace uses JSON-T to transform data into a web page. This process is called 'rendering' the web page. The renderer combines data from the CMS, also known as the 'context' with the JSON-T code to create the HTML output. That HTML is then sent to your browser and displayed.
Less		CSS	CSS Preprocessor	Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themeable and extendable.
Liquid		JS/HTML	Client-side templating language	Liquid is an open-source template language created by Shopify and written in Ruby. It is the backbone of Shopify themes and is used to load dynamic content on storefronts.
Markdown		HTML	Plain text formatting	Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).
Mustache		JS/HTML	Client-side templating language	Mustache is a simple web template system with implementations available for ActionScript, C++, Clojure, CoffeeScript, ColdFusion, Common Lisp, D, Dart, Delphi, Erlang, Fantom, Go, Haskell, Io, Java, JavaScript, Julia, Lua, .NET, Objective-C, OCaml, Perl, PHP, Pharo, Python, R, Racket, Ruby, Rust, Scala, Smalltalk, Swift, Tcl, CFEngine and XQuery.
Nunjucks		JS/HTML	Client-side templating language	Templating frameworks separate the layout of dynamic web sites and applications from the logic that integrates with it. All frameworks support various forms of looping, conditional logic and special formatting. But I also wanted an engine that supported advanced page composition elements, to enable me to share layouts across pages, to include blocks of functionality when required, and to generally make it as simple as possible to construct moderately complex page layouts with the minimum of code and as little duplication of effort as possible.
PostCSS		CSS	Framework to develop CSS tools	PostCSS is a software development tool that uses JavaScript-based plugins to automate routine CSS operations. The tool has been used to develop the code of Wikipedia, Facebook, and GitHub. PostCSS is a top-favored CSS tool among npm users. It was designed by Andrey Sitnik with the idea taking its origin in his front-end work for Evil Martians.[
Sass		CSS	CSS Preprocessor	Sass (syntactically awesome stylesheets) is a style sheet language initially designed by Hampton Catlin and developed by Natalie Weizenbaum.[2][3] After its initial versions, Weizenbaum and Chris Eppstein continued to extend Sass with SassScript, a simple scripting language used in Sass files.
Slim		JS/HTML	Client-side templating language	Slim is a template language whose goal is to reduce the syntax to the essential parts without becoming cryptic.
Stylus		CSS	CSS Preprocessor	Stylus is a dynamic stylesheet language that is compiled into Cascading Style Sheets (CSS). Its design is influenced by Sass and LESS. It's regarded as the fourth most used CSS preprocessor syntax.[4] It was created by TJ Holowaychuk, a former programmer for Node.js and the creator of the Luna language. It is written in JADE and Node.js.
templayed		JS/HTML	Client-side templating language	The fastest and smallest Mustache compliant Javascript templating library written in 1806 bytes (uncompressed)
toffee		JS/HTML	Client-side templating language	a NodeJS and browser templating language based on coffeescript, with the slickest syntax ever
walrus		JS/HTML	Client-side templating language	Walrus is a templating library inspired by mustache, handlebars, ejs and friends, but with a couple of important differences in philosophy and style
YAML		Datas	Human-readable data serialization language	YAML (YAML Ain't Markup Language) is a human-readable data serialization language. It is commonly used for configuration files, but could be used in many applications where data is being stored (e.g. debugging output) or transmitted (e.g. document headers). YAML targets many of the same communications applications as XML but has a more minimal syntax which intentionally breaks compatibility with SGML, similar to JSON. It uses whitespace indentation for syntax, but also can use braces and brackets making YAML 1.2 a superset of JSON.