Javascript Preprocessors

 Some compilers have a precompile or preprocessor to process statements, that are not part of the computer programming language. The preprocessor is the first to look at the source code file and performs several preprocessing operations before it's compiled by the compiler.

In computer languages such as C there is a phase of translation known as preprocessing. The amount and kind of processing done depends on the nature of the preprocessor. Some preprocessors are only capable of performing relatively simple textual substitutions and macro expansions, while others have the power of full-fledged programming languages.

No Preprocessor specifically designed for JavaScript. Lexical (Language) preprocessors are flexible, which means, they are preprocessors with lexical analysis rules, that can be customized and can used with JavaScript. It is advisable to use preprocessors that have been designed for a language having a similar syntax as JavaScript.

Let us now explore the Google Chrome development tool, also called Chrome DevTools, which has JavaScript preprocessing features.

Chrome DevTools

Chrome DevTools is in-built with Google Chrome browser. The Chrome DevTools JavaScript preprocessor captures JavaScript before compilation and allows JavaScript to be trans-coded. The preprocessor facilitates and artificial runtime be constructed in JavaScript.

JavaScript work well with browser, various compilers used to convert JavaScript

Supported Preprocessors and Trans compilers are:

  1. CoffeScript Language and Compiler: to compile CoffeeScript code into JavaScript, install CoffeeScript package using npm coffeescript. Npm is the default package manager for JavaScript runtime environment Node.Js.                                                                                                             
  2. TypeScript Language and Compiler: superset of JavaScript and more suitable for large scale development. Better feature as compared to JavaScript. More important features are:

·        Built on JavaScript

·        Library Support

·        JS and TS are equivalent

·        TypeScript is light

·        TypeScript aligns with ECMAScript provisions

 Benefits of TypeScript

  1. Dart or CoffeeShop need a language specific environment where TypeScript has no such requirement. As it is JavaScript based.                                                                                                
  2. Duck Typing: when an object is passed through a combination of properties and methods to determine its semantics and belongings, it is known as duck-typing. TypeScript uses duck-typing to define structure that are complex.                                                                                                    
  3. Traceur.js is a JavaScript compiler by google. It is not only easy to utilize but also excludes the complications with massive build system. ES modules can load easily when Traceur incorporated in a page.

 

ES6 module?

Babel is open source JavaScript compiler and used for web development. Software developer can write source code in a preferred markup language or programming language, they need babel as source-to-source compiler to translate into JavaScript so modern web browser can read it.

 Features of Babel:

·        Transform syntax

·        Source code transformations

 UglifyJS: is a tool that compresses a JavaScript file, by removing whitespace and even replaces long variable name with smaller one and written in JavaScript it enhanced performance but reduces readability.

Comments

Post a Comment

Popular posts from this blog

Oracle E-Business Suite Applications - R12 – PROCURE TO PAY CYCLE

Image
  This is a pure functional Stuff and helps you to understand the navigation steps. Stage 1: Choosing an Item Go to Purchasing Responsibility and follow the below navigation to check for the suitable item. The item picked for our example should be purchasable item as above.   Click on tools and choose “Categories” to view the below screen. Stage 2: Creation of Requisition Follow the below Navigation to reach Requisition Form. Create a new Requisition for the item viewed in Stage 1. Click on Distributions to View the charge Account. Save and Submit for Approval Now note down the Requisition number and open the “Requisition Summary Form” to view the status of it. For our Example, Requisition number is: 14855 Stage 3 : Checking the Status of Requisition Query for the Requisition Number and click Find. Here for our example purpose, I kept the submitted and approved person has same and hence it shows the status as approved. To see the approval status, please follow the below navi...
Read more

Minification in JavaScript.

Image
Overview Minifying JavaScript files is an optimization technique to reduce JavaScript payload and the main-thread blocking time. Minification can help  reduce JavaScript file sizes  by removing comments, white spaces, and redundant code, and in some cases, also makes the code more efficient by using shorter variable and function names. The  smaller  these JavaScript files are, the  faster  they are downloaded, parsed, and executed by the browser. How does minifying JavaScript affect page  performance? Whenever the browser loads a page, it needs to download, parse, and execute JavaScript files during the page load. Since this happens on the main-thread  by default, a higher JavaScript payload will block the main-thread for longer, extending your page load. Minification makes your code leaner and more compact by removing unnecessary elements, decreasing the file size, reducing the bandwidth consumed, and speeding up your overall page load ...
Read more