A few good JavaScript development tools

A Few Good JavaScript
Development Tools
Jul. 12 2016 Simon Kim
NexStreaming Corp.

Agenda
ECMAScript 6 - JavaScript Languages
Visual Studio Code - Editors or IDE
Node.js & npm - All Time Friends
webpack, Babel, UglifyJS - Build
Jasmine - Testing
Chrome Developer Tools - Debugging
YUIDoc - Documentation

Agenda
ECMAScript 6 - JavaScript Languages
Visual Studio Code - Editors or IDE
Node.js & npm - All Time Friends
webpack, Babel, UglifyJS - Build
Jasmine - Testing
Chrome Developer Tools - Debugging
YUIDoc - Documentation
Code
Build
Test
Debug
Document
Demo Project: https://github.com/simonkim/jstools-demo

JavaScript Language
ECMA-262 Specification
First Edition - June 1997
...
ECMAScript 5.1 Edition - June 2011
ECMAScript 6th Edition (ECMAScript 2015) - June 2015
ES6, ES2015
Misc.
CoffeeScript - http://coffeescript.org

JavaScript Language - ECMAScript 6
// ECMAScript 5
var Shape = function (id, x, y) {
this.id = id;
this.move(x, y);
};
Shape.prototype.move = function (x, y) {
this.x = x;
this.y = y;
};
// ECMAScript 6
class Shape {
constructor (id, x, y) {
this.id = id
this.move(x, y)
}
move (x, y) {
this.x = x
this.y = y
}
}
See http://es6-features.org for Details

Editors or IDEs
IDEs
WebStrom - JetBrains https://www.jetbrains.com/webstorm/ - $$$
Eclips IDE for JavaScript Web Developers - https://eclips.org - $$$
Aptana Studio 3 - http://www.aptana.com - $$$
Editors
Sublime Text - http://www.sublimetext.com - $
Atom - https://atom.io
Visual Studio Code - https://code.visualstudio.com/

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

# 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

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

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

Build - webpack
$ npm install webpack -g
$ webpack ./app.js app.bundle.js
http://webpack.github.io/docs/usage.html

Build - JavaScript in Web Browser
<body>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jque
ry.min.js"></script>
<div id="content">
<textarea id="input" rows=4 cols=80></textarea>
<button id="convert">Submit</button>
<p id="output"></p>
</div>
<script type="text/javascript">
$('#convert').click(function(e) {
var text = $('#input').val();
$( '#output' ).html( '<p>' + text + '</p>' );
});
</script>
</body>
Sample: https://jsfiddle.net/yd2517e4/

// webpack.config.js
module.exports = {
output.library: “Hlsm3u8”
}
Build - Node Module in Web Browser
<body>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jque
ry.min.js"></script>
<script src="scripts/app.bundle.js"></script>
<div id="content">
<textarea id="input" rows=4 cols=80></textarea>
<button id="convert">Submit</button>
<p id="output"></p>
</div>
<script type="text/javascript">
$('#convert').click(function(e) {
var text = $('#input').val();
var hlsm3u8 = new Hlsm3u8();
text = hlsm3u8.parse(text);
$( '#output' ).html( '<p>' + text + '</p>' );
});
</script>
</body>
‘output.library’ option of ‘webpack’
enables access to node module
exports from browser code

Build - Transpile
CoffeeScript - http://coffeescript.org
TypeScript - https://www.typescriptlang.org
Babel - https://babeljs.io
A JavaScript Compiler
ECPAScript 2015 ( ES6 ) to Browser Compatible JavaScript (? TBC)

// output.js
'use strict';
var _createClass = function () { //... }();
function _classCallCheck(instance, Constructor) { //... }
var Sample = function () {
function Sample(text) {
_classCallCheck(this, Sample);
this.text = text;
}
_createClass(Sample, [{
key: 'printHello',
value: function printHello() {
console.log('hello ' + this.text);
}
}]);
return Sample;
}();
var sample = new Sample('Babel');
sample.printHello();
Babel - Example
// sample.js
class Sample {
constructor(text) { this.text = text; }
printHello() { console.log(`hello ${this.text}`); }
}
// .babelrc
{
presets: [“es2015”]
}
# Install babel and transpile
$ npm install --save-dev babel-cli babel-preset-
es2015
$ ./node_modules/.bin/babel sample.js >
output.js

Build - Babel with webpack
Install Node Modules
$ npm install --save-dev babel-loader babel-core
Configure webpack
module: {
loaders: [
{ test: /.js$/, exclude: /node_modules/, loader:
"babel-loader" }
]
}
Configure Babel: .babelrc
{
"presets": ["es2015"]
}
See https://babeljs.io/docs/setup/#installation for
Details

Build - Minimization and Obfuscation
minifier - https://www.npmjs.com/package/minifier
YUI Compressor - http://yui.github.io/yuicompressor/
UglifyJS2 - https://github.com/mishoo/UglifyJS2

Build - UglifyJS2 Example
# Install UglifyJS2
$ npm install uglify-js -g
$ uglifyjs input.js --compress --mangle -o
ouput.js
// output.js
"use strict";function _classCallCheck(e,n){if(!(e instanceof n))throw new
TypeError("Cannot call a class as a function")}var
_createClass=function(){function e(e,n){for(var t=0;t<n.length;t++){var
l=n[t];l.enumerable=l.enumerable||!1,l.configurable=!0,"value"in
l&&(l.writable=!0),Object.defineProperty(e,l.key,l)}}return
function(n,t,l){return
t&&e(n.prototype,t),l&&e(n,l),n}}(),Sample=function(){function
e(n){_classCallCheck(this,e),this.text=n}return
_createClass(e,[{key:"printHello",value:function(){console.log("hello
"+this.text)}}]),e}(),sample=new Sample("Babel");sample.printHello();
// input.js
'use strict';
var _createClass = function () { //... }();
function _classCallCheck(instance, Constructor) { //... }
var Sample = function () {
function Sample(text) {
_classCallCheck(this, Sample);
this.text = text;
}
_createClass(Sample, [{
key: 'printHello',
value: function printHello() {
console.log('hello ' + this.text);
}
}]);
return Sample;
}();

Build - UglifyJS with webpack
webpack UglifyJSPlugin
http://webpack.github.io/docs/list-of-
plugins.html#uglifyjsplugin
$ npm install webpack --save-dev
module.exports = {
...
plugins:[new webpack.optimize.UglifyJsPlugin({
compress: {warnings: false},
})]
…
}
$ webpack

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.

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);
});
});

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>

<script
src="../public/dist/hlsm3u8.js"></script>

<script
src="../spec/hlsm3u8spec.js"></script>

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

Debugging - Chrome Developer Tools

Debugging - Source Map
Without Source Map

With 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

Documentation
JSDoc - http://usejsdoc.org
Docco - https://jashkenas.github.io/docco/
YUIDoc - http://yui.github.io/yuidoc/

Documentation - YUIDoc
# Install babel and transpile
$ npm install -g yuidocjs
$ yuidoc .
$ # open out/index.html in browser

Summary
Code BuildTestDebug Document
+ Source Map
Demo Project:
https://github.com/simonkim/jstools-demo

A few good JavaScript development tools

Related slideshows

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

Similar to A few good JavaScript development tools

Similar to A few good JavaScript development tools (20)

Recently uploaded

Recently uploaded (20)

A few good JavaScript development tools