1. Next Generation UI
with jQuery
By Vitali Malinouski

2. The need
• Why do we need another UI library?
• jQuery & plugins
• Others (prototype, mootools, dojo)
• YUI
• ExtJs

3. Pain Points
• Moving Target (Web 2.0, HTML5, CSS3)
• MVC
• Size and Speed
• Uniformity
• Diversity
• Customization

4. Moving Target
• HTML5 and CSS3
• new semantics
• borders, gradients, shadows
• CSS3 animations
• Graceful Degradation vs Progressive
Enhancement

5. MVC
• Client side vs Server Side
• JSON as Model
• Multi-tiered MVC designes
• Frame Work

6. Uniformity
• Similar Usage $().w2grid()
• Same render() idea
• All have resize() method
• Common event workflow

7. Size and Speed
• 24Kb (minified and gzipped)
• Core (layout, grid, tree, toolbar, tabs,
popup, utils)
• Fast with jQuery DOM manipulations
• Size Compared

8. Customization
• Structure and Presentation Layer
• CSS Scoping
• Widget CSS
• <style> tag

9. What Do you Love
About jQuery
• Simple Idea - $(‘#id’)
• Complex arguments - $().html(), $
().html(‘set’)
• Chaining
• Uniformity

10. Widget Needs
• Layout • Tabs
• Grid • Popup
• Tree • Toolbar

11. Layout
• Overview
• Comparison to Other plugins
• Basic Function
• Panels

12. Layout Panels

13. Layout Code

14. Grid
• Overview
• Comparison to Other Plugins
• Basic Functions
• Grid Elements
• Client vs Server side

15. The Grid

16. Simple Code

17. Bells and Whistles

18. Toolbar
• Overview
• Toolbar Items
• Reuse in other Widgets
• Comparison

19. Toolbar

20. Tabs

21. Tree

22. Popup

23. Popup Code