Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

jQuery UI & Mobile - The Great Merger

5,181 views

Published on

Published in: Technology, Art & Photos
  • Dating for everyone is here: ❤❤❤ http://bit.ly/39sFWPG ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❶❶❶ http://bit.ly/39sFWPG ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

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

×