Category: JS

Comparison of Java Script Modules and Dependency Managing Frameworks

Comparison of Java Script Modules and Dependency Managing Frameworks

Modular programming is a software design technique that emphasizes separating the functionality of a program into independent, interchangeable modules, such that each contains everything necessary to execute only one aspect of the desired functionality. Module based coding eases the effort for maintenance and increases re-usability.

However, managing dependencies between modules is a major concern Java Script developers faced. Hence there are several module and dependency management frameworks became famous among JS developers to give the responsibility to manage dependencies properly in larger projects.

For Eg:

 

 

But first three are the most popular and most used frameworks.

Choosing the right module loader is an important decision for any high quality web application. Large applications often require a number of JavaScript files. Generally, they are loaded one by one using <script> tags. Additionally, each file can potentially be dependent on other files. You don’t want to add script tags manually into the html because is not scalable (you have to manually order, no deploy minification…).

Following is a comparison listed in webpack documentation.

Feature webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli
CommonJs require yes only wrapping in define yes yes
CommonJs require.resolve yes no no no
CommonJs exports yes only wrapping in define yes yes
AMD define yes yes deamdify yes
AMD require yes yes no yes
AMD require loads on demand yes with manual configuration no yes
ES2015 import/export no no no yes
Generate a single bundle yes yes♦ yes yes
Load each file separate no yes no yes
Multiple bundles yes with manual configuration with manual configuration yes
Additional chunks are loaded on demand yes yes no System.import
Multi pages build with common bundle with manual configuration yes with manual configuration with bundle arithmetic
Concat in require require(“./fi” + “le”) yes no♦ no no
Indirect require var r = require; r(“./file”) yes no♦ no no
Expressions in require (guided) require(“./templates/” + template) yes (all files matching included) no♦ no no
Expressions in require (free) require(moduleName) with manual configuration no♦ no no
Requirable files file system web file system through plugins
Plugins yes yes yes yes
Preprocessing loaders, transforms loaders transforms plugin translate
Watch mode yes not required yes not needed in dev
Debugging support SourceUrl, SourceMaps not required SourceMaps SourceUrl, SourceMaps
Node.js built-in libs require(“path”) yes no yes yes
Other Node.js stuff process, __dir/filename, global process, __dir/filename, global process, __dir/filename, global for cjs
Replacement for browser web_modules, .web.js, package.json field, alias config option alias option package.json field, alias option package.json, alias option
Minimizing uglify uglify, closure compiler uglifyify yes
Mangle path names yes no partial yes
Runtime overhead 243B + 20B per module + 4B per dependency 14.7kB + 0B per module + (3B + X) per dependency 415B + 25B per module + (6B + 2X) per dependency 5.5kB for self-executing bundles, 38kB for full loader and polyfill, 0 plain modules, 293B CJS, 139B ES6 System.register before gzip
Dependencies 19MB / 127 packages 11MB / 118 packages 1.2MB / 1 package 26MB / 131 packages

Following articles have much detailed comparison of above frameworks.

  1. What are the best client-side JavaScript module loaders?
  2. Module loader comparison: Webpack vs Require.js vs Browserify
  3. Webpack comparison

 

Comparison of Java Script Document Generators

Comparison of Java Script Document Generators

One of your least desirable and least rewarding tasks as a software developer is creating documentation. Whether it’s for code you’re creating, a change you’re contemplating, or a problem that you’re trying to resolve, the actual task of documentation is often dull and unimaginative. Yet detailed, accurate, up-to-date documentation is of enormous value.

  • It helps insure that changes made to the source code don’t create unforeseen problems. It speeds and focuses software peer review efforts.
  • It lowers the likelihood of misunderstandings among developers and quality assurance teams.
  • It alleviates the need to spend time hand-holding new engineers as they get up to speed.

So as documenting is essential in software development, in JavaScript world following are some famous document generator tools for documenting APIs.

  • DoccoLogodoxxDOCCO
  • YUI
  • JSDoc
  • Doxxyui-logo-2xjsdoc_featured

Following table compares the above generator tools each other.

JSDoc

YUIDoc

Doxx

Docco

Syntax

Structured

Structured

Structured

Unstructured

Accessibility
(default theme)

Low

High

High

High

Search feature

Yes, not by default

Yes

No

No

Extra themes

Docstrap

One bundled. Others available.

No.

Bundled

Learning curve

Medium

Medium

Low

None

Source parsing

Yes

No

No

No

Customization

High

Medium

Low

Very low

Extensibility

High

Medium

Low

None

Speed

Medium

Low

N/A

Very High

A more detailed comparison can be found in here.

And a great discussion of the importance of good documentation can be found here.

Sample documentation pages of above tools for the same source are given in below. Take a look of the visual appeal of each. But in JSDoc we could customize it as we wanted.