• UI / design
• Events / interactions
• Performance / scalability

• Drag + Drop directly into browser
• EXIF thumbnails on the client
• Support for lots of photos

See the UI in action: Uploadr Beta (2012) demo screencast

• Binary/XHR access, drag + drop (HTML5 file APIs)
• Grid layout for working area
• Fluid UI, big + small screens

Divide and conquer.

• Modular. Editr, EditrGrid, EditrData, PhotoItem
• Event-driven. EditrData:filesAdded, EditrGrid:selection, PhotoItem:update

Preventing :event overload

Fire once, with lots of data. EditrData:filesAdded([file1, file2, file3]);

(Then do all the heavy lifting at once).

CRUD Analogy

• Creates objects to represent files
• Reads metadata from EditrData
• Updates EditrData as user adds or edits metadata
• Deletes objects with file removal

Broadcast events are good.

• EXIF thumbnail received
• File upload progress
• Processed thumbnail received
• Upload failed

"Good news, everyone!"

• A selection was made
• Photo titles were updated
• Photos were rearranged, rotated, deleted, privacy changed, etc. ...

Only events + data thus far.

This stuff is pretty fast.
No DOM + UI yet.

The DOM is Slow.

• Treat as "read once, write-only"
• Cache the hell out of everything (window.scrollTop and other high-level properties, too)
• Make large changes in one call (documentFragment, innerHTML etc.)

Throttle + queue / batch operations.

• window.scroll() is frequent, window.resize() is expensive.
• Wait for things to settle down, then do your work. And cache it.

Staying fast

• Scroll: New row needs to be shown. Destroy + recreate HTML.
• Resize, worst-case: Layout changes. Recalculate columns + rows, cache new window + DOM coordinates, recreate HTML.

Updates: Online/Offline Nodes

• Photo objects (data + nodes) are created, cached as files added.
• Objects marked as "dirty" when metadata (i.e., title) is updated. DOM updated when photo is shown in the UI.

Updates: Online/Offline Nodes

"Select All -> edit titles" case:
Data model is immediately updated.

On-screen nodes also immediate. Off-screen nodes refreshed when scrolled into view.

inline-block CSS for grid items

One top-level className change to toggle "info" overlay mode across grid

Mixable className values dictate UI of each grid item

photo-item content-type-photo safety-level-safe license-nc has_thumbnail has_uploaded has_fullsize_thumbnail has_error is_oversize selected

:hover can be expensive.

Consider disabling hover, transitions and related effects during scrolling or expensive cases (eg., mouse selection events).

There Shall Be Donuts.

Progress ring generated via <canvas>, applied to photo items and dynamic favicon (where supported)

Uploadr UI In Action

http://flic.kr/p/bydYFf

• Throttle, queue and combine events + DOM writes.
• Cache the hell out of everything.
• Don't do work until you have to.

• Building the Flickr Web Uploadr: The Grid
• Raising The Bar On Web Uploads

http://code.flickr.com/author/scottschiller/