Download as ZIP, PPTX
![Performance Tips • DOM Manipulation • Consider DOM DocumentFragment http://ejohn.org/blog/dom-documentfragments/ • Cache Node References • Take advantage of the jQuery.data() function to solve expando issues • $(‘#myID’).data(‘rows’, row1,row2,...,n]); The Ajax Experience 2008 - jQuery on Rails (the real ones) 35](https://image.slidesharecdn.com/jqueryonrails-revised-key-091018161411-phpapp02/75/jQuery-On-Rails-35-2048.jpg)
Uploaded byJonathan Sharp
jQuery On Rails
The document discusses using jQuery to create a consistent user experience across multiple server-side frameworks. It describes challenges like supporting different technologies, integrating enterprise data, and providing low-cost upgrades. The solution presented uses jQuery and semantic HTML markup to define reusable UI components. These components can then be rendered and initialized on page load to transform the DOM and add interactivity. The approach aims to improve productivity by enabling rapid prototyping of the UI and easy integration of backend enterprise data services.
jQuery On Rails
- 1. jQuery on Rails(the real ones) by Jonathan Sharp
- 2. The Challenge • Rapidweb based application development • Support multiple server side technologies • Easy integration of enterprise data • Additionally Provide • Consistent user experience across all applications • Migrate existing applications • Low cost upgrades The Ajax Experience 2008 - jQuery on Rails (the real ones) 2
- 3. The Scope • Multipleframeworks: Wicket, Struts, JSF, ColdFusion, Servlets • Developers • 450+ developers (primarily Java) • Basic HTML, CSS & JS • Geographically dispersed • Limited Human Factors resources The Ajax Experience 2008 - jQuery on Rails (the real ones) 3
- 4. Outline • Multiple Frameworks •Rapid Prototyping • Enterprise Data The Ajax Experience 2008 - jQuery on Rails (the real ones) 4
- 5. Audience Survey • Java •ColdFusion • PHP • Rails • UI/UX developers • Others The Ajax Experience 2008 - jQuery on Rails (the real ones) 5
- 6. The Approaches • ServerSide • Consolidate on a single server side framework • XML post processing • Client side library The Ajax Experience 2008 - jQuery on Rails (the real ones) 6
- 7. Existing Tools • ExistingFrameworks • ExtJS • Dojo • Prototype/Scriptaculous • jQuery • Tibco GI • GWT The Ajax Experience 2008 - jQuery on Rails (the real ones) 7
- 8. Tool Evaluation Criteria •Developer interface API / education • Legacy application migration • Performance • File size • Licensing • Browser support The Ajax Experience 2008 - jQuery on Rails (the real ones) 8
- 9. The Developer Interface •We put a lot of emphasis on this • Developer demographics • Skill sets across the organization • Application development workflow • Human Factors • Implementation team The Ajax Experience 2008 - jQuery on Rails (the real ones) 9
- 10. Jumping In • Weselected jQuery • Created a developer centric interface • Just include & use - short learning curve • Component driven The Ajax Experience 2008 - jQuery on Rails (the real ones) 10
- 11. The Component • Acomponent encompasses: • XHTML Markup • Behavior • Enterprise data • Simple XHTML interface • Advanced developer interface The Ajax Experience 2008 - jQuery on Rails (the real ones) 11
- 12. Semantic Markup • Developersinsert the following XHTML: • <div class=”groupbox”> <h2>My Groupbox Title</h2> <!-- Groupbox contents --> </div> The Ajax Experience 2008 - jQuery on Rails (the real ones) 12
- 13. Alternate Markup • Developersinsert the following XHTML: • <div class=”groupbox” tae:title=”My Groupbox Title”> <!-- Groupbox contents --> </div> The Ajax Experience 2008 - jQuery on Rails (the real ones) 13
- 14. Rendered Markup • Componentrenders: • <div class=”groupbox”> <div><div class=”groupboxTitle”> My Groupbox Title </div></div> <div class=”groupboxContent”> <!-- Groupbox contents --> </div> <div>...</div> </div> The Ajax Experience 2008 - jQuery on Rails (the real ones) 14
- 15. The Architecture • Versioning •Build Process • Publishing Releases • Technical Considerations • Development Environment The Ajax Experience 2008 - jQuery on Rails (the real ones) 15
- 16. Versioning • <Product Version>.<major>.<minor> • Example: 2.1.4, 2.2.4 • Major & Minor Releases • Major release requires an application change & may break backwards compatibility, url change • Minor releases are transparent to applications, no url change The Ajax Experience 2008 - jQuery on Rails (the real ones) 16
- 17. URL Versioning • Minorrelease 2.1.5 /product/2.1/product.js • Major release 2.2.3 /product/2.2/product.js The Ajax Experience 2008 - jQuery on Rails (the real ones) 17
- 18. Build Process • ApacheAnt build.xml • JS Lint • YUI Compressor (JS & CSS) • PNG Crush The Ajax Experience 2008 - jQuery on Rails (the real ones) 18
- 19. Technical Considerations • Filesize • JS pack vs. min • Caching • XHTML Transitional doctype • Require JavaScript to be enabled The Ajax Experience 2008 - jQuery on Rails (the real ones) 19
- 20. Development Environment • Firefox2+, IE 6+ (& Safari) • Firebug • IE & script debugging • SVN for source versioning • J2EE servlets for Ajax calls The Ajax Experience 2008 - jQuery on Rails (the real ones) 20
- 21. The Component • Identifiedby CSS class • <div class=”component”></div> • Component initializes on page load • Initialization may also occur by calling Project.init(‘#id’) The Ajax Experience 2008 - jQuery on Rails (the real ones) 21
- 22. Custom Attributes &Namespace • Developed using namespaced attributes • <div tae:attr=”value”> • HTML5 provides “data” attributes • <div data-attr=”value”> The Ajax Experience 2008 - jQuery on Rails (the real ones) 22
- 23. Developer API &Interface • Basic • XHTML Only, no need to write JavaScript • Advanced • Add additional behavior with JavaScript The Ajax Experience 2008 - jQuery on Rails (the real ones) 23
- 24. Developer API &Interface • <div id=”gb” class=”groupbox”> • $(‘#gb’) .bind(‘groupboxExpand’, function() { alert(‘Groupbox expanded!’); }); The Ajax Experience 2008 - jQuery on Rails (the real ones) 24
- 25. Unobtrusive JavaScript • Behavioralseparation • <div onclick=”...”></div> • <div id=”component”></div> • $(‘#component’).bind(‘click’, function() { ... }); • Progressive rendering • <div class=”groupbox”> <h1>Groupbox Title</h1> ... </div> The Ajax Experience 2008 - jQuery on Rails (the real ones) 25
- 26. The Life ofa Page • HTTP Request is made for page • Request /project/2.1/project.css • Request /project/2.1/project.js The Ajax Experience 2008 - jQuery on Rails (the real ones) 26
- 27. The Event Cycle •jQuery $(document).ready(callback) is executed • Trigger user space “beforeready” event • Component initialization • Transform the DOM • Add behaviors • Trigger user space ready event The Ajax Experience 2008 - jQuery on Rails (the real ones) 27
- 28. Components In Action •Application Header • Groupbox • Tooltip • Definition • Validation • Lookup / Auto Complete The Ajax Experience 2008 - jQuery on Rails (the real ones) 28
- 29. Outline • Multiple Frameworks •Rapid Prototyping • Enterprise Data The Ajax Experience 2008 - jQuery on Rails (the real ones) 29
- 30. Prototyping The UI •Increasing Productivity • Workflow • Requirements • Prototype interface • Implementation • Cost of making changes is low • Developers focus on areas of expertise The Ajax Experience 2008 - jQuery on Rails (the real ones) 30
- 31. Prototyping The UI •Initial human factors prototype • Usability study / customer review • Handoff to application team for implementation • Reuse XHTML with Wicket, ColdFusion, etc. The Ajax Experience 2008 - jQuery on Rails (the real ones) 31
- 32. Outline • Multiple Frameworks •Rapid Prototyping • Enterprise Data The Ajax Experience 2008 - jQuery on Rails (the real ones) 32
- 33. Enterprise Data • UIteam develops JSON servlets that talk to XMF/ESB web services • Application teams gain benefits without having to add JAR’s or 3rd party components • Client side becomes point of aggregation The Ajax Experience 2008 - jQuery on Rails (the real ones) 33
- 34. Data Caching /Offline • Distribute data to the client • Take advantage of tools such as Google Gears • Increases client side performance, distribution of load The Ajax Experience 2008 - jQuery on Rails (the real ones) 34
- 35. Performance Tips • DOMManipulation • Consider DOM DocumentFragment http://ejohn.org/blog/dom-documentfragments/ • Cache Node References • Take advantage of the jQuery.data() function to solve expando issues • $(‘#myID’).data(‘rows’, row1,row2,...,n]); The Ajax Experience 2008 - jQuery on Rails (the real ones) 35
- 36. Performance Tips • TunejQuery Selectors • Late event binding • Use event delegation • Bind click event using mouseover event The Ajax Experience 2008 - jQuery on Rails (the real ones) 36
- 37. Dynamic Transformations • OnDOM Insert / Update events • Dynamically initialize components The Ajax Experience 2008 - jQuery on Rails (the real ones) 37
- 38. The UI WithCanvas • Move towards rendering components using Canvas • MooTools - Mocha UI http://mochaui.com/demo/ The Ajax Experience 2008 - jQuery on Rails (the real ones) 38
- 39. Audience Response • Questions? The Ajax Experience 2008 - jQuery on Rails (the real ones) 39
- 40. Thank you! Links & Additional Resources http://outwestmedia.com/TAE/ Jonathan Sharp jdsharp@outwestmedia.com