Why Web Dev Preprocessors are So Important?

Preprocessors are so important certain days. Because web developers want to code complex definitions in fast, dynamic and more readability code. Browsers understand HTML, CSS, and Javascript. But developers always require high-level languages for making big things. It’s similar to Assembly → C → Java

• Less, SCSS, SASS Preprocessor converts stylings to CSS
• JSX, ES6, ES7, TypeScript Transpiler(Babel) converts to JS2015
• ESLint Javascript linter to validate EcmaScript and Java

Webpack is a tool and one of its responsibility manages preprocessors and loaders.

• Files:raw-loader ,val-loader url-loader,file-loader,ref-loader
• JSON:json-loader json5-loader cson-loader
• Transpiling:script-loader, babel-loader ,buble-loader ,traceur-loader ts-loader awesome-typescript-loader coffee-loader fengari-loader
• Templating: html-loader pug-loader markdown-loader react-markdown-loader posthtml-loader handlebars-loader markup-inline-loader twig-loader
• Styling:style-loader css-loader less-loader sass-loader postcss-loader stylus-loader
• Linting and Testing: mocha-loader, eslint-loader, jshint-loader, jscs-loader, coverjs-loader
• Frameworks:vue-loader,polymer-loader, vue-loader

What SaSS / Less provides our code? different than CSS

Variables: You can use variables. This gives flexibility. You can generate custom color names or custom sizes for common usages.

Samples were taken https://sass-lang.com

Nesting: Provides hierarchical styling and prevent name repetition

Samples were taken https://sass-lang.com

Imports: Code splitting. You manage CSS styling code into small pieces files and if required import from other files. @import

Samples were taken https://sass-lang.com

Mixins: Another version of multiple compositions of different logic. How to inject common styling logic to element, class, etc. @include and @mixin mechanism provide this.

Samples were taken https://sass-lang.com

Extend/Inheritance: @extends

Samples were taken https://sass-lang.com

Operations: +, -, * , / and % . you can use

Samples were taken https://sass-lang.com

Functions: UserDefined or Builtin Functions Some of Build in functions

• Number functions, String functions, Color functions, List functions, Map functions, Selector functions,Introspection functions

Samples were taken https://sass-lang.com

And Other At Rules: @error, @debug @warning and Flow Controls (@if . @else @each @for @while)

What’re the advantages of Babel?

Babel is javascript compiler and it’s mainly used to convert ECMAScript 2015+ , React JSX or Typescript code into a backward-compatible version of JavaScript in current and older browsers or environments

Babel has 3 stagings when compiling; parsing, transform and print. And it has plugins mechanism

You can use all the advantages of other languages and no think how to run on the current or older browsers

Transform Plugins

ES3, ES5, ES2015, ES2016, ES2017, ES2018, Modules, Experimental, Minification, React, Other

Syntax Plugins

What’re the advantages of ESLint?

ESLint parses codes and validates according to defined rules. So you can fix problems without running and increate code readability

• Working with rules
• Working with plugins
• Working with custom formatters
• Working with custom parsers

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.