The document discusses several tools for JavaScript development including:
1. ECMAScript 6 for new JavaScript features, Visual Studio Code for editing, and Node.js & npm for modules.
2. Build tools like webpack, Babel, and UglifyJS to bundle, transpile, and minimize code.
3. Testing with Jasmine and debugging with Chrome Developer Tools and source maps.
4. Documentation generation with YUIDoc.
A demo project is provided at https://github.com/simonkim/jstools-demo to show how to use these tools together in a workflow.
8. Node.js & npm
Node.js - https://nodejs.org/
JavaScript Runtime Built on Chrome’s V8 JavaScript Engine
Event Driven
Non-Blocking IO Model
npm - https://www.npmjs.com
Package Manager for JavaScript
Share and Reuse Node.js Modules
$ npm install express
9. # To publish
$ npm login
$ npm publish
npm - Example Node.js Module
See Using a package.json for Details
// package.json
{
"name": "mymodule",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified"
&& exit 1",
},
"author": "",
"license": "ISC"
}
// index.js
function Mymodule() {
}
Mymodule.prototype.hello = function() {
console.log(“Hello, Node.js module”);
}
module.exports = Mymodule;
// sample.js
Mymodule = require(‘./index’);
var mymodule = new MyModule();
mymodule.hello();
// Hello, Node.js module
10. Build
JavaScript is Interpreter Language, Why Build?
Bundle Multiple Modules into Single .JS File
<script src=”app.bundle.js” />
Transpile
Write in ES6, CoffeeScript, or TypeScript
Run Browser Compatible Version of JavaScript
Minimization and Obfuscation
The Smaller, The Faster Loading
Hard to Read Source
11. Build
GRUNT - http://gruntjs.com
A JavaScript task runner for automation configured in Gruntfile
gulp.js - http://gulpjs.com
Streaming build system runs tasks defined in gulpfile.js
Browserify - http://browserify.org
Bundle node modules to allow running in browsers
webpack - https://webpack.github.io
A module bundler: takes modules with dependencies and generates static assets
22. Testing
Jasmine - http://jasmine.github.io
“Jasmine is a behavior-driven development framework for testing JavaScript code.”
Karma - https://karma-runner.github.io/
Test Runner. Unit Testing.
And Many Others.
23. Testing - Jasmine
Install ‘jasmine’ command
$ npm install -g jasmine
Create jasmine.json, default
configuration
$ jasmine init
Write test cases, jasmine specs, and
run
$ jasmine
// myappSpec.js
describe("A suite", function() {
it("contains spec with an expectation",
function() {
expect(true).toBe(true);
});
it("The 'toBeLessThan' matcher is for
mathematical comparisons", function() {
var pi = 3.1415926,
e = 2.78;
expect(e).toBeLessThan(pi);
expect(pi).not.toBeLessThan(e);
});
});
24. Running Tests in a Browser
In HTML, include source and spec files and jasmine files
Open the HTML File in Browser
Testing - Jasmine
<link rel="shortcut icon" type="image/png"
href="lib/jasmine-2.4.1/jasmine_favicon.png">
<link rel="stylesheet" href="lib/jasmine-
2.4.1/jasmine.css">
<script src="lib/jasmine-
2.4.1/jasmine.js"></script>
<script src="lib/jasmine-2.4.1/jasmine-
html.js"></script>
<script src="lib/jasmine-
2.4.1/boot.js"></script>
<!-- include source files here... -->
<script
src="../public/dist/hlsm3u8.js"></script>
<!-- include spec files here... -->
<script
src="../spec/hlsm3u8spec.js"></script>
25. Chrome Developer Tools - https://developers.google.com/web/tools/chrome-devtools/
Chrome -> Menu -> View -> Developers -> Developer Tools
Source Map
Maps combined/minified file back to an unbuilt state
Debugging
29. Debugging - Source Map
Introduction to JavaScript Source Map
Generating Source Map with webpack Build
$ webpack -d
app.bundle.js
app.bundle.js.map
See Development shortcut -d and devtool Webpack configuration for Details
Chrome DevTools Locates Source Map (.map) in the Same Path of .JS