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

A few good JavaScript development tools

Recommended

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