A few good JavaScript development tools
Download as PPTX, PDF0 likes639 views
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.
![// 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}`); }
}
var sample = new Sample('Babel');
sample.printHello();
// .babelrc
{
presets: [“es2015”]
}
# Install babel and transpile
$ npm install --save-dev babel-cli babel-preset-
es2015
$ ./node_modules/.bin/babel sample.js >
output.js](https://image.slidesharecdn.com/afewgoodjavascriptdevelopmenttools-160718212816/85/A-few-good-JavaScript-development-tools-17-320.jpg)
![Build - Babel with webpack
Install Node Modules
$ npm install --save-dev babel-loader babel-core
Configure webpack
// webpack.config.js
module: {
loaders: [
{ test: /.js$/, exclude: /node_modules/, loader:
"babel-loader" }
]
}
Configure Babel: .babelrc
{
"presets": ["es2015"]
}
See https://babeljs.io/docs/setup/#installation for
Details](https://image.slidesharecdn.com/afewgoodjavascriptdevelopmenttools-160718212816/85/A-few-good-JavaScript-development-tools-18-320.jpg)
![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;
}();
var sample = new Sample('Babel');
sample.printHello();](https://image.slidesharecdn.com/afewgoodjavascriptdevelopmenttools-160718212816/85/A-few-good-JavaScript-development-tools-20-320.jpg)
![Build - UglifyJS with webpack
webpack UglifyJSPlugin
http://webpack.github.io/docs/list-of-
plugins.html#uglifyjsplugin
$ npm install webpack --save-dev
// webpack.config.js
module.exports = {
...
plugins:[new webpack.optimize.UglifyJsPlugin({
compress: {warnings: false},
})]
…
}
$ webpack](https://image.slidesharecdn.com/afewgoodjavascriptdevelopmenttools-160718212816/85/A-few-good-JavaScript-development-tools-21-320.jpg)
A few good JavaScript development tools
- 1. A Few Good JavaScript Development Tools Jul. 12 2016 Simon Kim NexStreaming Corp.
- 2. 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
- 3. 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
- 4. 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
- 5. 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
- 6. 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/
- 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
- 12. Build - webpack
- 13. Build - webpack $ npm install webpack -g $ webpack ./app.js app.bundle.js http://webpack.github.io/docs/usage.html
- 14. 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/
- 15. // 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
- 16. 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)
- 17. // 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}`); } } var sample = new Sample('Babel'); sample.printHello(); // .babelrc { presets: [“es2015”] } # Install babel and transpile $ npm install --save-dev babel-cli babel-preset- es2015 $ ./node_modules/.bin/babel sample.js > output.js
- 18. Build - Babel with webpack Install Node Modules $ npm install --save-dev babel-loader babel-core Configure webpack // webpack.config.js module: { loaders: [ { test: /.js$/, exclude: /node_modules/, loader: "babel-loader" } ] } Configure Babel: .babelrc { "presets": ["es2015"] } See https://babeljs.io/docs/setup/#installation for Details
- 19. Build - Minimization and Obfuscation minifier - https://www.npmjs.com/package/minifier YUI Compressor - http://yui.github.io/yuicompressor/ UglifyJS2 - https://github.com/mishoo/UglifyJS2
- 20. 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; }(); var sample = new Sample('Babel'); sample.printHello();
- 21. Build - UglifyJS with webpack webpack UglifyJSPlugin http://webpack.github.io/docs/list-of- plugins.html#uglifyjsplugin $ npm install webpack --save-dev // webpack.config.js module.exports = { ... plugins:[new webpack.optimize.UglifyJsPlugin({ compress: {warnings: false}, })] … } $ webpack
- 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
- 26. Debugging - Chrome Developer Tools
- 27. Debugging - Source Map Without Source Map
- 28. Debugging - Source Map With Source Map
- 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
- 30. Documentation JSDoc - http://usejsdoc.org Docco - https://jashkenas.github.io/docco/ YUIDoc - http://yui.github.io/yuidoc/
- 31. Documentation - YUIDoc # Install babel and transpile $ npm install -g yuidocjs $ yuidoc . $ # open out/index.html in browser
- 32. Summary Code BuildTestDebug Document + Source Map Demo Project: https://github.com/simonkim/jstools-demo