jQuery 2010 Boston: Mobile, TDD, and pub/sub Themes
Table of Contents
- 1. jQuery 2010 Boston
- 2. Saturday
- 2.1. DONE 9:00AM Registration
- 2.2. DONE 10:00AM Welcome and Introduction (Ralph Whitbeck)
- 2.3. DONE 10:15AM Keynote - jQuery Core & jQuery Mobile (John Resig)
- 2.4. 10:50AM Phono
- 2.5. DONE 11:30AM Mobile UI (Filament Group)
- 2.5.1. data-theme
- 2.5.2. data-role='page
- 2.5.3. bars, boxes, buttons = theme
- 2.5.4. Transitions from jQTouch
- 2.5.5. HTML attributes used if avaialbe
- 2.5.6. Buttons created by default
- 2.5.7. Icons use alpha transparency for a variety of backgrounds
- 2.5.8. ui-grid
- 2.5.9. data-filter = true for search bar
- 2.6. DONE 1:30PM Introduction to jQuery UI (Elijah Manor)
- 2.7. DONE 2:30PM TDD your jQuery Plugins (Paul Elliott)
- 2.7.1. Multiple options are available
- 2.7.2. Suprising amount of interest
- 2.7.3. "Most front-end people use BDD: browser driven development"
- 2.7.4. Used for validating contract not for finding bugs
- 2.7.5. Bug detection is a consequence
- 2.7.6. Define a high level goal for the plugin to establish the contract
- 2.7.7. Example is for default_value plugin
- 2.7.8. Create wrapper for the plugin
- 2.7.9. Create a chain test
- 2.7.10. Create the mock data structure in the runner page
- 2.7.11. Iterate over the tests
- 2.7.12. Don't refactor unless the test suite is all green
- 2.7.13. Code examples
- 2.7.14. If you didn't write the feature it's hard to write the test
- 2.7.15. Build process support
- 2.7.16. Write one test as a time to account for learning
- 2.8. DONE 3:15PM A Crash Course in JavaScript Application Testing with FuncUnit (Brian Moschel)
- 2.8.1. Functional test frameworks
- 2.8.2. Why not testing
- 2.8.3. Bariers to Entry
- 2.8.4. Foreign APIs
- 2.8.5. Debugging across platforms
- 2.8.6. syn.js: Cross-browser event simulation
- 2.8.7. Selenium may not fire focus event
- 2.8.8. Only QA has access to tools
- 2.8.9. Download: funcunit.com
- 2.8.10. The QUnit tests could be run by development
- 2.8.11. Selenium used to do the cross-browser testing
- 2.8.12. Assumes an active browser; no Ajax mocking available
- 2.8.13. Workflow is for Development to create the intial functional test
- 2.8.14. When tests all pass move test to CI for integrtion
- 2.8.15. No mock tools available directly but fixtures available in
- 2.8.16. S uses $ but is synchronous
- 2.9. DONE 4:15PM Rapid Testing, Rapid Development (Menno Van Slooten)
- 2.9.1. What are the dependencies for the work
- 2.9.2. Using Firefox Web Developer view generated source s/javascript/jasonscript/gi
- 2.9.3. JavaScript comment hack
- 2.9.4. Mockjax
- 2.9.5. MockJSON
- 2.9.6. There are many frameworks
- 2.9.7. You don't need to use a framework just to check if a UI works
- 2.9.8. …assuming you're correctly setting up event handlers
- 2.9.9. Using bin(), live(), delegate() w/o callback
- 2.9.10. Still need to have logging
- 2.9.11. Become better with your editor
- 2.10. DONE 5:15PM Beyond the DOM: Functionality-Focused Code Organization (Rebecca Murphey)
- 2.10.1. YQL is awesome
- 2.10.2. Uses mustache.js
- 2.10.3. Make sure your data isn't tied to the DOM unless necessary
- 2.10.4. pub/sub
- 2.10.5. Custom events come with too much overhead
- 2.10.6. Use plugin from pete
- 2.10.7. Days before $.ajax start and stop
- 2.10.8. Require.js
- 2.10.9. There are really clear patterns for writing
- 2.10.10. Patterns: mediators, views, services
- 2.10.11. Use mediators to set up the page
- 2.10.12. Example: A search form announces the user's search
- 2.10.13. Counter: !click = callback = fetch = parse = render
- 2.10.14. Point: Mediator decides what things (publications) mean
- 2.10.15. Mediators set of views and services
- 2.10.16. Views display data
- 2.10.17. Services manage data and state
- 2.10.18. -.fetch() doesn't couple with DOM
- 2.10.19. Implementation
- 2.10.20. Passing objects as arguments competes with jQuery plugins
- 2.10.21. We beging to move toward just using POJ
- 2.10.22. Requires allows text file inclusing
- 2.10.23. pub/sub nomenclature [object]/[verb]
- 2.10.24. Stolen from Dojo
- 2.10.25. Does Mediator == Controller
- 2.10.26. How do plugins fit into this process? HTML provided with more functionality
- 3. Sunday
- 3.1. DONE 9:45AM AppendTo Announcement
- 3.2. DONE 9:45AM Keynote - jQuery UI (Richard D. Worth)
- 3.2.1. Foundations
- 3.2.2. 1.1 of UI announced near the first jQuery conference
- 3.2.3. 1.5 made the API more jQuery-like
- 3.2.4. New CSS framework
- 3.2.5. 1.8
- 3.2.6. The position utility
- 3.2.7. Button + collections + icons
- 3.2.8. Future release will have ThemeRoller UI elements
- 3.2.9. Goal is to create UI widget core features to minimize
- 3.2.10. Getting involved
- 3.2.11. Provide background on existing widgets (even if not jQuery UI)
- 3.2.12. Monitor the roadmap
- 3.2.13. 1.9 (Menu, Tooltip, Deprecating (options proliferation))
- 3.2.14. 2.0 (ARIA, Interactions Refactor, Form Controls))
- 3.2.15. 2.1 (Grid)
- 3.3. DONE 10:30AM wigmo
- 3.4. DONE 11:00AM jQuery's Best Friends (Alex Sexton)
- 3.4.1. Some amusing domains: partofhtml5 and html5r0cks.com
- 3.4.2. Application structuring is necessary
- 3.4.3. jQeury isn't the center of your application
- 3.4.4. Dependency managment: requireJS
- 3.4.5. LABjs
- 3.4.6. Modernizr
- 3.4.7. Templates
- 3.4.8. Micro-templates
- 3.4.9. Underscore.js
- 3.4.10. PubSub
- 3.4.11. Resig's Simple Inheritence
- 3.4.12. Crockford's Object.create() shim
- 3.4.13. EasyXDM
- 3.4.14. Namespace
- 3.4.15. Others
- 3.5. DONE 1:00PM Building Distributed JavaScript Widgets with jQuery (Ben Vinegar)
- 3.6. DONE 1:00PM Mobile Web Applications with jQuery (Chad Pytel)
- 3.7. 1:45PM jQuery Effects: Beyond the basics (Karl Swedberg)
- 3.8. DONE 1:45PM Breakout session: EventSoucre
- 3.9. DONE 2:45PM Using templates to achieve awesomer architechture (Garann Means)
- 3.10. DONE 3:54PM jQuery in the [Aol.] Enterprise (Dave Artz)
- 3.10.1. Third-party widget
- 3.10.2. Have benchmarks to determine the performnace and the partner
- 3.10.3. $.inlineCSS (options.css )
- 3.10.4. Facebook Like creates douple page impressions
- 3.10.5. Don't load widgets not loaded on the page
- 3.10.6. Need to use $.queue
- 3.10.7. Use $.queue with $.sonar to delay the load
- 3.10.8. Don't load Facebook unless needed
- 3.10.9. $.getJS
- 3.10.10. AOL.getJS
- 3.10.11. AOL Origin Server Tool
- 3.10.12. Next steps: code organizatoin
- 3.11. DONE 4:30PM App in a Browser (Jonathan Sharp)
- 3.11.1. appendTo
- 3.11.2. There's a spectrum of server and client development
- 3.11.3. 1998: Dump HTML
- 3.11.4. 2010: Gmail
- 3.11.5. The boot process for a web application needs to be considered
- 3.11.6. Why is WebDev hard: conformance to spec is hard
- 3.11.7. What browsers do you have to support
- 3.11.8. How do you know the precise features are available
- 3.11.9. What features are necessary to successful WebDev
- 3.11.10. Use discrete components
- 3.11.11. How do you transition from server-only to client-driven: request managers
- 3.11.12. Apps: bus, ui, request
- 3.11.13. pub/sub, custom events, array of callbacks
- 3.11.14. init() is the standard initialization method standard
- 3.12. DONE 5:30PM Super Awesome Interactions with jQuery (Matt Kelly)
- 3.12.1. First Do No Harm
- 3.12.2. Understand Response Times
- 3.12.3. Communicate
- 3.12.4. Anticipate
- 3.12.5. May want to add in delay to control the sense of update by the user
- 3.12.6. Only perform uploads with Ajax
- 3.12.7. $.hasText
- 3.12.8. Create happy interstitials to distract users from long load times
- 3.12.9. Interaction design
- 3.12.10. Bil Scott's interesting moments grid
- 3.12.11. var deactiveateTimeout, activateTime
- 3.13. Panel Discussion
- 4. TODO Review
- 4.1. TODO BBQ updated to use 1.4.3
- 4.2. TODO JSFIDDLE includes jslint
- 4.3. Use more plugin development with iteration
- 4.4. Get time to set up something on Hudson with packaging
- 4.5. Monitor jQuery bugs
- 4.6. Collect attributes
- 4.7. RegExp test
- 4.8. OOCSS examples
- 4.9. Update .emacs for
- 4.10. jQuery RegExp review
- 4.11. Editor improvements
- 4.12. TODO TDD / BDD / Unit Testing for JavaScript webdev
- 4.12.1. Inherency
- 4.12.2. What is the development approach
- 4.12.3. What are the tools that are being used
- 4.12.4. What is the stable tools
- 4.12.5. What is being used with continuous integration
- 4.12.6. The exploration and development phases should be decoupled
- 4.12.7. Don't schedule work until a data model and manipulation tools fully developed
- 4.12.8. How this was approach
- 4.12.9. Option: Rails based tools
- 4.12.10. env.js and Rhino plain
- 4.12.11. Selenium based tools
- 4.12.12. jQuery in page
- 4.12.13. Exploration and Implementation are very different steps
- 4.12.14. Start over with a new design unless you know
- 4.12.15. Exploration is frequently done with
- 4.12.16. Use mock services
- 4.12.17. Code organzation cannot be done only with server-based
- 4.12.18. No real dependency management system
- 4.12.19. Single file development will
- 4.12.20. jQuery should only happen in the views
- 4.12.21. Use _underscore for the wrapping support
- 4.12.22. Minimize the use jQuery for core JavaScript work
- 4.12.23. Use tools like requiresJS to manage template dependencies
- 4.13. Simplify the selection process for Yearbook viewer
- 4.14. TODO MockJax and MockJSON
- 4.15. TODO Autorun seemed like the cleanest in browser runner to have synchronous
- 4.16. Both backbone.js and FuncUnit are implementations of code organization
- 4.17. TODO requireJS
- 4.18. yearbookMediator finds the views: selectorView, pageView, membersView, inpageView
- 4.19. yearbookMediator fetches data, constructs viewable models
- 4.20. jQuery.proxy()
- 4.21. jQuery.queue()
- 4.22. Improved RegExp in jQuery
- 4.23. Focus on ongoing training for front-end for new developments
- 4.24. New integrations have a roll-out process
- 4.25. Provide +Software 1hr training on jQuery 1.8 (widget factory, position)
- 4.26. Provide upgrade options with new UI components with Creative
- 4.27. Core UI widgets are designed to be maintainable and minimal (e.g., extensions from options)
- 4.28. Use extensions rather than custom development webdev
- 4.29. CLassmates sponsorship for history / persistence approach
- 4.30. Clarify library documentation and testing expectations
- 4.31. TODO git clone summary
- 4.32. Twitter follow summary
- 4.33. RSS summary
- 4.34. TODO Promote JS
- 4.35. TODO PolyFill
- 4.36. Books: Required Reading: jQuery Fundamentals (Rebecca Murphey)
- 4.37. Pull the AOL code files for scrollable,
- 4.38. How to make sure progress is made to make applications flexible
- 4.39. Yearbooks: yearbooks.ui.load, yearbooks.data.loaded
- 4.40. What should be based on jQuery vs. underscore.js vs. POJ
1. jQuery 2010 Boston
1.1. Theme
1.1.1. Mobile
1.1.2. TDD
1.1.3. 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
1.2. 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!?
2. Saturday
2.2. DONE 10:00AM Welcome and Introduction (Ralph Whitbeck)
Hashtag: #
2.3. DONE 10:15AM Keynote - jQuery Core & jQuery Mobile (John Resig)
2.3.2. License transition
2.3.4. jQuery 1.4.3 Released
2.3.5. .link()
2.3.6. cssHooks()
2.4. 10:50AM Phono
Provide messaging in browser
2.5. 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>
2.5.1. data-theme
2.5.2. data-role='page
2.5.3. bars, boxes, buttons = theme
2.5.4. Transitions from jQTouch
2.5.6. Buttons created by default
2.5.8. ui-grid
2.7. DONE 2:30PM TDD your jQuery Plugins (Paul Elliott)
2.7.2. Suprising amount of interest
2.7.8. Create wrapper for the plugin
(function($) {
})(jQuery);
2.7.9. Create a chain test
$(function () { test( "is chainable", function () { $() });
});
2.7.11. Iterate over the tests
2.7.13. Code examples
paulelliott/jquery-tdd-example
2.7.15. Build process support
Selenium may be the only option for JavaScript driving pages.
2.8. DONE 3:15PM A Crash Course in JavaScript Application Testing with FuncUnit (Brian Moschel)
2.8.1. Functional test frameworks
2.8.2. Why not testing
2.8.3. Bariers to Entry
2.8.4. Foreign APIs
2.8.5. Debugging across platforms
2.8.8. Only QA has access to tools
2.8.16. S uses $ but is synchronous
2.9. DONE 4:15PM Rapid Testing, Rapid Development (Menno Van Slooten)
2.9.2. Using Firefox Web Developer view generated source s/javascript/jasonscript/gi
This allows work just on the UI.
2.9.3. JavaScript comment hack
* This is not a comment //*
2.9.4. Mockjax
2.9.5. MockJSON
2.9.6. There are many frameworks
2.9.10. Still need to have logging
2.9.11. Become better with your editor
2.10. DONE 5:15PM Beyond the DOM: Functionality-Focused Code Organization (Rebecca Murphey)
2.10.1. YQL is awesome
2.10.2. Uses mustache.js
2.10.4. 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.
2.10.8. Require.js
2.10.10. Patterns: mediators, views, services
2.10.11. Use mediators to set up the page
2.10.15. Mediators set of views and services
2.10.16. Views display data
2.10.17. Services manage data and state
Only have alimited public interface for mediators
2.10.18. -.fetch() doesn't couple with DOM
2.10.20. Passing objects as arguments competes with jQuery plugins
Inverts the form of control.
2.10.22. Requires allows text file inclusing
2.10.23. pub/sub nomenclature [object]/[verb]
2.10.24. Stolen from Dojo
2.10.25. Does Mediator == Controller
3. Sunday
3.1. DONE 9:45AM AppendTo Announcement
New training and development. Look at training options.
10,000 new front-end developers.
Available at
3.2. DONE 9:45AM Keynote - jQuery UI (Richard D. Worth)
3.2.1. Foundations
jQuery UI was based on Interface which had a dependency on 1.1.2.
3.2.3. 1.5 made the API more jQuery-like
Also removed the dimensions dependency.
3.2.4. New CSS framework
3.2.5. 1.8
3.2.7. Button + collections + icons
3.2.12. Monitor the roadmap
3.2.15. 2.1 (Grid)
MSFT is providing resources to help with Grids
Based on template, globalization,
3.3. 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.
3.4. DONE 11:00AM jQuery's Best Friends (Alex Sexton)
3.4.1. 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
3.4.4. 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.
3.4.5. LABjs
Use only at the client.
3.4.6. Modernizr
Just a feature testing library for HTML5
3.4.7. Templates
How to integration into system layout.
How to deploy.
3.4.8. Micro-templates
3.4.9. Underscore.js
3.4.10. PubSub
Similar to just using custom events.
Which would be the preferred approach.
3.4.11. 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:
3.4.12. 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
3.4.13. EasyXDM
3.4.14. Namespace
Always pick your own
3.4.15. Others
3.4.15.1. backbone.js
3.4.15.2. jQuery UI (Widget),
3.4.15.3. json2 and closure compiler
3.4.15.4. Set and use code formatting guidelines
3.4.15.5. Testing…FuncUnit
3.4.15.6. JavascriptMVC could be an option
3.4.15.8. Promote JS: JS Docs
3.5. DONE 1:00PM Building Distributed JavaScript Widgets with jQuery (Ben Vinegar)
3.5.4. Encase risk areas in iframes
3.8. 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
3.8.1. 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.
3.8.3. Process
Review all new Chrome releases to have
3.8.4. 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); };
3.10. DONE 3:54PM jQuery in the [Aol.] Enterprise (Dave Artz)
3.10.1. Third-party widget
3.10.3. $.inlineCSS (options.css )
3.10.5. 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.
3.10.6. Need to use $.queue
Wrap the XFBML parse fujnction to ensure that multiple items aren't crashing the page.
3.10.9. $.getJS
3.10.10. AOL.getJS
Only for CDN.
3.10.11. AOL Origin Server Tool
This is a manually merged file not required by teh application
has the CDN file.
Has a visible tool.
3.10.12. Next steps: code organizatoin
3.11. DONE 4:30PM App in a Browser (Jonathan Sharp)
3.11.1. appendTo
3.11.3. 1998: Dump HTML
3.11.4. 2010: Gmail
3.11.11. 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.
3.11.12. Apps: bus, ui, request
3.12. DONE 5:30PM Super Awesome Interactions with jQuery (Matt Kelly)
3.12.1. First Do No Harm
3.12.2. Understand Response Times
3.12.3. Communicate
3.12.4. Anticipate
3.12.6. Only perform uploads with Ajax
3.12.7. $.hasText
This is a reasonable plugin: based on the DOM and is something that could be chainable.
3.12.9. Interaction design
3.12.9.1. cross hair
3.12.9.2. curson: pointer
3.12.9.3. readonly: none
3.12.9.4. Store all of the values in the CSS
3.12.10. Bil Scott's interesting moments grid
3.12.11. var deactiveateTimeout, activateTime
When enting an li you need to clar both the timeouts
set oa tmeout
4. TODO Review
4.1. TODO BBQ updated to use 1.4.3
4.6. Collect attributes
$("<a>").attr( { "href": "#", "target": "_new", "title": "My link" } )
4.7. RegExp test
foo.test("foobar");
4.9. Update .emacs for
4.12. TODO TDD / BDD / Unit Testing for JavaScript webdev
4.12.1. Inherency
4.12.2. What is the development approach
4.12.4. What is the stable tools
4.12.8. How this was approach
4.12.9. Option: Rails based tools
4.12.10. env.js and Rhino plain
4.12.11. Selenium based tools
4.12.12. jQuery in page
4.12.15. Exploration is frequently done with
4.12.16. Use mock services
4.12.18. No real dependency management system
4.12.19. Single file development will
4.23. Focus on ongoing training for front-end for new developments
This can be something where people train on their own.
4.31. 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.