jQuery 2010 Boston: Mobile, TDD, and pub/sub Themes
Table of Contents
- jQuery 2010 Boston
- Saturday
- DONE 9:00AM Registration
- DONE 10:00AM Welcome and Introduction (Ralph Whitbeck)
- DONE 10:15AM Keynote - jQuery Core & jQuery Mobile (John Resig)
- 10:50AM Phono
- DONE 11:30AM Mobile UI (Filament Group)
- 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
- Create a chain test
- 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
- If you didn't write the feature it's hard to write the test
- Build process support
- 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
- JavaScript comment hack
- Mockjax
- MockJSON
- 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
- pub/sub
- Custom events come with too much overhead
- Use plugin from pete
- 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
- -.fetch() doesn't couple with DOM
- Implementation
- Passing objects as arguments competes with jQuery plugins
- 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
- DONE 9:45AM Keynote - jQuery UI (Richard D. Worth)
- Foundations
- 1.1 of UI announced near the first jQuery conference
- 1.5 made the API more jQuery-like
- New CSS framework
- 1.8
- The position utility
- 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)
- DONE 10:30AM wigmo
- DONE 11:00AM jQuery's Best Friends (Alex Sexton)
- Some amusing domains: partofhtml5 and html5r0cks.com
- Application structuring is necessary
- jQeury isn't the center of your application
- Dependency managment: requireJS
- LABjs
- Modernizr
- Templates
- Micro-templates
- Underscore.js
- PubSub
- Resig's Simple Inheritence
- Crockford's Object.create() shim
- EasyXDM
- Namespace
- Others
- DONE 1:00PM Building Distributed JavaScript Widgets with jQuery (Ben Vinegar)
- DONE 1:00PM Mobile Web Applications with jQuery (Chad Pytel)
- 1:45PM jQuery Effects: Beyond the basics (Karl Swedberg)
- DONE 1:45PM Breakout session: EventSoucre
- 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
- Need to use $.queue
- Use $.queue with $.sonar to delay the load
- Don't load Facebook unless needed
- $.getJS
- AOL.getJS
- AOL Origin Server 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
- How do you transition from server-only to client-driven: request managers
- 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
- Create happy interstitials to distract users from long load times
- Interaction design
- Bil Scott's interesting moments grid
- var deactiveateTimeout, activateTime
- Panel Discussion
- TODO Review
- TODO BBQ updated to use 1.4.3
- TODO JSFIDDLE includes jslint
- Use more plugin development with iteration
- Get time to set up something on Hudson with packaging
- Monitor jQuery bugs
- Collect attributes
- RegExp test
- OOCSS examples
- Update .emacs for
- jQuery RegExp review
- Editor improvements
- 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
- jQuery.proxy()
- jQuery.queue()
- Improved RegExp in jQuery
- Focus on ongoing training for front-end for new developments
- 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
- Twitter follow summary
- RSS summary
- TODO Promote JS
- TODO PolyFill
- 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
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
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 Store
jQuery 1.4.3 Released
.link()
cssHooks()
.closest() performance
jQuery Mobile Released
10:50AM Phono
Provide messaging in browser
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 //*
Mockjax
MockJSON
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
pub/sub
http://en.wikipedia.org/wiki/Publish/subscribe
http://weblog.bocoup.com/publishsubscribe-with-jquery-custom-events
Pulled from the examples in Dojo. Replicated in jQuery.
Custom events come with too much overhead
Use plugin from pete
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
Implementation
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
New training and development. Look at training options.
10,000 new front-end developers.
Available at
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
The position utility
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
Released publicly via github.
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.
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
EasyXDM
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
http://ajaxian.com/archives/chrome-supporting-eventsource-for-server-push-and-richer-worker-api
The source for this is available at
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
Bil Scott's interesting moments grid
var deactiveateTimeout, activateTime
When enting an li you need to clar both the timeouts
set oa tmeout
Panel Discussion
Now a gridding system for mobile
Still need to use best practices
TODO Review
TODO BBQ updated to use 1.4.3
TODO JSFIDDLE includes jslint
Use more plugin development with iteration
Get time to set up something on Hudson with packaging
Monitor jQuery bugs
Collect attributes
$("<a>").attr( { "href": "#", "target": "new", "title": "My link" } )
RegExp test
foo.test("foobar");
OOCSS examples
Update .emacs for
jQuery RegExp review
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
jQuery.proxy()
jQuery.queue()
Improved RegExp in jQuery
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.