Upload
scottgonzalez
View
1.241
Download
0
Embed Size (px)
DESCRIPTION
Citation preview
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