What is it all about?
Suppose that you need to build a complete website or webapp, despite all the simplifications provided these last years, there are still a lot of things to write. Even if you are using an intelligent editor, you will probably take hour, if not days, writing enclosing brackets, tags or things alike : You are repeating yourself and that is not agile at all. One of the main principle teached by agility is stay DRY. These repetition being solely required owing to the verbosity of HTML, JavaScript and CSS. So, it's time to put this principle even into codes.
When you move to preprocessor, you can choose a different set of languages that will keep you away from these repetitions. Therefore, you can focus more on your programs than on their grammar.
Removing the hassle on HTML : Jade
My favorite preprocessor for authoring HTML, XML*, SVG* is Jade. A little example in this field is worth a thousand words:
helloworld.html
helloworld.jade
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<p>Hi, there</p>
</body>
</html>
helloworld.jade
doctype html
html(lang='fr')
head
meta(charset='utf-8')
title Hello World
body
p Hi, there
* : Yes, you read me well. I even use Jade for writing XML and SVG. It creates nice and readable source file while creating small XML and SVG files.
Lessen the burden of CSS : Sass
Sass is a well known preprocessor used for easing development of CSS. Many of its features are used as a basis of enhancements for future CSS evolutions : it's format is known as SCSS. You can see it as a superset of basic CSS. What you may not know is that Sass provides a second grammar. Actually, it's its initial grammar, much much more concise. It is called Sass. Pretty straightforward, isn't it? Like always, a little example gives you an instant overview of what you will not type anymore:
style.css
body {
background-repeat: green;
}
.some-class {
padding-left: 2em;
}
.some-class .some-inner-class {
padding-left: 1em;
}
style.sass
body
background-repeat: green
.some-class
padding-left: 2em
.some-inner-class
padding-left: 1em
Relieve the pain of JS : CoffeeScript
Sure, asynchronous programming performs well. But in JS, keeping on repeating
function and var over and over, adjusting parenthesis and brackets, keeping on doing the same patterns, is a pain. Even with the upcoming promises, vanilla JS is painfully slow to write. Powerful but so demanding on its grammar. Thanks to CoffeeScript, this pain becomes almost unnoticeable. Treated. Another little example of a simple class that prints out a message and you will see the difference:
echoingclass.js
var EchoingClass, inst1;
EchoingClass = (function() {
function EchoingClass() {
console.log('Echo World, or Eco me');
}
return EchoingClass;
})();
inst1 = new EchoingClass;
echoingclass.coffee
class EchoingClass
constructor: ->
console.log 'Echo World'
inst1 = new EchoingClass
Conclusion
These examples are just some of the preprocessors that I like to use. There are plenty of other ones that I haven't mentioned but used depending on the team that I've worked with: HAML, Dart, Typescript, Less, Stylus, ...
The objective is to choose at least one of them and start being much more productive by focusing on your code, not on its grammar.
Side note
Don't you think that these language look a lot like Python? Charming snake.
Side note
Don't you think that these language look a lot like Python? Charming snake.
Aucun commentaire:
Enregistrer un commentaire