Your SlideShare is downloading. ×
0
jQuery on Rails (the real ones)
by Jonathan Sharp
The Challenge
• Rapid web based application development

• Support multiple server side technologies

• Easy integration o...
The Scope
• Multiple frameworks: Wicket, Struts, JSF,
  ColdFusion, Servlets

• Developers
      • 450+ developers (primar...
Outline
• Multiple Frameworks

• Rapid Prototyping

• Enterprise Data




The Ajax Experience 2008 - jQuery on Rails (the ...
Audience Survey
• Java

• ColdFusion

• PHP

• Rails

• UI/UX developers

• Others



The Ajax Experience 2008 - jQuery on...
The Approaches
• Server Side
      • Consolidate on a single server side framework
      • XML post processing
      • Cli...
Existing Tools
• Existing Frameworks
      • ExtJS
      • Dojo
      • Prototype/Scriptaculous
      • jQuery
      • Tib...
Tool Evaluation Criteria
• Developer interface API / education

• Legacy application migration

• Performance

• File size...
The Developer Interface
• We put a lot of emphasis on this

• Developer demographics

• Skill sets across the organization...
Jumping In
• We selected jQuery

• Created a developer centric interface

• Just include & use - short learning curve

• C...
The Component
• A component encompasses:
      • XHTML Markup
      • Behavior
      • Enterprise data
• Simple XHTML inte...
Semantic Markup
• Developers insert the following XHTML:
• <div class=”groupbox”>
      <h2>My Groupbox Title</h2>
      <...
Alternate Markup
• Developers insert the following XHTML:
• <div class=”groupbox”
      tae:title=”My Groupbox Title”>
   ...
Rendered Markup
• Component renders:
• <div class=”groupbox”>
     <div><div class=”groupboxTitle”>
         My Groupbox T...
The Architecture
• Versioning

• Build Process

• Publishing Releases

• Technical Considerations

• Development Environme...
Versioning
• <Product Version>.<major>.<minor>
      • Example: 2.1.4, 2.2.4
• Major & Minor Releases
      • Major releas...
URL Versioning
• Minor release
  2.1.5 /product/2.1/product.js

• Major release
  2.2.3 /product/2.2/product.js




The Aj...
Build Process
• Apache Ant build.xml

• JS Lint

• YUI Compressor (JS & CSS)

• PNG Crush




The Ajax Experience 2008 - j...
Technical Considerations
• File size
      • JS pack vs. min
      • Caching
• XHTML Transitional doctype

• Require JavaS...
Development Environment
• Firefox 2+, IE 6+ (& Safari)

• Firebug

• IE & script debugging

• SVN for source versioning

•...
The Component
• Identified by CSS class
      • <div               class=”component”></div>

• Component initializes on pag...
Custom Attributes & Namespace
• Developed using namespaced attributes
      • <div               tae:attr=”value”>

• HTML...
Developer API & Interface
• Basic
      • XHTML Only, no need to write JavaScript
• Advanced
      • Add additional behavi...
Developer API & Interface
      • <div id=”gb”                                   class=”groupbox”>
      • $(‘#gb’)
      ...
Unobtrusive JavaScript
• Behavioral separation
      • <div onclick=”...”></div>
      • <div id=”component”></div>
      ...
The Life of a Page
• HTTP Request is made for page
      • Request /project/2.1/project.css
      • Request /project/2.1/p...
The Event Cycle
• jQuery $(document).ready(callback)
  is executed
      • Trigger user space “beforeready” event
      • ...
Components In Action
• Application Header

• Groupbox

• Tooltip

• Definition

• Validation

• Lookup / Auto Complete



T...
Outline
• Multiple Frameworks

• Rapid Prototyping

• Enterprise Data




The Ajax Experience 2008 - jQuery on Rails (the ...
Prototyping The UI
• Increasing Productivity
      • Workflow
           • Requirements
           • Prototype interface
  ...
Prototyping The UI
• Initial human factors prototype
      • Usability study / customer review
• Handoff to application te...
Outline
• Multiple Frameworks

• Rapid Prototyping

• Enterprise Data




The Ajax Experience 2008 - jQuery on Rails (the ...
Enterprise Data
• UI team develops JSON servlets that talk to
  XMF/ESB web services

• Application teams gain benefits wit...
Data Caching / Offline
• Distribute data to the client

• Take advantage of tools such as Google Gears

• Increases client ...
Performance Tips
• DOM Manipulation
      • Consider DOM DocumentFragment
          http://ejohn.org/blog/dom-documentfrag...
Performance Tips
• Tune jQuery Selectors

• Late event binding

• Use event delegation

• Bind click event using mouseover...
Dynamic Transformations
• On DOM Insert / Update events

• Dynamically initialize components




The Ajax Experience 2008 ...
The UI With Canvas
• Move towards rendering components using
  Canvas

• MooTools - Mocha UI
  http://mochaui.com/demo/


...
Audience Response
• Questions ?




The Ajax Experience 2008 - jQuery on Rails (the real ones)   39
Thank you!                 Links & Additional Resources
                           http://outwestmedia.com/TAE/




Jonath...
Upcoming SlideShare
Loading in...5
×

jQuery On Rails

2,821

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,821
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
43
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "jQuery On Rails"

  1. 1. jQuery on Rails (the real ones) by Jonathan Sharp
  2. 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. 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. 4. Outline • Multiple Frameworks • Rapid Prototyping • Enterprise Data The Ajax Experience 2008 - jQuery on Rails (the real ones) 4
  5. 5. Audience Survey • Java • ColdFusion • PHP • Rails • UI/UX developers • Others The Ajax Experience 2008 - jQuery on Rails (the real ones) 5
  6. 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. 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. 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. 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. 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. 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. 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. 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. 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. 15. The Architecture • Versioning • Build Process • Publishing Releases • Technical Considerations • Development Environment The Ajax Experience 2008 - jQuery on Rails (the real ones) 15
  16. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 29. Outline • Multiple Frameworks • Rapid Prototyping • Enterprise Data The Ajax Experience 2008 - jQuery on Rails (the real ones) 29
  30. 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. 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. 32. Outline • Multiple Frameworks • Rapid Prototyping • Enterprise Data The Ajax Experience 2008 - jQuery on Rails (the real ones) 32
  33. 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. 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. 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. 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. 37. Dynamic Transformations • On DOM Insert / Update events • Dynamically initialize components The Ajax Experience 2008 - jQuery on Rails (the real ones) 37
  38. 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. 39. Audience Response • Questions ? The Ajax Experience 2008 - jQuery on Rails (the real ones) 39
  40. 40. Thank you! Links & Additional Resources http://outwestmedia.com/TAE/ Jonathan Sharp jdsharp@outwestmedia.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×