jQuery Boston 2011
Table of Contents
- Overview
- Recommendations
- Saturday Sessions
- jQuery Keynote, John Resig
- jQuery Mobile Keynote, Todd Parker and Scott Jehl
- Attributes and Properties in jQuery, Timmy Willison (@timmywil)
- Node.js for frontend developers, Garann Means
- From callbacks to $.Deferred to $.Callbacks, Julian Aubourg (@jaubourg)
- Extending Your jQuery Application with AmplifyJS, Elijah Manor
- Breakout: phantomjs
- JavaScript testing in JavaScript, John Bender
- Chrome, Paul Irish
- Plugin Authoring Best Practices, Ben Alman
- Slides
- Ensuring chainability of modules
- Ensuring endability
- Working with noConflict
- When writing modules this is $ object
- Always return this
- html() in 1.4 can consume a function parameter to return currenthtml
- Use null + undefined check as only valid use case for == null
- Provide getters and setters
- Creating endable methods
- If using map() the return needs to have content()
- Cannot use submethods on collection plugins
- $.expr[":"]
- Consume options object then $.extend
- $.fn.myPlugin.defaults
- Use exports rather than $
- Create a package.json to have it included in a future widgets store
- JsViews: Next generation jQuery Templates and Data Link, Boris Moore
- Remote debugging with jQuery Mobile, Mike Taylor
- MediaTemple Party
- Sunday Sessions
- jQuery UI Keynote, Richard D. Worth
- Breaking Changes + Happy Users = Mythical Software?, Scott González
- Breakout: Dramatic Bug Readings
- jQuery, You & I: Lookin' Good Together, Rick Waldron and Adam Sontag
- Event Improvements in jQuery 1.7, Dave Methvin
- Breakout: Canvas Animations
- Contextual jQuery in Practice, Doug Neiner
- CouchApps with CouchDB & jQuery, Bradley Holt
- Scaling Performance of Large Applications, Even On Mobile Devices, Gregory Moeck
- CoffeeScript and You - Become a better JavaScript Developer, Mark Bates
- special.fx
- Achieving harmony with third-party JavaScript, Anton Kovalyov
- Speeding Up the Future: How jQuery Can Help, Yehuda Katz
Overview
http://events.jquery.org/2011/boston/schedule/
http://events.jquery.org/2011/boston/schedule/jQuery_Conference_Schedule.pdf
#jqcon
http://speakerrate.com/events/1089-jquery-conference-2011-boston
Slides
Consolidated set of slides available from
Slides should also be linked from the main session page:
Summaries
Recommendations
$.Deferred
Templates and data binding
Saturday Sessions
jQuery Keynote, John Resig
jQuery 1.7
- Beta 1 is out
- Now support HTML5 elements in MSIE6
- Event Property Hooks
- .on() and .off() mirror .live() and .delegate()
- Better support for IE form event bubbling
Project
jQuery is a bit different from other projects in that the non-technical aspects are considered core. One of the key elements is the full process for how people interact with the library:
- first day
- month
- year
Don't let the user give up at any stage of the process and go elsewhere.
Make sure that the community is healthy: questions are answered independent of the medium.
Make sure that the API documentation is current and correct.
Process
Use an open process for communicating changes associated with core, UI, and mobile.
Features
Plugin system is core. Can't keep growing the library forever.
There is a new plugins site.
Questions
.data(events)
Show the events for an object.
Need to hide internal API.
No sense of the number of sites using particular versions.
Module loading in 1.7.
Uses dynaTrace for the profiling. Optimize to IE first. Performance is tricky since it's browser specific and changes radically with new releases. At the end of the day just do the analysis of the code you have.
MSIE6 support will likely not go away since jQuery needs to support 7 and 8 for the core DOM and event handling. This is in contrast to the support for mobile and UI.
Metro platform from Microsoft suggests the relationship will only be deeper moving forward.
jQuery Mobile Keynote, Todd Parker and Scott Jehl
Mobile web is massive
35 billion devices. The problem isn't limited to just iPhones.
As of July 2011 the core browsers are Opera and Nokia.
Don't leave people out so make sure that the content is accessible even if the rendering is different.
CDN
jquery.mobile.min.js: 10 - 25kb
Navigation
Navigation model, pushState. The hashbang approach has now led to full history control.
Navigation model
Listens at the top of the page with events then loads in content via AJAX, animates to the change, then removes the previous DOM node.
replaceState: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
Natural use of the hash for local, in-page, navigation is preserved.
Forms
Forms are Hijax'd to allow for pushState.
Hashed anchors
These are preserved.
Theming
"Don't make your site look like the docs."
data-rel: dialog
This supports hardware-only closing to move back.
API
$.mobile.changePage
This works for window.history.back().
This can also work with an optional secondary parameter to have the configuration of the parameters to GET to a page.
data-prefetch
Events
- domready (only once)
- pagecreate (live page updates)
- pagebeforecreate (see the docs)
- Page Change (http://jquerymobile.com/test/docs/api/events.html)
Has support for virtualized events: bind('vclick', function() {…}).
Pagination Example
Roadmap and Features
- Data Attr Namespacing
- Phone Gap support
- i18n
- ThemeRoller by Adobe (http://jquerymobile.com/blog/2011/09/29/jquery-mobile-1-0rc1-released/)
- Builder
Attributes and Properties in jQuery, Timmy Willison (@timmywil)
jQuery 1.6 came with a rewrite of the .attr() method and the introduction of the .prop() method. This came with a significant performance benefit and changed the way attributes and properties are treated internally in jQuery. Most of all, it gives the user a chance to finally differentiate between the two. In my talk, I plan to expound on the difference between attributes and properties and the advantages of working with both. I'll focus mainly on a discussion of HTML vs the DOM and how interacting with one can be more beneficial than another in certain use cases.
Slides
Changes in 1.6
- rewrite of .attr()
- performance improvements
Would initially look for the property then would fall back to the
Example: all of the form names
{code} <form action="/act"> <input name="action"/> </form> {code}
Anti-patterns
The following are cases that
{code} $(window).attr() / only has properties / TODO: {code}
Dealing with checked and value with .attr() vs. .prop()
When the page loads the attribute is set but the property is live on the object.
{code} input = document.querySelector('input') input.checked = false input.getAttribute // Returns true based on load {code}
This also extends the case for .getAttribute('value') where there's also .val() .
Use cases
Could check cases where there is a drift in values. See for example the vlaue for tabIndex.
Summary
There are a small number of problem attributes + properties.
Example: img src the property and attribute stay up to date.
Example: checked values
Example: class vs. className
Example: element creation uses attr()
Questions
A: window.location because it's very existential.
RT @bmcmurray: at #jqcon, "What's your favorite property?" @timmywil: "window.location because it's very existential."
Node.js for frontend developers, Garann Means
Do you write JavaScript? Congratulations, you're probably awesome at Node.js! While thinking about things from a server-side perspective might feel off-putting and unnatural, things like callbacks, storing data in JSON, and implementing actual websites probably do not. We'll go beyond getting Node installed and talk about how to quickly build a working web application, and demonstrate that Node can offer frontend developers more than just a new prototyping tool or way of creating endless chat servers.
Slides
@garannm: If you made it to my #jqcon talk (or didn't) and wanna see the slides and get the links, they're up now: http://t.co/FSOzQdMo
From callbacks to $.Deferred to $.Callbacks, Julian Aubourg (@jaubourg)
If you're into asynchronous programming, you'll love jQuery 1.7! Not only do Deferreds gets progress callbacks, but you also get a brand new constructor, $.Callbacks, that covers pretty much any need you may have when it comes to listing and firing callbacks in your application. Sounds too good to be true? Yet another thingy that's impossible to grasp? Fear not: Julian will walk you through it and make you the first persons in the world to know about $.Callbacks in and out!
Slides
1.5: done() and when()
Look at the success attribute of the configuration then make subsidiary requests.
1.6 pipe() (and 1.7)
Just pass the data aroudn.
$.ajax({}).pipe()
{code} // Two callback buckets: resolve and fail var defer = $.Deferred(); deferred.pipe( function() { defer.resolve('resolved') }); defer.resolve('foo'); {code}
1.7 progress(cb) (with notify()
Once the defer is resolved notify() can't update the progress.
.when() handles mutiple progress
Useful if you have multiple progressions you need to track.
defer.isProgressing()
Simply check if the state.
$.Callbacks
This is the building block for $.Deferred (resolve, rejqect, and notify).
{code} var cbs = $.Callbacks(""); cbs.add() cbs.remove() {code}
Parameter: "memory"
Parameter: "once"
Parameter: "stopOnFalse"
Avoiding abstraction
A defer is a callback intended to be called with memory but only once.
Extending Your jQuery Application with AmplifyJS, Elijah Manor
As your front-end application grows it is important to abstract pieces of your implementation to make it easier to extend and less painful to maintain.
AmplifyJS is a JavaScript library that was developed to assist with a common set of problems in front-end development. The three components consist of a publish and subscribe messaging system, a persistent storage component that abstracts various cross-browser concerns, and a request piece that sets out to make data retrieval more maintainable.
This talk will start with a sample application that is brittle and tightly coupled and we will slowly enhance the application by the three AmplifyJS components. In the end we will have an application that is testable, flexible, and loosely coupled.
Notes
"Amplify looks really handy. Gets from any source u want. Elijah did good! #jqcon"
Breakout: phantomjs
@treasonx rocked his phantom.js breakout. love the pacman logo. #wakkawakka #jqcon
JavaScript testing in JavaScript, John Bender
In spite of the fact that projects like jQuery set a good example with strong test suites and tooling, an enormous amount of Javascript is either untested (see Most Popular jQuery Plugin list ) or tested using browser automation. The former results in ritual frustration for developers gluing applications together, and the latter a slow and brittle method for software verification.
In this talk John will cover some simple reasons for testing all your Javascript, even the simplest of plugins, in Javascript and address possible cultural reasons for the lack of said testing. He'll then examine some strategies to move more of your testing into the language itself, and finally cover some of the pitfalls you'll encounter when you do.
Scripts are becoming applications
Wide variety of tools
Jasmine, qunit.
JSTestDriver.
CI is still difficult
Jenkins still can't pull back the results.
Manually maintaining all browser state is painful
Decide the type of testing you're applying: Unit or UAT
Prefer events to setTimeout
Chrome, Paul Irish
$0 allows you to refer to the highlighted element in the DOM inspector
Revision history of your CSS changes
dir(), inspect(), copy()
Pretty Printing minified code
Plugin Authoring Best Practices, Ben Alman
jQuery plugins are everywhere, and the chance that YOU will write one—if you haven't already—are pretty high. It might start with a little bit of functionality that you want to reuse or share with someone else, but before you know it… you've released dozens of jQuery plugins and you're writing articles and giving presentations on jQuery Plugin Authoring Best Practices at conferences…. Ok, maybe that's just me.
Regardless, there are many techniques you should know for writing your own reusable jQuery code, or "jQuery plugin," in a way that makes it feel like a natural extension of jQuery.
In this talk, you'll learn how to create custom selectors, chainable methods that double as getters and setters, and traversal or filtering methods that are .end()-able. You'll learn how to organize your code in IIFEs and namespaces, extend option defaults, and even create a custom package.json for your plugin, so that it can be submitted to the upcoming jQuery plugins index.
Ensuring chainability of modules
Ensuring endability
Working with noConflict
Alman uses non-standard "IFE" (immediate function execution) (sp) rather than SEAF (self-executing anonymous functions).
Ensure global execution context isn't polluted:
{code} (function() { }()) {code}
When writing modules this is $ object
Always return this
html() in 1.4 can consume a function parameter to return currenthtml
Example: A yell plugin that adds '!!!' to all matching notes.
{code}
$.fn.yell = function() { $(this).html(function() { return currenthtml + '!!!'}); return this; {code}
Use null + undefined check as only valid use case for == null
Provide getters and setters
{code} $.fn.href = function(href) { / getter if (href == null) { return this.value… } else { / update the hrefs } } {code}
Creating endable methods
Problem: end() only reverts one step in a traversal
See the example from the slides but it has pushStack() as the supported method.
If using map() the return needs to have content()
Cannot use submethods on collection plugins
this becomes a function rather than the collection.
Example: $.fn.myplugin vs. $.fn.myplugin.mysub
The recommendation is to camelcase to something like myPluginMySub.
$.expr[":"]
Custom selectors.
Consume options object then $.extend
$.fn.myPlugin.defaults
Simplifies the use of the default globally.
Compare the $.ajax.settings object.
Use exports rather than $
Create a standard global exports that should work without $.
Create a package.json to have it included in a future widgets store
JsViews: Next generation jQuery Templates and Data Link, Boris Moore
Come and see the future of jQuery Templates, as it moves from Beta1 towards a V1 product. The new jQuery Templates is taking two forms: JsRender – lean and mean, for fast rendering of templates as strings, and JsViews – for powerful interactive browser apps in which Data Link and Templates work hand-in-hand. See how with declarative data linking and templating together, creating powerful data-driven UI is easy, whether using MVVM patterns or binding directly to JSON, and whatever the richness or complexity of the underlying data.
jQuery UI is already building its future data-bound widgets on top of this technology. With JsViews and JsRender integration between jQuery UI controls and your own data and UI becomes trivially straightforward.
JsRender
JsRender supersedes old jQuery Templates project. No DOM dependence, also no jQuery dependence.
This is just static rendering of HTML against data.
Highly performant: doT vs. JsRender, vs. jQuery Template
Core new design features: syntax, nested views, data linking
Using the mustache template format
This is a general expression-free approach.
$.render(myTemplate, myData);
JsViews
Some general features that are worth considering:
- incremental rendering: will only modify
- SEO support on server with
.link()
Live binding of data doesn't require pushing the .html() push first.
.observable()
Listen occurs against the underlying linked data.
Nested templates
Remote debugging with jQuery Mobile, Mike Taylor
With at least 37 A-grade supported environments, debugging your jQuery Mobile application is no easy task. Having been spoiled by Firebug and the developer tools that have followed in its footsteps on desktop browsers, it isn't exactly obvious how to go about this for the Mobile web (e.g., just try to view the rendered source of any page in most mobile browsers). In this talk we'll cover how to cover your bases both in terms of emulators (Android, Blackberry, iOS, Opera Mobile), remote debugging and inspection (Mobile Webkit, Opera Mobile and Mini), and finally online webapps such as Tutti or JSConsole.
History
alert() > Venkman > Firebug
Debugging
MediaTemple Party
School buses for 300.
Space … 281 Summer Street
Sunday Sessions
jQuery UI Keynote, Richard D. Worth
jQuery Mobile & jQuery UI will eventually merge
Documentation improvements
New mask & timepicker
Process and bug fixing
Breaking Changes + Happy Users = Mythical Software?, Scott González
In this talk, we'll see how jQuery UI is dealing with this problem as the API is being redesigned for all existing components. We'll discuss how jQuery UI is implementing the changes and how the upgrade process won't force users to undergo a massive all-or-nothing upgrade, allowing them to start using new components immediately while easing into the new APIs.
General notes on options
Tracking breaking changes
Remove options since they create bloat
Breakout: Dramatic Bug Readings
jQuery, You & I: Lookin' Good Together, Rick Waldron and Adam Sontag
jQuery is a completely community-driven project, and we're constantly on the lookout for talented and motivated people to help us push forward. In this talk, we'll go over the many facets of the project where you can find a niche and make a meaningful contribution to the ecosystem. We'll also discuss how writing clean, consistent and readable code is fundamental to promoting collaboration, contribution and distributed development, and explain how the team uses the jQuery Core Style Guide to write code that looks like it was written by a single developer.
Whether you're passionate about servers, design, documentation, testing, helping others, or just writing JavaScript, we're sure to have something for you!
Event Improvements in jQuery 1.7, Dave Methvin
jQuery 1.7 has several improvements to both the event API and plumbing. Highlights include:
A new jQuery.fn.on() method that unifies direct and delegated event handling Special event handlers can process trigger data and detect delegated events Improved performance for delegated events The normal quota of IE 6/7/8 bug fixes