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