SF jQuery Conference 2011: My Learnings

For the last 5 years, I've really only attended conferences that I was speaking at or somehow representing Google at, and I was always paid by Google to attend. This past weekend, I convinced myself to pay out of my own pocket to attend a conference for the first time, and it was completely worth it.

jQCon was a 2-day event in the Microsoft Mountain View campus with a wide range of well-known speakers, like Nicholas Zakas, Steve Souders, Paul Irish, and of course, John Resig, plus equally skilled but lesser known contributors to the world of jQuery and JavaScript programming. It was a great way to learn new techniques and tools for client-side web app development from the people that are doing it 24/7 for some of the biggest sites on the web.

I personally gravitated to the more mobile-oriented talks, as I've recently become interested in mobile webapp development (I finally use my phone here!) and have been using jQuery mobile for the next version of SpeakerMeter. I learnt a lot about how people are currently writing mobile webapps, and more importantly, I realized that this is a rapidly changing area, particularly as the line between desktop and mobile becomes increasingly blurry. I was hoping to find the "one true way" of making a HTML5 mobile webapp, but I've realized instead that I need to try the current ways out there (like PhoneGap + jQuery Mobile) and be ready for that to change.

I took notes throughout the talks on tips and resources, and am sharing them here both for my own reference and to give you an idea of what was discussed. I look forward to learning more at the next jQCon, whenever that may be. :)

Day 1:

jQuery Mobile (Todd Parker & Scott Jehl)

• Many developers are using jQuery Mobile in combination with PhoneGap to deploy mobile-optimized webapps.
• jQuery Mobile now supports more mobile browsers, including Kindle Webkit.
• The jQuery Mobile team put a lot of work into making all the controls accessible.
• The team is working on an improvement that will include better URLs (hash-less) for browsers that support it (HTML5 pushState).
• The team made sure that it was easy for developers to make custom themes/colors, and they want more developers to take advantage of that.
• Browse the jQuery Mobile gallery to see what other developers have done.
• The M Project is an open source project to make it easier to make mobile webapps with jQuery mobile.
• The team recommends specifically optimizing the UI for iPad/tablets and not just using the standard narrow mobile layout. They hope in the future that the framework can do more of that for developers.
• CSS3 media queries can be used to change the UI for different device sizes.
• jQuery Mobile can be used with grids frameworks (can be useful for tablet layout).

Mobile Performance (Steve Souders)

• Its better to have your site be fast when users first experience it - study showed slow sites lost users (and it took a while for them to come back).
• Use Blaze.io for seeing the mobile performance of your site (like webpagetest.org).
• Use PCAP Web Performance Analyzer to analyze performance of websites (can be used locally).
• Use JDRop with mobile bookmarklets to store performance data in the cloud for later analysis.
• Use data URIs and localStorage for better mobile performance.

Progressive Enhancement 2.0 - Because the Web isn't Print (Nicholas Zakas)

• Read: "Understanding Progressive Enhancement"
• "The relationship between a web browser and a webpage is like a television and a TV show."
• Examples of progressive enhancement in the real world: escalators and electric toothbrush.
• Websites don't need to look exactly the same in every browser.
• Don't try so hard to make old browsers do what new browsers can (consider effort versus value) - like rounded corners, drop shadows, and gradients.
• Developers use multiple browsers, but most users only use one browser - they won't know if the experience is different.
• Progressively enhance for browsers that support newer technology - Facebook chat is an example of a progressive enhancement.

Integrating Code Quality tools into your jQuery Development Workflow (Anton Kovalyov )

• JSHint is the alternative to JSLint - does not enforce so many "crocklamations" by default.
• Recommends using git precommit and postcommit hooks for running JSHint, to make sure all team members are using it. Break the build if it errors.
• Many community-written addons for integrating JSHint with IDEs. He likes Sublime.
• Read: Perfection Kills, A minute with Brendan

Prototyping and Unit Testing with Mockjax & mockJSON (Elijah Manor)

• MockJAX is a jQuery plugin for simulating AJAX requests and responses.
• MockJSON is a library for generating random JSON responses based on JSON templates. Works well with MockJAX.

Day 2:

Filling the HTML5 & CSS3 Gaps with Polyfills and Shims (Rey Bango)

• Rey is both a Microsoft employee and a jQuery team member - MS is a big supporter of jQuery.
• A "polyfill" mimics a standard/future API and makes it work in older browsers, whereas a "shim" provides an arbitrary API for achieving some functionality. "Polyfill" was named by Remy Sharp after the British term for spackling - it's like filling holes in old browser cracks.
• When you are using a polyfill or shim, vet them carefully: see how many developers are working on them, how frequently they update them, etc.
• Long list of polyfills and shims.

How jQuery is helping Pixar to make their movies (Philip Floetotto)

• Pixar is a big Python user. For their project management system, they used Django for the backend and jQuery for the frontend.
• They built their UI on top of the TableSorter plugin.

Presentational jQuery (Doug Neiner)

• Be concious of when you use linked stylesheets vs. STYLE tags vs. inline style setting. Never use jQuery to set initial state. Reduce use of .css() as much as possible.
• "Use selectors like you run errands" - try to do as much in one call as you can.
• Experiment with easing (on different properties) for better animations.

Breakout Session: jQuery Mobile

Much discussion on using jQuery Mobile to build static sites that are deployed as WebViews inside of native apps.

• Advantage of PhoneGap over Titanium is that it deploys to more mobile platforms.
• Phone Gap Build lets you deploy mobile apps without needing to download anything.
• Use something like JSON Template or Handlebars for client-side templating of the jQuery mobile headers and footers.
• Use HT Track or Hyde to use Django templates locally and still output a static site.
• Recommended reading: Responsive Web Design.

The Middle Way: Developing Hybrid Mobile Apps (Alex Kessinger)

• Use localStorage to store data locally, and use LRU to stay under the 5MB size limit.
• If using AppCache, inline everything (CSS, JS, HTML) so everything stays in sync in the cache.
• For a better user experience, render *anything* to the user first (versus nothing), even fake DIVs.
• For easier mobile debugging, try JSConsole.
• OpenAppMkt is a marketplace specifically for mobile-optimized webapps.

Breakout Session: CouchDB + jQuery

Wrote a small JQuery & CouchDB app (with this view).

Creating mind-blowing UX - "Building great user experiences with the help of jQuery" (Darcy Clarke)

• User experience is about emotions - you want your users to have positive emotions when using your site. Surprise is an emotion that can be either positive or negative.
• Inspirational design agencies: F-I, Zurb, Blitz