15

What is the difference between preprocessors and transpilers (or transcompilers)?

I already found the difference between compiler and transpiler, when searching for the answer.

For example CSS preprocessors (Sass, Less) and JS transpilers (CoffeeScript, TypeScript). Are they the same thing? I mean, do they do the same thing?

In some places it is read "JS preprocessors", but then, when I Google that, I can't find any worthy information.

For now, I'm thinking, that preprocessors just convert for example sass to CSS, to more "readable" for the browser. And transpilers compile the whole thing, from coffee script language to JavaScript language.

So am I right here, that the transpiler just compiles the whole thing (which is bigger process), and preprocessor just converts to more "readable"?

Or is Sass, for example, just as different language from CSS as CoffeeScript is from JavaScript?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Chris
  • 151
  • 2
  • 4
  • 1
    Have you read this? https://www.quora.com/What-is-the-preprocessor-in-web-developing – Christian Esperar Apr 18 '17 at 17:56
  • Hi! No I didn't found that one, but that is really helpful! Thank you! – Chris Apr 19 '17 at 18:25
  • Whether Sass/Coffeescript are truly different languages than Js/CSS is probably up for debate. But there are more simple examples of preprocessors, for example many servers use templating libraries to interpolate text into HTML at the time the page is server. As I understand it the main difference is that a transpiler will convert from one source code language/format to another while a preprocessor might not. – max pleaner Apr 25 '17 at 18:06

4 Answers4

13

Preprocessors

The Term Preprocessor is defined in a wikipedia article as:

In computer science, a preprocessor is a program that processes its input data to produce output that is used as input to another program. The output is said to be a preprocessed form of the input data, which is often used by some subsequent programs like compilers.

It is a piece of software that is used to prepare the code to be compiled. A good example is the C Preprocessor.

The C Preprocessor according to the documentation of gcc provided by gnu is:

The C preprocessor, often known as cpp, is a macro processor that is used automatically by the C compiler to transform your program before compilation.

For example, it looks for lines beginning with # and take an action such as: replacing them with some other text.

Transpilers

According to this wikipedia article transpilers are:

A source-to-source compiler, transcompiler or transpiler is a type of compiler that takes the source code of a program written in one programming language as its input and produces the equivalent source code in another programming language.

One example is Babel. Babel is a JavaScript transpiler that converts edge JavaScript into plain old ES5 JavaScript that can run in any browser (even the old ones).

It helps you take advantage of edge javascript and have it run in environments that still do not support it by transpiling it down to a version of javascript that it understands.

The following is taken from Babel's github page

Babel is a tool that helps you write code in the latest version of JavaScript. When your supported environments don't support certain features natively, Babel will help you compile those features down to a supported version.

Hope this helps!

Community
  • 1
  • 1
Hazem Alsughair
  • 235
  • 2
  • 8
6

This answer by Steve Baker, quoted below, explains it well.

Generally, a pre-processor takes in code in language X - transforms it in some way - and outputs language X code.

Generally, a compiler takes in code in language X - and output it in machine code (or possibly assembly language).

A third class of thing is a “transpiler” - which takes in code in language X and outputs code in language Y…another human-readable language.

A great example of a preprocessor is the C language preprocessor. It doesn’t know much about the C language - except for comments and lines that begin with the “#” character.

So in C, you can say things like:

#define HW “Hello World”

…and everywhere it sees HW after that, it’ll replace it with “Hello World”.

It also knows things like

    #ifdef HW 
    ….stuff… 
    #endif

…which says if the #define for “HW” exists then include the lines up to #endif - otherwise delete them.

So the input to the C preprocessor is C code (with a bunch of lines that start with “#”) and the output is C code with a bunch of substitutions, some code removed - other code included from other files, etc.

Ozichukwu
  • 396
  • 3
  • 12
0

I searched for e-books and found something that clarifies this, or at least I think it does.

Preprocessors and transpilers were introduced as abstractions to HTML, CSS, and JavaScript as a means of adding features that aren’t available in the source language, keeping code DRY (Don’t Repeat Yourself), making code more maintainable, and saving you time. Browsers cannot execute this abstracted code, but the build system can compile to something they can.

This is from: Chapter 1, Stryjewski, T. & Mao, J. 2016. Developing a gulp edge, Second Edition. Bleeding Edge Press. Santa Rosa, CA.

Chris
  • 151
  • 2
  • 4
0

It's important to keep in mind that definitions of concepts such as these in CompSci may be quite slippery, and different languages may use them differently. In this case, transpiler is quite a bit more common and thus stable in meaning as a term than preprocessor, so while Sass might want to call itself a preprocessor, the fact that it transforms one language (Sass/SCSS) to another language (CSS) arguably makes it a transpiler.

Whether we want to extend the definition of preprocessor to include transpiler or whether we want to say that Sass has misnamed itself probably depends in part whether the use of 'preprocessor' will be influenced by it being used in the sense of transpiler in the CSS field.

Sam
  • 121
  • 4