Devoxx 2014 - JavaScript tooling - Don't be naked in front of JavaScript

@romaintaz #Devoxx #JSTools

Don’t be naked in front of JavaScript

Romain Linsolas

Société Générale


Romain Linsolas


Start


Start

Learn JavaScript. Seriously!

++[[]][+[]]+[+[]] === "10"




NodeJS

server-side JavaScript JavaScript platform Node Package Manager npm

105,000+ npm packages

http://nodejs.org/


NodeJS, server-side JavaScript

var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, { 'Content-‐Type': 'text/plain' }); res.end('Hello World\n'); }).listen(1337, '127.0.0.1');


NodeJS and Express var express = require('express'); var app = express(); // accept GET request at '/' app.get('/', function (req, res) { res.send('Hello World!') }); // accept POST request at '/' app.post('/', function (req, res) { res.send('Got a POST request'); }); // accept PUT request at '/user' app.put('/user', function (req, res) { res.send('Got a PUT request at /user'); }); // accept DELETE request at '/user' app.delete('/user', function (req, res) { res.send('Got DELETE req at /user'); }); var server = app.listen(3000, function () { console.log('Server ready!'); });


Yeoman Project scaffolder: create a project structure

yo webapp yo angular yo ember ...

1,000+ generators!

http://yeoman.io/


Yeoman - yo angular

yo angular


Bower

Bower is a package manager Used to manage your dependencies

bower install angular -‐-‐save

http://bower.io/


bower.json for angular-route { "name": "angular-‐route", "version": "1.3.1", "main": "./angular-‐route.js", "ignore": [], "dependencies": { "angular": "1.3.1" } }


Bower


Build

Phot

o by

Jesh

u Jo

hn (

@je

shuj

ohn)


Grunt

JavaScript Task Runner Configuration over Code 3,600+ plugins so far

http://gruntjs.com/


Grunt – GruntFile.js module.exports = function(grunt) {

require('load-‐grunt-‐tasks')(grunt);

grunt.initConfig({ pkg: grunt.file.readJSON('package.json'),

clean: [ 'build' ], build: { src: 'app/src/**/*.js', dest: 'build/<%= pkg.name %>.min.js' }, karma: { unit: { configFile: 'src/test/karma.conf.js', singleRun: true } } });

grunt.registerTask('default', [ 'clean', 'build', 'karma' ]);

}


Gulp

Steam-based build system à Tasks executed by Orchestrator

Code over Configuration ~1,000 plugins http://gulpjs.com/


Gulp – gulpfile.js var gulp = require('gulp'); var plugins = require('gulp-‐load-‐plugins'); gulp.task('clean', function() { return gulp.src('dist/', { read: false }).pipe(plugins.clean()); });

gulp.task('minify', function() { return gulp.src('src/**/*.js').pipe(plugins.concat('myApp.js') .pipe(plugins.uglify()) .pipe(plugins.gulp.dest('dist/myApp.js')); });

// Watch sources files and execute tasks after any modification gulp.watch('src/**/*.js', [ 'test', 'compile' ]);

gulp.task('default', function() { plugins.runSequence('clean', 'minify', '...'); });


Development

Phot

o by

Tod

d Q

uake

nbus

h


JetBrains IntelliJ


JetBrains WebStorm


Test

Phot

o by

Jesh

u Jo

hn (

@je

shuj

ohn)


Jasmine

Tests framework Unit tests & Functional tests

http://jasmine.github.io/


Jasmine, tests examples describe("Testing _ lib", function() { beforeEach(function() {

// To do before every test

});

it("should be 42", function() {

var res = _.last([1, 2, 3, 42]); expect(res).toBe(42);

});

it("should not be 1", function() {

var res = _.max([1, 2, 3]); expect(res).not.toBe(1);

});

});

describe "Testing _ lib", -‐>

beforeEach -‐>

// To do before every test

it "should be 42", -‐>

res = _.last [1, 2, 3, 42]

expect(res).toBe 42

it "should not be 1", -‐>

res = _.max[1, 2, 3]

expect(res).not.toBe 1


PhantomJS

Headless browser (WebKit) Fully scriptable with JavaScript Perfect for website testing, screen capture, page automation or network monitoring

http://phantomjs.org/


PhantomJS

console.log('Loading web page'); var page = require('webpage').create(); var url = 'https://www.example.com'; page.open(url, function(status) { // Create a screenshot of the webpage page.render('homepage.png'); phantom.exit();

}


CasperJS

Navigation scripting Testing utility Based on PhantomJS

http://casperjs.org/


CasperJS var casper = require('casper').create( { verbose: true, logLevel: 'debug' }); // INIT casper.start('https://www.example.com', function() { // TEST LOGIN FORM

this.test.assertTitle('Example Domain'); this.assertNotVisible('label#error'); this.fill('form#login', { 'username': 'romain.linsolas', 'password': '' }, false); this.click('form#login input.button'); this.test.assertVisible('label.error');

}); casper.then(function() { // SCREEN CAPTURE

this.capture('homepage.png'); }); casper.run(function() { // RUN THE TEST SUITE

this.test.renderResults(true); });


JavaScript tests, you have the choice!


Analyse &

Debug

Phot

o by

Jesh

u Jo

hn (

@je

shuj

ohn)


Code Quality tools

JavaScript code quality tools Detect many common mistakes IDE integration •  JsLint •  JsHint •  Google Closure Linter


Google Closure Compiler

Optimize JS code: •  Parse •  Analyze •  Remove dead code •  Rewrite and minimize code


Use your browser tools!


SonarQube – JavaScript plugin

75 coding rules Custom rules with Xpath Code coverage measures (using LCOV)


SonarQube – JavaScript plugin


Batarang – Chrome extension

Chrome extension for Angular debugging & profiling Inspect scopes Watch performances Maintenance issue?


Batarang – Chrome extension


Not You!

Devoxx 2014 - JavaScript tooling - Don't be naked in front of JavaScript

Software