The Plight of Pinocchio

PINOCCHIO the plight of JavaScript's quest to become a real
language

once upon a time...

one fine day...

we built businesses...

...on this toy language

go to school, study, always tell the truth, and be
obedient.

If we are going to use JavaScript to do real
work, then we have to do the things that we do with real languages.

github.com/bkeepers @bkeepers

in real languages, we...

in real languages, we... Use Test Driven Development

in real languages, we... Use Test Driven Development Refactor

in real languages, we... Use Test Driven Development Refactor Separate
Concerns

in real languages, we... Use Test Driven Development Refactor Separate
Concerns Create Abstractions

in real languages, we... Use Test Driven Development Apply Design
Patterns Refactor Separate Concerns Create Abstractions

Patterns Decouple Refactor Separate Concerns Create Abstractions

Patterns Decouple Refactor Separate Concerns Use Encapsulation Create Abstractions

Patterns Decouple Refactor Separate Concerns Use Encapsulation Create Abstractions DRY

why? Use Test Driven Development Apply Design Patterns Decouple Refactor
Separate Concerns Use Encapsulation Create Abstractions DRY

These principles and practices help us build ﬂexible and maintainable
systems.

Litmus Test If your site or application breaks without JavaScript,
then you should treat it like a real language.

Use Test Driven Development Apply Design Patterns in real languages,
we

the simplest app ever... github.com/bkeepers/monologue

jQuery(function($) { }); a typical JavaScript example... example lovingly stolen
from @searls

a typical JavaScript example... jQuery(function($) { $('#new-status').on('submit', function() { return
false; }); }); example lovingly stolen from @searls

a typical JavaScript example... jQuery(function($) { $('#new-status').on('submit', function() { $.ajax({
url: '/statuses', type: 'POST', }); return false; }); }); example lovingly stolen from @searls

url: '/statuses', type: 'POST', dataType: 'json', data: {text: $(this).find('textarea').val()}, }); return false; }); }); example lovingly stolen from @searls

url: '/statuses', type: 'POST', dataType: 'json', data: {text: $(this).find('textarea').val()}, success: function(data) { } }); return false; }); }); example lovingly stolen from @searls

url: '/statuses', type: 'POST', dataType: 'json', data: {text: $(this).find('textarea').val()}, success: function(data) { $('#statuses').append( '<li>' + data.text + '</li>'); } }); return false; }); }); example lovingly stolen from @searls

Use Test Driven Development in real languages, we

the evolution of testing...

Developers initially view testing as a veriﬁcation process.

A good test suite quickly becomes an insurance policy.

Test driven development is a design process.

Growing Object-Oriented Software Guided by Tests Steve Freeman, Nat Pryce
“Starting with a test means that we have to describe what we want to achieve before we consider how.”

Test driven development in JavaScript is fast and easy.

“ Testing JavaScript is not worth it.”

“ Testing JavaScript is not worth it.” “It changes too
frequently.”

frequently.” “The tests break all the time.”

frequently.” “It’s just view code.” “The tests break all the time.”

frequently.” “Browser implementations are too diﬀerent.” “It’s just view code.” “The tests break all the time.”

frequently.” “Browser implementations are too diﬀerent.” “It’s just view code.” “The tests break all the time.” “It’s too hard.”

Testing is hard when we write bad code.

jQuery(function($) { $('#new-status').on('submit', function() { $.ajax({ url: '/statuses', type: 'POST',
dataType: 'json', data: {text: $(this).find('textarea').val()}, success: function(data) { $('#statuses').append('<li>' + data.text + '</li>'); } }); return false; }); }); back to our example... example lovingly stolen from @searls

dataType: 'json', data: {text: $(this).find('textarea').val()}, success: function(data) { $('#statuses').append('<li>' + data.text + '</li>'); } }); return false; }); }); back to our example... 1. page event example lovingly stolen from @searls

dataType: 'json', data: {text: $(this).find('textarea').val()}, success: function(data) { $('#statuses').append('<li>' + data.text + '</li>'); } }); return false; }); }); back to our example... 1. page event 2. user event example lovingly stolen from @searls

dataType: 'json', data: {text: $(this).find('textarea').val()}, success: function(data) { $('#statuses').append('<li>' + data.text + '</li>'); } }); return false; }); }); back to our example... 1. page event 2. user event 3. network IO example lovingly stolen from @searls

dataType: 'json', data: {text: $(this).find('textarea').val()}, success: function(data) { $('#statuses').append('<li>' + data.text + '</li>'); } }); return false; }); }); back to our example... 1. page event 2. user event 3. network IO 4. user input example lovingly stolen from @searls

dataType: 'json', data: {text: $(this).find('textarea').val()}, success: function(data) { $('#statuses').append('<li>' + data.text + '</li>'); } }); return false; }); }); back to our example... 1. page event 2. user event 3. network IO 4. user input 5. network event example lovingly stolen from @searls

dataType: 'json', data: {text: $(this).find('textarea').val()}, success: function(data) { $('#statuses').append('<li>' + data.text + '</li>'); } }); return false; }); }); back to our example... 1. page event 2. user event 3. network IO 4. user input 5. network event 6. HTML templating example lovingly stolen from @searls

Now try to test that.

Testing makes design problems painfully obvious.

“The same structure that makes the code diﬃcult to test
now will make it diﬃcult to change in the future.” Growing Object-Oriented Software Guided by Tests Steve Freeman, Nat Pryce

So how do we test this?

Well...let’s talk about system testing.

capybara js-test-driver buster.js

system tests with cucumber... Feature: Telling the world about my
every breath Scenario: Successfully posting a status update When I am on the home page And I fill in "Status" with "Integration tests are easy" And I press "Post Update" Then I should see "Integration tests are easy"

system tests with cucumber... $ cucumber Feature: Posting Statuses Scenario:
Successfully posting a status When I am on the home page And I fill in "Status" with "Integration tests are easy" And I press "Post Update" Then I should see "Integration tests are easy" 1 scenario (1 passed) 4 steps (4 passed) 0m0.988s

there are many advantages to system testing

there are many advantages to system testing easy to write

relatively easy to maintain

run in real browser environment relatively easy to maintain

run in real browser environment veriﬁes system actually works relatively easy to maintain

there are many disadvantages to system testing

there are many disadvantages to system testing run very slow

there are many disadvantages to system testing test failures are
diﬃcult to decipher run very slow

there are many disadvantages to system testing harder to simulate
failure cases test failures are diﬃcult to decipher run very slow

there are many disadvantages to system testing harder to simulate
failure cases test failures are diﬃcult to decipher run very slow does not encourage good design

System tests tell you your application is functioning, but tell
you nothing about the internal state.

Me Just Now™ “With system tests, write as few as
possible, but no fewer.”

Unit tests help ensure components are well designed and function
properly.

“To construct an object for a unit test, we have
to pass its dependencies to it, which means that we have to know what they are.” Growing Object-Oriented Software Guided by Tests Steve Freeman, Nat Pryce

“To keep unit tests understandable (and, so, maintainable), we have
to limit their scope.” Growing Object-Oriented Software Guided by Tests Steve Freeman, Nat Pryce

There are about 1,690,000 diﬀerent unit testing frameworks in JavaScript.

Just pick one that looks healthy.

a unit test in jasmine require('/js/views/status_list.js'); describe("View.StatusList", function() { beforeEach(function()
{ this.view = new View.StatusList(); }); it("fetches records from the server", function() { expect(this.view.collection.fetch).toHaveBeenCalled(); }); it("renders when collection is reset", function() { this.view.collection.reset([{text: 'Unit testing is fun'}]); expect(this.view.$el.find('li').text()).toEqual('Unit testing is fun'); }); it("appends newly added items", function() {

We can use unit tests to improve our design, but
ﬁrst…

Apply Design Patterns in real languages, we

Architect Christopher Alexander “Each pattern describes a problem that occurs
over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice.”

Design patterns are the basic parts of speech that allow
us to create coherent, well-structured systems.

Creational Abstract Factory Builder Factory Method Prototype Singleton Structural Adapter
Bridge Composite Decorator Flyweight Proxy Behavioral Chain of responsibility Command Interpreter Iterator Mediator Memento Observer State Strategy Template method Visitor “Classical Design Patterns”

Advantages of Design Patterns

Advantages of Design Patterns removes duplication

Advantages of Design Patterns removes duplication shared vocabulary

Advantages of Design Patterns removes duplication shared vocabulary faster communication

Advantages of Design Patterns removes duplication shared vocabulary generic, reusable
components faster communication

components faster communication proven paradigms

components faster communication proven paradigms easier to test

components faster communication proven paradigms easier to test supports system changes

Addy Osmani Learning JavaScript Design Patterns “Patterns don’t solve all
design problems, nor do they replace good software designers, however, they do support them.”

Model, View, Controller almost every web-related framework uses

Martin Fowler http://www.martinfowler.com/ “The idea behind [MVC] is to make
a clear division between domain objects that model our perception of the real world, and presentation objects that are the GUI elements we see on the screen.”

Martin Fowler http://www.martinfowler.com/ “...Domain objects should be completely self contained
and work without reference to the presentation, they should also be able to support multiple presentations, possibly simultaneously.”

Model domain or structural objects representing the application’s state

If your application has data or logic, then you need
a model.

dataType: 'json', data: {text: $(this).find('textarea').val()}, success: function(data) { $('#statuses').append( '<li>' + data.text + '</li>'); } }); return false; }); }); back to our example...

refactoring to use models... // models/status.js Model.Status = Backbone.Model.extend({ });
// collections/statuses.js Collection.Statuses = Backbone.Collection.extend({ model: Model.Status, url: '/statuses' });

and the result... // app.js jQuery(function($) { var statuses =
new Collection.Statuses(); $('#new-status').on('submit', function() { statuses.create({ text: $(this).find('textarea').val() }); return false; }); statuses.on('add', function(status) { $('#statuses').append( '<li>' + status.get('text') + '</li>'); }); });

new Collection.Statuses(); $('#new-status').on('submit', function() { statuses.create({ text: $(this).find('textarea').val() }); return false; }); statuses.on('add', function(status) { $('#statuses').append( '<li>' + status.get('text') + '</li>'); }); }); Observer Pattern

Our models don’t have logic yet, so we’re skipping the
unit test for now.

but our system test still passes... $ cucumber Feature: Posting
Statuses Scenario: Succesfully posting a status When I am on the home page And I fill in "Status" with "Integration tests are easy" And I press "Post Update" Then I should see "Integration tests are easy" 1 scenario (1 passed) 4 steps (4 passed) 0m0.988s

Controller translates user input into operations on the model

back to our example... // app.js jQuery(function($) { var statuses
= new Collection.Statuses(); $('#new-status').on('submit', function() { statuses.create({text: $(this).find('textarea').val()}); return false; }); statuses.on('add', function(status) { $('#statuses').append( '<li>' + status.get('text') + '</li>'); }); });

test driven refactoring... describe("PostStatus", function() { describe("submitting the form", function()
{ it("creates a status", function() { }); }); });

{ it("creates a status", function() { $el.trigger('submit'); }); }); });

{ it("creates a status", function() { $el.trigger('submit'); expect(collection.create).toHaveBeenCalledWith( {text: "It’s easy!"}); }); }); });

test driven refactoring... describe("PostStatus", function() { var $el; beforeEach(function() {
$el = $("<form><textarea>It's easy!</textarea></form>"); }); describe("submitting the form", function() { it("creates a status", function() { $el.trigger('submit'); expect(collection.create).toHaveBeenCalledWith( {text: "It’s easy!"}); }); }); });

test driven refactoring... describe("PostStatus", function() { var $el; beforeEach(function() {
$el = $("<form><textarea>It's easy!</textarea></form>"); }); describe("submitting the form", function() { it("creates a status", function() { $el.trigger('submit'); expect(collection.create).toHaveBeenCalledWith( {text: "It’s easy!"}); }); }); }); unattached from DOM

test driven refactoring... describe("PostStatus", function() { var $el, collection; beforeEach(function()
{ $el = $("<form><textarea>It's easy!</textarea></form>"); collection = new Collection.Statuses(); }); describe("submitting the form", function() { it("creates a status", function() { $el.trigger('submit'); expect(collection.create).toHaveBeenCalledWith( {text: "It’s easy!"}); }); }); });

{ $el = $("<form><textarea>It's easy!</textarea></form>"); collection = new Collection.Statuses(); }); describe("submitting the form", function() { it("creates a status", function() { $el.trigger('submit'); expect(collection.create).toHaveBeenCalledWith( {text: "It’s easy!"}); }); }); }); do we need this test dependency?

{ $el = $("<form><textarea>It's easy!</textarea></form>"); collection = {create: jasmine.createSpy('create')}; }); describe("submitting the form", function() { it("creates a status", function() { $el.trigger('submit'); expect(collection.create).toHaveBeenCalledWith( {text: "It’s easy!"}); }); }); });

test driven refactoring... describe("PostStatus", function() { var $el, collection, view;
beforeEach(function() { $el = $("<form><textarea>It's easy!</textarea></form>"); collection = {create: jasmine.createSpy('create')}; view = new View.PostStatus({ el: $el, collection: collection }); }); describe("submitting the form", function() { it("creates a status", function() { $el.trigger('submit'); expect(collection.create).toHaveBeenCalledWith(

test driven refactoring... describe("PostStatus", function() { var $el, collection, view;
beforeEach(function() { $el = $("<form><textarea>It's easy!</textarea></form>"); collection = {create: jasmine.createSpy('create')}; view = new View.PostStatus({ el: $el, collection: collection }); }); describe("submitting the form", function() { it("creates a status", function() { $el.trigger('submit'); expect(collection.create).toHaveBeenCalledWith( dependency injection

a failing test...

refactoring to use controllers... // views/post_status.js View.PostStatus = Backbone.View.extend({ events:
{ "submit": "submit" }, submit: function(e) { var $input = this.$el.find('textarea'); this.collection.create({text: $input.val()}); return false; } });

all green

new Collection.Statuses(); new View.PostStatus({ el: $('#new-status'), collection: statuses }); statuses.on('add', function(status) { $('#statuses').append( '<li>' + status.get('text') + '</li>'); }); });

and our system test still passes... $ cucumber Feature: Posting
Statuses Scenario: Succesfully posting a status When I am on the home page And I fill in "Status" with "Integration tests are easy" And I press "Post Update" Then I should see "Integration tests are easy" 1 scenario (1 passed) 4 steps (4 passed) 0m0.988s

View observes the model’s state and generates output for the
user

// app.js jQuery(function($) { var statuses = new Collection.Statuses(); new
View.PostStatus({ el: $('#new-status'), collection: statuses }); statuses.on('add', function(status) { $('#statuses').append( '<li>' + status.get('text') + '</li>'); }); }); back to our example...

test driven refactoring... describe("View.StatusList", function() { it("appends newly added items",
function() { collection.add({text: 'this is fun!'}); expect($el.find('li').length).toBe(1); expect($el.find('li').text()).toEqual('this is fun!'); }); });

test driven refactoring... describe("View.StatusList", function() { beforeEach(function() { $el =
$('<ul></ul>'); collection = new Backbone.Collection(); view = new View.StatusList({ el: $el, collection: collection }); }); it("appends newly added items", function() { collection.add({text: 'this is fun!'}); expect($el.find('li').length).toBe(1); expect($el.find('li').text()).toEqual('this is fun!'); }); });

refactoring to use views... // views/status_list.js View.StatusList = Backbone.View.extend({ initialize:
function() { _.bindAll(this, 'add'); this.collection.on('add', this.add); }, add: function(model) { this.$el.append(this.template(model)) }, template: function(model) { return this.make('li', {className:'status'}, model.get('text')); } });

new Collection.Statuses(); new View.PostStatus({ el: $('#new-status'), collection: statuses }); new View.StatusList({ el: $('#statuses'), collection: statuses }); });

Let’s add a new feature.

adding new features, the cowboy way jQuery(function($) { $.ajax({ url:
'/statuses', dataType: 'json', success: function(data) { var $statuses = $('#statuses'); for(var i = 0; data.length > i; i++) { $('#statuses').append( '<li>' + data[i].text + '</li>'); } } }); });

but we’re better than that now... Feature: Telling the world
about my every breath # ... Scenario: Viewing previous status updates Given the following statuses exist: | This is outside-in development | | It’s not so bad | When I am on the home page Then I should see "This is outside-in development" And I should see "It’s not so bad"

failing system test... $ cucumber features/statuses.feature:9 Feature: Posting Statuses Scenario:
Viewing previous status updates Given the following statuses exist: | This is outside-in development | | It's not so bad | When I am on the home page Then I should see "This is outside-in development" expected there to be content "This is outside-in development" in "Post Update" (RSpec::Expectations::ExpectationNotMetError) And I should see "It's not so bad" Failing Scenarios: cucumber features/statuses.feature:9 1 scenario (1 failed) 4 steps (1 failed, 1 skipped, 3 passed) 0m2.619s

then a unit test... describe("View.StatusList", function() { // … it("fetches
records from the server", function() { expect(collection.fetch).toHaveBeenCalled(); }); it("renders when collection is reset", function() { collection.reset([{text: 'This is fun!'}]); expect($el.find('li').length).toBe(1); expect($el.find('li').text()).toEqual('This is fun!'); }); });

and finally, the implementation... // views/status_list.js View.StatusList = Backbone.View.extend({ initialize:
function() { this.collection.on('add', this.add); }, add: function(model) { this.$el.append(this.template(model)) }, template: function(model) { return this.make('li', {className:'status'}, model.get('text')); } });

and finally, the implementation... // views/status_list.js View.StatusList = Backbone.View.extend({ initialize:
function() { this.collection.on('add', this.add); this.collection.on('reset', this.render); this.collection.fetch(); }, render: function() { this.collection.each(this.add); }, add: function(model) { this.$el.append(this.template(model)) }, // ... template: function(model) {

our top level code didn’t change... // app.js jQuery(function($) {
var statuses = new Collection.Statuses(); new View.PostStatus({ el: $('#new-status'), collection: statuses }); new View.StatusList({ el: $('#statuses'), collection: statuses }); });

MVC is just one design pattern. There are many others
that can help us.

Epilogue before we depart, an

Robert C. Martin Clean Code “Writing clean code requires the
disciplined use of a myriad of little techniques applied through a painstakingly acquired sense of ‘cleanliness.’ ”

single responsibility principle Every object should have a single responsibility,
and that responsibility should be entirely encapsulated by the object.

“Our heuristic is that we should be able to describe
what an object does without using any conjunctions (‘and’, ‘or’).” Growing Object-Oriented Software Guided by Tests Steve Freeman, Nat Pryce

responsibility & dependencies // Responsibility: // Create a status from
user input // // Dependencies: // * el - A form element with a textarea // * collection - the collection that the status will be // created in View.PostStatus = Backbone.View.extend({ // ... });

References

Carlo Collodi Adventures of Pinocchio “One day I was about
to become a boy, a real boy, but on account of my laziness and my hatred of books, and because I listened to bad companions…I awoke to ﬁnd myself changed into a donkey– long ears, gray coat, even a tail!”

Thanks! @bkeepers http://bit.ly/pinocchio-slides Example App: github.com/bkeepers/monologue

The Plight of Pinocchio

The Plight of Pinocchio

Transcript

More Decks by Brandon Keepers