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