Live: jQueryUK 2012 highlights

10/02/2012

Precisely one quarter of team Loft are the the jQuery UK 2012 conference today. Keep an eye on this spot - we'll be updating from time to time with insights, nuggets and highlights.

State of the jQuery project, Ralph Whitbeck, 10:00am

As of this morning 54% of top 10,000 sites use jQuery
More than Flash: 47%
Financial size 2x all the other Software Freedom Conservancy projects put together
Discussion of new and upcoming features and projects

jQuery mobile keynote, Todd Parker, 10:45am

Handshow: everyone here has iOS/Android. No Nokia, Windows, etc.
Objective: create one codebase for all devices
Including desktop too
50+ test devices in lab
To test: you've really got to use the device. Emulators don't really cover it.
Approach: progressive enhancement: start with core HTML, add clever stuff on top (NN: mirrors Loft overall dev approach: build foundations, then decorate)
Integrated with PhoneGap
Discussion of features - see jquerymobile.com
Load the libraries and automatically Ajaxifies links, sorting out back button, URLs keeping them nice, etc.
Loft front-end tech @juptrking tweeting about these now...
We need help on the ground - contribute if you can: testing (github.com/jquery/jquery-mobile), $$$ and developer time

Break

Will: Wish we used jQuery mobile for the ISS mobile app
Nick: interested to see how it can dovetail with responsive design
Tuppers: female toilets are empty!

Web vs. apps, Dion Almaer and Ben Galbraith, 12:00pm

Why did MS take a 180 turn in their approach to the web?
Mobile app ecosystem is huge: 750,000 apps
And they're all good quality (snigger)
App ecosystem has a larger audience than TV, except for during primetime
Adobe Air gave designers freedom - eg for Ebay, where the audience complained if anything changed on the main site
Delta, for example, native app experience much better than mobile web, while some companies skip the mobile web completely in favour of native apps
App audience overtaking mobile web audience
MS made their break with Windows OS on the basis that their apps were better - better OSes just couldn't compete because the apps didn't work
So how did the desktop/app ecosystem break down? The web: any app, any platform
So there's a lot of feeling that the web will bring the same change to mobile, break down the device+app model
But we're not totally sure this is a fait accompli
Because it is easier to find, buy and install mobile native apps than is was for desktop apps - the experience is so much better
So important to fight for the open web, for the long term benefit
Maybe democracy is messy - standards committees and all that - but it's better for the community than corporate control of apps through devices
Compare HTML5 vs iOS - benefits in each, but we believe real advantages in HTML5:

"Write once, run anywhere" - see for example http://functionsource.com/post/netflix-feature
Push updates/upgrades without depending on user
The URL
Open source ecosystem of frameworks to work with
Very excited about node.js

Also some exciting benefits to iOS, especially the toolkits on offer. How to combine these to best advantage?
Run your web app as a native app? Problems just wrapping it up.
Phonegap mentioned again here - especially plugin architecture
People have been really struggling to get the results out of Phonegap and Titanium, some have found it easier to just split and build native apps for devices
Facebook case study: feed functionality standardised across platforms, the wrapping is native - works effectively for users and developers
LinkedIn does this too
DA & BG tried similar at Walmart
But what didn't work was this: load app then load content - users didn't want to wait for the app to load
Instead, load content, then lazy-load in the app stuff (NN - presumably a shell app loaded then?)
So, what were the mission critical bits of the business, than need AB testing, hot-upgrade, dynamic update etc? For these, same codebase for the web-on-mobile and native app checkout, delivered over web
This led to creating a framework - http://walmartlabs.github.com/thorax/ - of code used again and again in this process
And Lumbar for build - http://walmartlabs.github.com/lumbar/
Walmart currently most revenue from mobile website compared to native app, whereas Asda, 50-50
But in some apps, Walmart has bigger audience in the native app

Building single page apps, Jörn Zaefferer (bassistance), 12:45pm

HTML5 history API and various libraries
Why not use hashchanges, as, eg, Twitter does? No need, and the URL does not exist on the server
How to optimise user experience on first page load: don't just load everything up front
Use server side rendering (templates, etc)
Simple node.js example using handlebars
What can go wrong? You don't know if your code blows up in the browser
Look a client-side error handling and reporting back to server
What when you get 1000s of errors per hour? Aggregate... eg using Lighthouse
More at git.io/Hirx3Q

Reducing number of overall requests is excellent approach to improve mobile performance

Embracing and celebrating redundancy, Christian Heilmann, 14:20

To get on, ensure you're not "the only one who knows how to do X at your company"
How to handle bad browsers? Cater for lowest common denominator, block old browsers? Or abstract into a library?
jQuery: API to work around them, add chaining, replace the DOM, access everything with CSS selectors
It simulates the browser we always wanted
If we just always go to jQuery, we are not understanding and celebrating how simple and powerful JavaScript really is
And it hurts browser innovation
So jQuery won. It's "time to move on and change the native web tech"
But there's also a backlash -- '\\'.replace('s', '') for the geeks
Lots of jQuery usage really isn't that short or efficient (DOM walking), and mixing styling into the JS layer
Case study of a simple client-side todo list written in native JS
document.querySelector() - native version of $()
Start with sensible HTML structures
It even works in IE6 - but don't give IE6 anything fancy: "The love with IE6 is really bordering on necrophilia at times"
Use native CSS animations and transitions
And whatever else the browser natively gives you
Don't answer any JS question with "use jQuery"
Lots of things in devices - like local storage - that JS cannot access, and that's unfair.
Slides at icant.co.uk/talks/jquk/

Aloha Editor, Haymo Meran, 14:50

An intro to the editor (NN: looks v good)
Migrating to jQuery UI
And Aloha Wikidocs - launching momentarily - colloborative editing for HTML5

Last update: 15:06