jQuery UI & MobileThe Great Merger

September 2013

Scott GonzálezProject Lead, jQuery UI

Code That Works Everywhere

Code That Works Everywhere

• Large and small devices

• Fast and slow connections

• Assistive technologies

• Known and unknown environments

CSS Framework

• Page layout

• Responsive design

• New icons

• Useful with and without JavaScript

CSS Framework

• Simpler/cleaner markup and CSS

• Fewer DOM manipulations

• Better performance

Responsive Design

• Responsive grid added in jQuery Mobile 1.3

• Working on more responsive layouts

• Working on responsive widgets

Responsive Widgets

Responsive Widgets

Responsive Widgets

Responsive Widgets

New IconsChallenges

• No scalable image format that works everywhere

• Different performance metrics on desktop and mobile

• Can’t optimize CSS with a client-only solution

New IconsSolutions

• SVG data-URIs with PNG fallbacks

• PNG as external images and data-URIs

• Defaults to SVG + external PNG

• unoptimized CSS, no config, works everywhere

• Opt-in for better performance

• optimized based on capabilities, requires config

CSS Framework

• Useful with and without JavaScript

• Useful for prototyping like Bootstrap

• Shared between both projects

• Preferably shared with other JS libraries

Widgets That Work Everywhere

• Widget Factory

• Common API & Extensibility

• Pointer Events

• Interaction Abstraction

• CSS Framework

• Responsive Design

Widget Factory

• Provides a common API for all widgets

• Manages widget lifecycle and state

• Manages event binding and unbinding

• Provides extension points

Mobile Widget Factory

• No more $.mobile.widget

• Just enhances the base widget

• Automatic initialization for all widgets

• Automatic data-attribute parsing

Mobile Widgets Outside of Pages

• Prior to jQuery Mobile 1.4, widgets were tightly coupled with the page system

• Now all work standalone

• One step closer to UI/Mobile merge

Dependency Management

• AMD/UMD for all jQuery projects

• Bower for all jQuery projects

• Please only load what you need

New Widget:Filterable

• Born from the listview filter extension

• Dynamic filtering for any set of elements

• Defaults to the element’s text, but can be overridden

New Widget:Selectmenu

• Replaces <select> elements

• Single select only

• Supports option groups

Form Controls

• Enhancements for all native controls

• Consistent styling for all forms

• More styling for existing widgets

• Shared widgets between UI and Mobile

Web Components

• Investigating how to transition

• Making sure the spec solves real problems

• Not quite there yet

• If you’re interested, check out Polymer

Questions?

Thank You