PostCSS & BabelJS

About this tools ;)

Transcript

1. PostCSS & BabelJS @arturparkhisenko 2016
2. 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.
3. 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.
4. How do they work? Something like this:
5. About them Features: All features implemented by plugins Future: We can use tomorrow’s CSS/JS today!
6. What we have for CSS Preprocessors like sass, less, stylus, myth, they all have: variables, inheritance, mixins, importing, nesting.. but we want more!
7. 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
10. PostCSS Author Andrey Sitnik Saint Peterburg, Russia http://sitnik.ru/ https://github.com/ai https://twitter.com/andreysitnik
11. PostCSS stats 88,794 downloads in the last day 523,980 downloads in the last week 2,254,276 downloads in the last month
12. Visit: https://ai.github.io/about-postcss/ or https://ai.github.io/about-postcss/en/ PostCSS slides
13. 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.
14. 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.
15. BabelJS Author Sebastian McKenzie London, England https://github.com/kittens https://twitter.com/sebmck
16. BabelJS stats 22,458 downloads in the last day 130,380 downloads in the last week 528,961 downloads in the last month
17. 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
18. 2016 https://arturparkhisenko.github.io/ Thanks!