The document discusses plans to merge jQuery UI and jQuery Mobile to create code that works across all devices and environments. Key points include: 1) Creating a shared CSS framework and responsive widgets for layouts and user interfaces. 2) Developing techniques like SVG icons with PNG fallbacks to optimize performance across different platforms and devices. 3) Building a common widget factory and APIs to create reusable and customizable interface elements that work with or without JavaScript. 4) Continuing to improve form controls and other widgets to provide consistent styling and interactions across all form factors.

1. jQuery UI & Mobile
The Great Merger
September 2013
Scott González
Project Lead, jQuery UI

29. Code That Works
Everywhere

30. Code That Works
Everywhere
• Large and small devices
• Fast and slow connections
• Assistive technologies
• Known and unknown environments

31. CSS Framework
• Page layout
• Responsive design
• New icons
• Useful with and without JavaScript

32. CSS Framework
• Simpler/cleaner markup and CSS
• Fewer DOM manipulations
• Better performance

33. Responsive Design
• Responsive grid added in jQuery Mobile 1.3
• Working on more responsive layouts
• Working on responsive widgets

34. Responsive Widgets

35. Responsive Widgets

36. Responsive Widgets

37. Responsive Widgets

38. New Icons
Challenges
• No scalable image format that works
everywhere
• Different performance metrics on desktop
and mobile
• Can’t optimize CSS with a client-only
solution

39. New Icons
Solutions
• 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

40. CSS Framework
• Useful with and without JavaScript
• Useful for prototyping like Bootstrap
• Shared between both projects
• Preferably shared with other JS libraries

41. Widgets That Work
Everywhere
• Widget Factory
• Common API & Extensibility
• Pointer Events
• Interaction Abstraction
• CSS Framework
• Responsive Design

42. Widget Factory
• Provides a common API for all widgets
• Manages widget lifecycle and state
• Manages event binding and unbinding
• Provides extension points

43. Mobile Widget Factory
• No more $.mobile.widget
• Just enhances the base widget
• Automatic initialization for all widgets
• Automatic data-attribute parsing

44. 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

45. Dependency
Management
• AMD/UMD for all jQuery projects
• Bower for all jQuery projects
• Please only load what you need

46. 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

47. New Widget:
Selectmenu
• Replaces <select> elements
• Single select only
• Supports option groups

48. Form Controls
• Enhancements for all native controls
• Consistent styling for all forms
• More styling for existing widgets
• Shared widgets between UI and Mobile

49. Web Components
• Investigating how to transition
• Making sure the spec solves real problems
• Not quite there yet
• If you’re interested, check out Polymer

50. Questions?

51. ThankYou