jQuery UI & Mobile - The Great Merger

4,746 views

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
4,746
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery UI & Mobile - The Great Merger

  1. 1. jQuery UI & Mobile The Great Merger September 2013 Scott González Project Lead, jQuery UI
  2. 2. Code That Works Everywhere
  3. 3. Code That Works Everywhere • Large and small devices • Fast and slow connections • Assistive technologies • Known and unknown environments
  4. 4. CSS Framework • Page layout • Responsive design • New icons • Useful with and without JavaScript
  5. 5. CSS Framework • Simpler/cleaner markup and CSS • Fewer DOM manipulations • Better performance
  6. 6. Responsive Design • Responsive grid added in jQuery Mobile 1.3 • Working on more responsive layouts • Working on responsive widgets
  7. 7. Responsive Widgets
  8. 8. Responsive Widgets
  9. 9. Responsive Widgets
  10. 10. Responsive Widgets
  11. 11. 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
  12. 12. 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
  13. 13. CSS Framework • Useful with and without JavaScript • Useful for prototyping like Bootstrap • Shared between both projects • Preferably shared with other JS libraries
  14. 14. Widgets That Work Everywhere • Widget Factory • Common API & Extensibility • Pointer Events • Interaction Abstraction • CSS Framework • Responsive Design
  15. 15. Widget Factory • Provides a common API for all widgets • Manages widget lifecycle and state • Manages event binding and unbinding • Provides extension points
  16. 16. Mobile Widget Factory • No more $.mobile.widget • Just enhances the base widget • Automatic initialization for all widgets • Automatic data-attribute parsing
  17. 17. 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
  18. 18. Dependency Management • AMD/UMD for all jQuery projects • Bower for all jQuery projects • Please only load what you need
  19. 19. 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
  20. 20. New Widget: Selectmenu • Replaces <select> elements • Single select only • Supports option groups
  21. 21. Form Controls • Enhancements for all native controls • Consistent styling for all forms • More styling for existing widgets • Shared widgets between UI and Mobile
  22. 22. Web Components • Investigating how to transition • Making sure the spec solves real problems • Not quite there yet • If you’re interested, check out Polymer
  23. 23. Questions?
  24. 24. ThankYou

×