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.
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. :)
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.
- 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.