jQuery On Rails
Upcoming SlideShare
Loading in...5
×
 

jQuery On Rails

on

  • 3,753 views

 

Statistics

Views

Total Views
3,753
Views on SlideShare
3,739
Embed Views
14

Actions

Likes
4
Downloads
37
Comments
0

2 Embeds 14

http://www.slideshare.net 11
http://coderwall.com 3

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

jQuery On Rails jQuery On Rails Presentation Transcript

  • jQuery on Rails (the real ones) by Jonathan Sharp
  • 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
  • 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
  • Outline • Multiple Frameworks • Rapid Prototyping • Enterprise Data The Ajax Experience 2008 - jQuery on Rails (the real ones) 4
  • Audience Survey • Java • ColdFusion • PHP • Rails • UI/UX developers • Others The Ajax Experience 2008 - jQuery on Rails (the real ones) 5
  • 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
  • Existing Tools • Existing Frameworks • ExtJS • Dojo • Prototype/Scriptaculous • jQuery • Tibco GI • GWT The Ajax Experience 2008 - jQuery on Rails (the real ones) 7
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • The Architecture • Versioning • Build Process • Publishing Releases • Technical Considerations • Development Environment The Ajax Experience 2008 - jQuery on Rails (the real ones) 15
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • Components In Action • Application Header • Groupbox • Tooltip • Definition • Validation • Lookup / Auto Complete The Ajax Experience 2008 - jQuery on Rails (the real ones) 28
  • Outline • Multiple Frameworks • Rapid Prototyping • Enterprise Data The Ajax Experience 2008 - jQuery on Rails (the real ones) 29
  • 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
  • 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
  • Outline • Multiple Frameworks • Rapid Prototyping • Enterprise Data The Ajax Experience 2008 - jQuery on Rails (the real ones) 32
  • 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
  • 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
  • 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
  • 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
  • Dynamic Transformations • On DOM Insert / Update events • Dynamically initialize components The Ajax Experience 2008 - jQuery on Rails (the real ones) 37
  • 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
  • Audience Response • Questions ? The Ajax Experience 2008 - jQuery on Rails (the real ones) 39
  • Thank you! Links & Additional Resources http://outwestmedia.com/TAE/ Jonathan Sharp jdsharp@outwestmedia.com