Building and Testing jQuery Plugins for 2015

@katie_fenn

Overview

2015

Tenth anniversary of jQuery (nearly)

jQuery is a swiss army knife

(and that's okay!)

Adam J. Sontag

Plugins

Benefits of Writing Plugins

• Modular code
  • Reusable
  • Testable
• Use jQuery to invoke your own code

When to Write a Plugin

• Interactive features
• Repeated DOM manipulation
• Configurable options
• Lots of jQuery code
• Great for JavaScript beginners

2. Using A Boilerplate

Writing a Plugin

(the hard way)

Basic plugin creation - jQuery.com

http://jqueryboilerplate.com/

Not a solution

A template

• Documented and explained
• Scrutinised by experts
• Example configuration for tools
  • Travis CI
  • JShint
  • Grunt

3. Building and Testing Your Plugin

$('.element').defaultPluginName();

Jasmine

Behaviour Driven Design / Development

• Write specifications to define behaviour
• Software design emerges from specification
• Tests and documentation as a side effect

Start Designing Behaviour

"The timer widget should display a start time of 2:00 when invoked"

Achievement Unlocked!

Passing State

• A significant moment
• Completion of the first step in a cycle

Progressing the Cycle

"The timer widget should display a start time of 3:00 when invoked with a time option of 180"

Progressing the Cycle

"The timer widget when started should start counting down"

The End...?

• Writing new specs
  • Fixing defects
  • Adding features
• Minimal overhead this time

Signs you may need a framework

• Co-ordinating behaviour across components
• Feature-rich behaviour
  • Lots of public methods
  • Lots of configuration options

Benefits of Both

• Modular code
• Unit testing
• Auto-loading
• Continuous integration
• Task automation

Thank You

@katie_fenn

Slides: http://tinyurl.com/btjp2015

Source: http://tinyurl.com/btjp2015-source