devoxx 2014 - javascript tooling - don't be naked in front of javascript
DESCRIPTION
A not-exhaustive list of tools required to work efficiently with JavaScript. Quickie presented during the Devoxx Belgium 2014 conference at AntwerpenTRANSCRIPT
@romaintaz #Devoxx #JSTools
Don’t be naked in front of JavaScript
Romain Linsolas
Société Générale
@romaintaz #Devoxx #JSTools
Romain Linsolas
@romaintaz #Devoxx #JSTools
Start
@romaintaz #Devoxx #JSTools
Start
Learn JavaScript. Seriously!
++[[]][+[]]+[+[]] === "10"
@romaintaz #Devoxx #JSTools
@romaintaz #Devoxx #JSTools
@romaintaz #Devoxx #JSTools
NodeJS
server-side JavaScript JavaScript platform Node Package Manager npm
105,000+ npm packages
http://nodejs.org/
@romaintaz #Devoxx #JSTools
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');
@romaintaz #Devoxx #JSTools
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!'); });
@romaintaz #Devoxx #JSTools
Yeoman Project scaffolder: create a project structure
yo webapp yo angular yo ember ...
1,000+ generators!
http://yeoman.io/
@romaintaz #Devoxx #JSTools
Yeoman - yo angular
yo angular
@romaintaz #Devoxx #JSTools
Bower
Bower is a package manager Used to manage your dependencies
bower install angular -‐-‐save
http://bower.io/
@romaintaz #Devoxx #JSTools
bower.json for angular-route { "name": "angular-‐route", "version": "1.3.1", "main": "./angular-‐route.js", "ignore": [], "dependencies": { "angular": "1.3.1" } }
@romaintaz #Devoxx #JSTools
Bower
@romaintaz #Devoxx #JSTools
Build
Phot
o by
Jesh
u Jo
hn (
@je
shuj
ohn)
@romaintaz #Devoxx #JSTools
Grunt
JavaScript Task Runner Configuration over Code 3,600+ plugins so far
http://gruntjs.com/
@romaintaz #Devoxx #JSTools
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' ]);
}
@romaintaz #Devoxx #JSTools
Gulp
Steam-based build system à Tasks executed by Orchestrator
Code over Configuration ~1,000 plugins http://gulpjs.com/
@romaintaz #Devoxx #JSTools
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', '...'); });
@romaintaz #Devoxx #JSTools
Development
Phot
o by
Tod
d Q
uake
nbus
h
@romaintaz #Devoxx #JSTools
JetBrains IntelliJ
@romaintaz #Devoxx #JSTools
JetBrains WebStorm
@romaintaz #Devoxx #JSTools
Test
Phot
o by
Jesh
u Jo
hn (
@je
shuj
ohn)
@romaintaz #Devoxx #JSTools
Jasmine
Tests framework Unit tests & Functional tests
http://jasmine.github.io/
@romaintaz #Devoxx #JSTools
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
@romaintaz #Devoxx #JSTools
PhantomJS
Headless browser (WebKit) Fully scriptable with JavaScript Perfect for website testing, screen capture, page automation or network monitoring
http://phantomjs.org/
@romaintaz #Devoxx #JSTools
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();
}
@romaintaz #Devoxx #JSTools
CasperJS
Navigation scripting Testing utility Based on PhantomJS
http://casperjs.org/
@romaintaz #Devoxx #JSTools
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); });
@romaintaz #Devoxx #JSTools
JavaScript tests, you have the choice!
@romaintaz #Devoxx #JSTools
Analyse &
Debug
Phot
o by
Jesh
u Jo
hn (
@je
shuj
ohn)
@romaintaz #Devoxx #JSTools
Code Quality tools
JavaScript code quality tools Detect many common mistakes IDE integration • JsLint • JsHint • Google Closure Linter
@romaintaz #Devoxx #JSTools
Google Closure Compiler
Optimize JS code: • Parse • Analyze • Remove dead code • Rewrite and minimize code
@romaintaz #Devoxx #JSTools
Use your browser tools!
@romaintaz #Devoxx #JSTools
SonarQube – JavaScript plugin
75 coding rules Custom rules with Xpath Code coverage measures (using LCOV)
@romaintaz #Devoxx #JSTools
SonarQube – JavaScript plugin
@romaintaz #Devoxx #JSTools
Batarang – Chrome extension
Chrome extension for Angular debugging & profiling Inspect scopes Watch performances Maintenance issue?
@romaintaz #Devoxx #JSTools
Batarang – Chrome extension
@romaintaz #Devoxx #JSTools
Not You!