jQuery On Rails

  • 2,728 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,728
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
38
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. jQuery on Rails (the real ones) by Jonathan Sharp
  • 2. The Challenge • Rapid web 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 • Multiple frameworks: 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 • Server Side • 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 • Existing Frameworks • 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 • We selected 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 • A component 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 • Developers insert 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 • Developers insert 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 • Component renders: • <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 • Minor release 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 • Apache Ant build.xml • JS Lint • YUI Compressor (JS & CSS) • PNG Crush The Ajax Experience 2008 - jQuery on Rails (the real ones) 18
  • 19. Technical Considerations • File size • 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 • Firefox 2+, 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 • Identified by 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 • Behavioral separation • <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 of a 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 • UI team 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 • 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
  • 36. Performance Tips • Tune jQuery 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 • On DOM Insert / Update events • Dynamically initialize components The Ajax Experience 2008 - jQuery on Rails (the real ones) 37
  • 38. The UI With Canvas • 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