Preprocessors
A preprocessor is a program that takes one
type of data and converts it to another
type of data. In the case of HTML and CSS,
some of the more popular preprocessor
languages include Haml and Sass. Haml is
processed into HTML and Sass is processed
into CSS.
Slide 3
Slide 3 text
Transpilers
Transpilers, or source-to-source compilers, are tools
that read source code written in one programming
language, and produce the equivalent code in another
language.
Languages you write that transpile to JavaScript are
often called compile-to-JS languages, and are said to
target JavaScript.
Slide 4
Slide 4 text
How do they work?
Something like this:
Slide 5
Slide 5 text
About them
Features:
All features implemented by plugins
Future:
We can use tomorrow’s CSS/JS today!
Slide 6
Slide 6 text
What we have for CSS
Preprocessors like sass, less, stylus, myth,
they all have:
variables, inheritance, mixins, importing,
nesting.. but we want more!
Slide 7
Slide 7 text
PostCSS
http://postcss.org/
PostCSS can do the same work as
preprocessors like Sass, Less, and Stylus.
But PostCSS is modular, 3-30 times faster,
and much more powerful.
v5 supports custom syntaxes
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
PostCSS Author
Andrey Sitnik
Saint Peterburg, Russia
http://sitnik.ru/
https://github.com/ai
https://twitter.com/andreysitnik
Slide 11
Slide 11 text
PostCSS stats
88,794 downloads in the last day
523,980 downloads in the last week
2,254,276 downloads in the last
month
Slide 12
Slide 12 text
Visit:
https://ai.github.io/about-postcss/
or
https://ai.github.io/about-postcss/en/
PostCSS slides
Slide 13
Slide 13 text
What we have for JS
You've probably heard about CoffeeScript and TypeScript.
CoffeeScript provides syntactic sugar for a number of
features not yet native to JavaScript, while discouraging
some of JavaScript's "bad parts". TypeScript is more
drastic, adding classical object-oriented semantics to a
fundamentally different language. Anything you can write
in JavaScript, you can write in CoffeeScript or TypeScript.
Examples of transcompiled languages include Closure
Compiler, Haxe, Dart, TypeScript and Emscripten.
Slide 14
Slide 14 text
BabelJS
https://babeljs.io/
ES2015 and beyond
Babel has support for the latest version of JavaScript
through syntax transformers. These plugins allow you
to use new syntax, right now without waiting for
browser support.
Slide 15
Slide 15 text
BabelJS Author
Sebastian McKenzie
London, England
https://github.com/kittens
https://twitter.com/sebmck
Slide 16
Slide 16 text
BabelJS stats
22,458 downloads in the last day
130,380 downloads in the last week
528,961 downloads in the last
month
Slide 17
Slide 17 text
Visit:
https://speakerdeck.com/tgriesser/th
e-future-is-now-javascript-es6-and-bab
el-js
or
https://speakerdeck.com/sebmck/bab
el-facebook-april-2015
BabelJS slides