KnowledgeShop

Learn & Share

JavaScript Ecosystem

JS Ecosystem Overview

  • “JavaScript” is not really a single language. Each browser vendor implements their own JavaScript engine, and due to variations between browsers and versions, JavaScript suffers from some serious fragmentation. (CanIUse.com documents some of these inconsistencies).
  • ES6, also known as ES2015 / Harmony / ECMAScript 6 / ECMAScript 2015, is the most-recent version of the JavaScript specification. (good primer on ES6).
  • Transpilers
    • Tools: Babel
    • process of transforming the standardized JavaScript into a version that’s compatible with older platforms is called_ transpiling_. e.g., ES6 to ES5
    • It’s not much different from compiling. By using a transpiler, you don’t need to worry as much about the headaches of whether or not a given browser will support the JavaScript feature you’re using.
    • Transpiler tools don’t just convert ES6 JavaScript to ES5. There are also tools to do the same thing for JavaScript-variants (such as ClojureScript, TypeScript, and CoffeeScript) to regular JavaScript.
      • ClojureScript is a version of Clojure that compiles down to JavaScript.
      • TypeScript is essentially JavaScript, but with a type system.
      • CoffeeScript is very similar to JavaScript, but with shinier syntax; much of the syntactic sugar promoted by CoffeeScript has been adopted by ES6 now.
  • Build Tools
    • Tools: grunt, gulp, bower, browserify, webpack
    • Basically compiling the code into a production-ready format.
    • Requiring each JavaScript dependency as part of a page, script tag by script tag, is slow. Therefore, most sites use so-called JavaScript bundles. The bundling process takes all of the dependencies and “bundles” them together into a single file for inclusion on your page.
  • Test Tools
    • Tools: Mocha, Jasmine, Chai, Tape, Karma, PhantomJS
    • Karma is a test runner that can run both Jasmine and Mocha-style tests.
    • PhantomJS is a headless browser - it runs without GUI.

Node.js

  • Node.js is a tool for writing server-side JavaScript.
  • npm Node package manager. JavaScript modules are usually packaged and shared via npm.
  • nvm Node version manager. Facilitates managing different version of Node.js.

Runtime Environment

  • Node.js is not a language; not a framework; not a tool. It is a runtime environment for running JS-based applications like JRE for Java.
  • JavaScript Virtual Machine (JsVM)
    • Node.js has a virtual machine called JavaScript Virtual Machine (JsVM) which generates machine code for JS-based applications to enable it on different platforms.
    • We have separate Node.js requirements for different platforms like Windows, Macintosh, and Linux and hence the JsVM.
    • V8 is an open source JavaScript engine from Google. (Nashorn is the Java-based JS engine in JVM). Like the JVM, the JsVM (V8 engine) also has main components like JIT and GC for performing tasks, runtime compilation, and memory management respectively.

  • Node.js also has a set of libraries which may otherwise be known as Node API or Node Modules to help run JS applications at runtime, similar to Java Libraries within the JRE.

  • How the JavaScript program is compiled and executed.
    • The source code is written in JavaScript (.js). There is no intermediate code generated before giving it to JsVM, the V8 engine.
    • The JsVM takes this source code directly and compiles it to machine code specific to the given target platform for execution.

Web Application Architecture

  • The client requests are handled by a single thread, but asynchronously. With Java, each client request is handled by a separate thread synchronously.
  • There are many frameworks/libraries available for Node.js-based web application development. E.g., Express.js, Angular.js, Mongoose.js, etc.
    • Client layer: Angular.js, a client-side MVC framework.
    • Presentation + Service layer: can be developed by using Express.js. This also comes with a standalone server for running Node.js applications.
    • Data layer: uses an Object Data Modelling module (e.g. Mongoose.js) for communicating with NoSQL databases like MongoDB.
    • This particular stack is called MEAN stack , which consists of MongoDB, Express.js, Angular.js, and Node.js (the runtime environment)

References