jQuery 2010 Boston: Mobile, TDD, and pub/sub Themes

Table of Contents

jQuery 2010 Boston

Theme

Mobile

TDD

pub/sub

http://events.jquery.org/m/#/m/schedule/sat.html

The list of presenters is available with:

\(("td").each(function() { console.log(\)(this).text()); })

Trending: http://trendsmap.com/local/us/boston

http://oksoclap.com//jqconboston2010

Best tip: Comment swap for /* \n foo //*

Others:

Best tip @blago and I learned at #jqcon? Backslash character before line break escapes the line break in a string. How did I not know that!?

Saturday

DONE 9:00AM Registration

DONE 10:00AM Welcome and Introduction (Ralph Whitbeck)

Hashtag: #

DONE 10:15AM Keynote - jQuery Core & jQuery Mobile (John Resig)

Mobile conference site: m.jquery.org

License transition

jQuery 1.4.3 Released

.link()

cssHooks()

10:50AM Phono

Provide messaging in browser

http://phono.com/

DONE 11:30AM Mobile UI (Filament Group)

<div data-role="page" data-theme="b" id="ui-page-start" class="ui-page ui-body-b"> </div>

data-theme

data-role='page

bars, boxes, buttons = theme

Transitions from jQTouch

HTML attributes used if avaialbe

Buttons created by default

Icons use alpha transparency for a variety of backgrounds

ui-grid

data-filter = true for search bar

DONE 1:30PM Introduction to jQuery UI (Elijah Manor)

DONE 2:30PM TDD your jQuery Plugins (Paul Elliott)

Multiple options are available

Suprising amount of interest

"Most front-end people use BDD: browser driven development"

Used for validating contract not for finding bugs

Bug detection is a consequence

Define a high level goal for the plugin to establish the contract

Example is for defaultvalue plugin

Create wrapper for the plugin

(function($) {

})(jQuery);

Create a chain test

$(function () { test( "is chainable", function () { $() });

});

Create the mock data structure in the runner page

Iterate over the tests

Don't refactor unless the test suite is all green

Code examples

paulelliott/jquery-tdd-example

If you didn't write the feature it's hard to write the test

Build process support

Selenium may be the only option for JavaScript driving pages.

Write one test as a time to account for learning

DONE 3:15PM A Crash Course in JavaScript Application Testing with FuncUnit (Brian Moschel)

Functional test frameworks

Why not testing

Bariers to Entry

Foreign APIs

Debugging across platforms

syn.js: Cross-browser event simulation

Selenium may not fire focus event

Only QA has access to tools

Download: funcunit.com

The QUnit tests could be run by development

Selenium used to do the cross-browser testing

Assumes an active browser; no Ajax mocking available

Workflow is for Development to create the intial functional test

When tests all pass move test to CI for integrtion

No mock tools available directly but fixtures available in

S uses $ but is synchronous

DONE 4:15PM Rapid Testing, Rapid Development (Menno Van Slooten)

What are the dependencies for the work

Using Firefox Web Developer view generated source s/javascript/jasonscript/gi

This allows work just on the UI.

JavaScript comment hack

* This is not a comment //*

There are many frameworks

You don't need to use a framework just to check if a UI works

…assuming you're correctly setting up event handlers

Using bin(), live(), delegate() w/o callback

Still need to have logging

Become better with your editor

DONE 5:15PM Beyond the DOM: Functionality-Focused Code Organization (Rebecca Murphey)

YQL is awesome

Uses mustache.js

Make sure your data isn't tied to the DOM unless necessary

Custom events come with too much overhead

Days before $.ajax start and stop

Require.js

There are really clear patterns for writing

Patterns: mediators, views, services

Use mediators to set up the page

Example: A search form announces the user's search

Counter: !click = callback = fetch = parse = render

Point: Mediator decides what things (publications) mean

Mediators set of views and services

Views display data

Services manage data and state

Only have alimited public interface for mediators

-.fetch() doesn't couple with DOM

Passing objects as arguments competes with jQuery plugins

Inverts the form of control.

We beging to move toward just using POJ

Requires allows text file inclusing

pub/sub nomenclature [object]/[verb]

Stolen from Dojo

Does Mediator == Controller

How do plugins fit into this process? HTML provided with more functionality

Sunday

DONE 9:45AM AppendTo Announcement

http://learn.appendto.com/

New training and development. Look at training options.

10,000 new front-end developers.

Available at

http://github.com/appendto/learn

DONE 9:45AM Keynote - jQuery UI (Richard D. Worth)

Foundations

jQuery UI was based on Interface which had a dependency on 1.1.2.

1.1 of UI announced near the first jQuery conference

1.5 made the API more jQuery-like

Also removed the dimensions dependency.

New CSS framework

Button + collections + icons

Future release will have ThemeRoller UI elements

Goal is to create UI widget core features to minimize

Getting involved

Provide background on existing widgets (even if not jQuery UI)

Monitor the roadmap

1.9 (Menu, Tooltip, Deprecating (options proliferation))

2.0 (ARIA, Interactions Refactor, Form Controls))

2.1 (Grid)

MSFT is providing resources to help with Grids

Based on template, globalization,

DONE 10:30AM wigmo

They provide the functionality that wouldn't be appropriate for a minimal widget core.

http://github.com/wijmo/Wijmo-Open

Uses Raphael for the graphics

http://www.wijmo.com/license/

Released publicly via github.

http://wijmo.com/groups/beta/

DONE 11:00AM jQuery's Best Friends (Alex Sexton)

Some amusing domains: partofhtml5 and html5r0cks.com

$.fn.a = function () {

}

Use "eff - en" as a way of saying $.fn which is the same as $.prototype

Application structuring is necessary

jQeury isn't the center of your application

Dependency managment: requireJS

Works with 1.4.3. Works serverside as well.

This uses the same CommonJS structure to return an object that provides the methods you want to use.

LABjs

Use only at the client.

Modernizr

Just a feature testing library for HTML5

Templates

How to integration into system layout.

How to deploy.

Micro-templates

Underscore.js

PubSub

Similar to just using custom events.

http://gist.github.com/495033

Which would be the preferred approach.

Resig's Simple Inheritence

A person-like object isn't a classical.

Pseudo-classical doesn't exist.

What is the metaphor used for prototypal inheritance:

Crockford's Object.create() shim

Object.create used to get the prototypes for the main object.

var myThing = { init: function () {}, options: {},

}

The key term here is differencial inheritence.

This requires only using a single parent object that exists in the global namespace:

var foo = function () {} ;

$.fn.foo = function

Namespace

Always pick your own

Others

backbone.js
jQuery UI (Widget),
json2 and closure compiler
Set and use code formatting guidelines
Testing…FuncUnit
JavascriptMVC could be an option
Dojo has many of these tools already available
Promote JS: JS Docs

DONE 1:00PM Building Distributed JavaScript Widgets with jQuery (Ben Vinegar)

CSS rules need to be specific

Clean Slate to control CSS over-write

Let cross-domain checking work in your favor

Encase risk areas in iframes

Make sure that your library is versioned

@Anywhere uses reasonable wrapping

DONE 1:00PM Mobile Web Applications with jQuery (Chad Pytel)

jQuery will be the way to go rather than jQtouch

Use cucumber for testing

Less about mobile than about testing a basic jQuery Mobile site

1:45PM jQuery Effects: Beyond the basics (Karl Swedberg)

DONE 1:45PM Breakout session: EventSoucre

Features

Time

Cache the error

Allow for a restart that has a timeout.

Assume some failures will occur when the app has been running continuously.

Process

Review all new Chrome releases to have

IMplementation

console.log("http://wal.sh/events.php");

// http://weblog.bocoup.com/javascript-eventsource-now-available-in-firefox

/ Boilerplate from the demo / http://dev.w3.org/html5/eventsource/

var source = new EventSource('updates.cgi'); source.onmessage = function (event) { alert(event.data); };

DONE 2:45PM Using templates to achieve awesomer architechture (Garann Means)

DONE 3:54PM jQuery in the [Aol.] Enterprise (Dave Artz)

Third-party widget

Have benchmarks to determine the performnace and the partner

$.inlineCSS (options.css )

Facebook Like creates douple page impressions

Don't load widgets not loaded on the page

$.sonar used to determine what is loaded into the page based on the user scrolling behavior.

Need to use $.queue

Wrap the XFBML parse fujnction to ensure that multiple items aren't crashing the page.

Use $.queue with $.sonar to delay the load

Don't load Facebook unless needed

$.getJS

AOL.getJS

Only for CDN.

AOL Origin Server Tool

This is a manually merged file not required by teh application

has the CDN file.

Has a visible tool.

Next steps: code organizatoin

DONE 4:30PM App in a Browser (Jonathan Sharp)

appendTo

There's a spectrum of server and client development

1998: Dump HTML

2010: Gmail

The boot process for a web application needs to be considered

Why is WebDev hard: conformance to spec is hard

What browsers do you have to support

How do you know the precise features are available

What features are necessary to successful WebDev

Use discrete components

Server
Request manager

How do you transition from server-only to client-driven: request managers

amplitu.request.define("server", "ajax", { url: /foo/bar, method: post, dataTypee: json } )

Generalizes the underlying transport infrastructure.

Apps: bus, ui, request

pub/sub, custom events, array of callbacks

init() is the standard initialization method   standard

DONE 5:30PM Super Awesome Interactions with jQuery (Matt Kelly)

First Do No Harm

Understand Response Times

Communicate

Anticipate

May want to add in delay to control the sense of update by the user

Only perform uploads with Ajax

$.hasText

This is a reasonable plugin: based on the DOM and is something that could be chainable.

Create happy interstitials to distract users from long load times

Interaction design

cross hair
curson: pointer
readonly: none
Store all of the values in the CSS

var deactiveateTimeout, activateTime

When enting an li you need to clar both the timeouts

set oa tmeout

Panel Discussion

Still need to use best practices

TODO Review

TODO JSFIDDLE includes jslint

Use more plugin development with iteration

Get time to set up something on Hudson with packaging

Collect attributes

$("<a>").attr( { "href": "#", "target": "new", "title": "My link" } )

RegExp test

foo.test("foobar");

Update .emacs for

Editor improvements

vim (2)

Aptana (1)

TextMate (2)

Emacs +

TODO TDD / BDD / Unit Testing for JavaScript   webdev

Inherency

What is the development approach

What are the tools that are being used

What is the stable tools

What is being used with continuous integration

The exploration and development phases should be decoupled

Don't schedule work until a data model and manipulation tools fully developed

How this was approach

Option: Rails based tools

env.js and Rhino plain

Selenium based tools

jQuery in page

Exploration and Implementation are very different steps

Start over with a new design unless you know

Exploration is frequently done with

Use mock services

Code organzation cannot be done only with server-based

No real dependency management system

Single file development will

jQuery should only happen in the views

Use _underscore for the wrapping support

Minimize the use jQuery for core JavaScript work

Use tools like requiresJS to manage template dependencies

Simplify the selection process for Yearbook viewer

TODO MockJax and MockJSON

TODO Autorun seemed like the cleanest in browser runner to have synchronous

Both backbone.js and FuncUnit are implementations of code organization

TODO requireJS

yearbookMediator finds the views: selectorView, pageView, membersView, inpageView

yearbookMediator fetches data, constructs viewable models

Focus on ongoing training for front-end for new developments

This can be something where people train on their own.

New integrations have a roll-out process

Provide +Software 1hr training on jQuery 1.8 (widget factory, position)

Provide upgrade options with new UI components with Creative

Core UI widgets are designed to be maintainable and minimal (e.g., extensions from options)

Use extensions rather than custom development   webdev

CLassmates sponsorship for history / persistence approach

Clarify library documentation and testing expectations

TODO git clone summary

Jason-Walshs-MacBook-Pro:sandbox jwalsh$ git clone http://github.com/mennovanslooten/autorun.git Initialized empty Git repository in Users/jwalsh/sandbox/autorun.git/ remote: Counting objects: 10, done. remote: Compressing objects: 100% (8/8), done. remote: Total 10 (delta 0), reused 0 (delta 0) Unpacking objects: 100% (10/10), done. Jason-Walshs-MacBook-Pro:sandbox jwalsh$ git clone http://github.com/paulirish/html5-boilerplate.git Initialized empty Git repository in Users/jwalsh/sandbox/html5-boilerplate.git/ remote: Counting objects: 1375, done. remote: Compressing objects: 100% (1184/1184), done. remote: Total 1375 (delta 706), reused 363 (delta 162) Receiving objects: 100% (1375/1375), 2.40 MiB | 586 KiB/s, done. Resolving deltas: 100% (706/706), done. Jason-Walshs-MacBook-Pro:sandbox jwalsh$ git clone http://github.com/rmurphey/ffco Initialized empty Git repository in Users/jwalsh/sandbox/ffco.git/ fatal: http://github.com/rmurphey/ffco/info/refs not found: did you run git update-server-info on the server? Jason-Walshs-MacBook-Pro:sandbox jwalsh$ git clone http://github.com/rmurphey/ffco.git Initialized empty Git repository in Users/jwalsh/sandbox/ffco.git/ remote: Counting objects: 551, done. remote: Compressing objects: 100% (432/432), done. remote: Total 551 (delta 189), reused 222 (delta 35) Receiving objects: 100% (551/551), 4.47 MiB | 345 KiB/s, done. Resolving deltas: 100% (189/189), done.

Twitter follow summary

RSS summary

TODO Promote JS

Books: Required Reading: jQuery Fundamentals (Rebecca Murphey)

Pull the AOL code files for scrollable,

How to make sure progress is made to make applications flexible

Yearbooks: yearbooks.ui.load, yearbooks.data.loaded

What should be based on jQuery vs. underscore.js vs. POJ

Author: Jason Walsh

j@wal.sh

Last Updated: 2025-07-30 13:45:27

build: 2025-12-23 09:11 | sha: a10ddd7