Modern Javascript

A look at some of the processes and tools of the trade employed by modern day javascript developers, for performance, testing, and application development.

Transcript

1. Modern JavaScript @danielknell
2. Recap
3. Stone Age var element ; if (document.all) { element = document.all[id]; else { element = document.getElementById(id); }
4. Bronze Age function getElement(id) { if (document.all) { return document.all[id]; } else { return document.getElementById(id); } } var element = getElement(id);
5. Iron Age var element = $(id);
6. Golden Age
7. Poll
8. Bugs == Fun?
9. Time = Frustration Development Staging Production Much Later
10. CODE TEST CODE TEST
11. TDD?
12. Derailed
13. BDD
14. New Terminology
15. Test That It Should
16. New Tools
17. Cucumber & Capybara
18. Gherkin Spec Feature: Homepage In order be the best site on the web As a webmaster I want to have a homepage Scenario: View Homepage Given I am on the Homepage When I click "Greet!" Then I should see "Hello World!"
19. Step Definition Given /^I am on the home page$/ do visit "/" end When /^I click on "([^"]*)"$/ do |text| click_on text end Then /^I should see "([^"]*)"$/ do |text| page.should have_content text end
20. Relish
21. Cucumber.js
22. Gherkin Spec Feature: Brainfuck Support In order to turn peoples brain to mush As a troll I want to write programs in brainfuck Scenario: Hello World Given I enter the code: """ >+++++++++[<++++++++>-]<. >+++++++[<++++>-]<+. +++++++..+++. >>>++++++++[<++++>-]<. >>>++++++++++[<+++++++++>-]<---. <<<<.+++.------.--------.>>+. """ When I run the program Then I should see "Hello World!" as the result
23. Step Definition var brainfuck = require(‘brainfuck’); module.exports = function () { this.Given('I enter the code:', function(code, callback) { this.code = code; callback(); }); this.When('I run the program', function(callback) { this.result = brainfuck(this.code); callback(); }); this.Then('I should see "$result" as the result', function(result, callback) { if (this.result !== result) { callback.fail(new Error('Expected "'+result+'" but received "'+this.result+'"')); } else { callback(); } }); };
24. Mocha
25. Describe Things describe(“Parser”, function () { });
26. Describe Members describe(“Parser”, function () { describe(“#parse()”, function () { }); });
27. It Should... describe(“Parser”, function () { describe(“#parse()”, function () { it(“should compile simple paths”, function () { }); }); });
28. In Full... var delegator = require(“../lib/index”) , assert = require(“assert”) ; describe(“Parser”, function () { describe(“#parse()”, function () { it(“should compile simple paths”, function () { var instance = new delegator.parser.SimpleParser() , result = instance.parse(“/hello/world”) , regexp = new RegExp(“^/hello/world$”) ; assert.deepEqual(result.expr, regexp); assert.deepEqual(result.keys, []); }); }); });
29. Assertions assert.equal(foo, bar); expect(foo).to.equal(bar) foo.should.equal(bar);
30. Common Setup var delegator = require(“../lib/index”) , assert = require(“assert”) ; describe(“Parser”, function () { describe(“#parse()”, function () { var instance ; beforeEach(function () { instance = new delegator.parser.SimpleParser(); }); it(“should compile simple paths”, function () { var result = instance.parse(“/hello/world”) , regexp = new RegExp(“^/hello/world$”) ; assert.deepEqual(result.expr, regexp); assert.deepEqual(result.keys, []); }); });
31. Mocking
32. Spies var sinon = require(“sinon”) , callback = sinon.spy() ; doSomething(callback); sinon.assert.called(callback);
33. Stubs var sinon = require(“sinon”) , callback = sinon.stub() ; callback.withArgs(“foo”).returns(“bar”); doSomething(callback); sinon.assert.called(callback);
34. Mocks var sinon = require(“sinon”) , foo = new String(“bar”) , mock = sinon.mock(foo) ; mock.expects(“toUpperCase”).once().returns(“FOO”); doSomething(foo); mock.verify();
35. Mockery var mockery = require(“mockery”) , mock = { readFileSync: function () { return “foobar”; } } , foo ; mockery.registerAllowables([“../lib/foo”], true); mockery.registerMock(“fs”, mock); foo = require(“../lib/foo”); foo.loadFromFile(“/var/foo”); mockery.disable(); mockery.deregisterAll();
36. Coverage
37. Nyan!
38. Spec
39. Watch & Notify
40. Browser Based describe(“Widget”, function () { var Widget ; beforeEach(function (done) { require(["widget"], function(_Widget) { Widget = _Widget done(); }); }); describe(“#errors()”, function () { it(“should return empty array for new widgets”, function () { var widget = new Widget() ; assert.deepEqual([], widget.errors()) }); }); });
41. Browser Based
42. JSHint
43. Make rocks REPORTER = dot MOCHA = ./node_modules/mocha/bin/mocha JSCOVER = ./node_modules/jscover/bin/jscover JSHINT = ./node_modules/jshint/bin/hint test: ! @ NODE_ENV=test $(MOCHA) --reporter $(REPORTER) test-watch: ! @ NODE_ENV=test $(MOCHA) --reporter min --growl --watch coverage: ! @ echo ' generating coverage.html' ! @ $(JSCOVER) lib lib-cov ! @ DELEGATOR_COV=1 $(MAKE) test REPORTER=html-cov > coverage.html ! @ rm -rf lib-cov lint: ! @ $(JSHINT) $(shell find {lib,test} -name "*.js") .PHONY: test test-watch coverage lint
44. WTFM
45. Spinx ======= Parsers ======= This module implements the parsers used to convert string path expressions into regular expressions used in the matching stage of request delegation. Simple Parser ============= .. class:: delegator.parser.SimpleParser(patterns) Parser to turn path expressions into regular expressions with a list of group names. .. function:: parser.parse(pattern) Parse a string into a regular expression :param pattern string: the pattern string to parse :throws delegator.errors.ParserError: For invalid patterns. :returns: A dictionary containing the regular expression and an array of keys
46. Read the Docs
47. Documentation Driven Development
48. Thats All Folks email: contact@danielknell.co.uk twitter: @danielknell website: http://danielknell.co.uk/ Any Questions / Trolling?