jQuery on Rails (the real ones) by Jonathan Sharp The Challenge - - PowerPoint PPT Presentation

▶
jquery on rails the real ones
SMART_READER_LITE
LIVE PREVIEW

jQuery on Rails (the real ones) by Jonathan Sharp The Challenge - - PowerPoint PPT Presentation

Aug 21, 2022 201 likes •611 views

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

slide-1
SLIDE 1

by Jonathan Sharp

jQuery on Rails (the real ones)

slide-2
SLIDE 2

The Ajax Experience 2008 - jQuery on Rails (the real ones)

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

2

slide-3
SLIDE 3

The Ajax Experience 2008 - jQuery on Rails (the real ones)

The Scope

  • Multiple frameworks: Wicket, Struts, JSF,

ColdFusion, Servlets

  • Developers
  • 450+ developers (primarily Java)
  • Basic HTML, CSS & JS
  • Geographically dispersed
  • Limited Human Factors resources

3

slide-4
SLIDE 4

The Ajax Experience 2008 - jQuery on Rails (the real ones)

Outline

  • Multiple Frameworks
  • Rapid Prototyping
  • Enterprise Data

4

slide-5
SLIDE 5

The Ajax Experience 2008 - jQuery on Rails (the real ones)

Audience Survey

  • jQuery Experience?
  • Beginner
  • Intermediate
  • Advanced

5

slide-6
SLIDE 6

The Ajax Experience 2008 - jQuery on Rails (the real ones)

The Approaches

  • Server Side
  • Consolidate on a single server side framework
  • XML post processing
  • Client side library

6

slide-7
SLIDE 7

The Ajax Experience 2008 - jQuery on Rails (the real ones)

Existing Tools

  • Existing Frameworks
  • ExtJS
  • Dojo
  • Prototype/Scriptaculous
  • jQuery
  • Tibco GI
  • GWT

7

slide-8
SLIDE 8

The Ajax Experience 2008 - jQuery on Rails (the real ones)

Tool Evaluation Criteria

  • Developer interface API / education
  • Legacy application migration
  • Performance
  • File size
  • Licensing
  • Browser support

8

slide-9
SLIDE 9

The Ajax Experience 2008 - jQuery on Rails (the real ones)

The Developer Interface

  • We put a lot of emphasis on this
  • Developer demographics / skill sets
  • Application development workflow
  • Human Factors / Usability Studies
  • Implementation team

9

slide-10
SLIDE 10

The Ajax Experience 2008 - jQuery on Rails (the real ones)

Jumping In

  • We selected jQuery
  • Created a developer centric interface
  • Just include & use - short learning curve
  • Component driven

10

slide-11
SLIDE 11

The Ajax Experience 2008 - jQuery on Rails (the real ones)

The Component

  • A component encompasses:
  • XHTML Markup
  • Behavior
  • Enterprise data
  • Simple XHTML interface
  • Advanced developer interface

11

slide-12
SLIDE 12

The Ajax Experience 2008 - jQuery on Rails (the real ones)

Semantic Markup

  • Developers insert the following XHTML:
  • <div class=”groupbox”>

<h2>My Groupbox Title</h2> <!-- Groupbox contents --> </div>

12

slide-13
SLIDE 13

The Ajax Experience 2008 - jQuery on Rails (the real ones)

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>

13

slide-14
SLIDE 14

The Ajax Experience 2008 - jQuery on Rails (the real ones)

Alternate Markup Style

  • Developers insert the following XHTML:
  • <div class=”groupbox”

spk:title=”My Groupbox Title”> <!-- Groupbox contents --> </div>

14

slide-15
SLIDE 15

The Ajax Experience 2008 - jQuery on Rails (the real ones)

The Architecture

  • Versioning
  • Build Process
  • Publishing Releases
  • Technical Considerations
  • Development Environment

15

slide-16
SLIDE 16

The Ajax Experience 2008 - jQuery on Rails (the real ones)

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

16

slide-17
SLIDE 17

The Ajax Experience 2008 - jQuery on Rails (the real ones)

URL Versioning

  • Minor release

2.1.5 /product/2.1/product.js 2.1.6 /product/2.1/product.js

  • Major release

2.2.3 /product/2.2/product.js

17

slide-18
SLIDE 18

The Ajax Experience 2008 - jQuery on Rails (the real ones)

Build Process

  • Apache Ant build.xml
  • JS Lint
  • YUI Compressor (JS & CSS)
  • PNG Crush

18

slide-19
SLIDE 19

The Ajax Experience 2008 - jQuery on Rails (the real ones)

Technical Considerations

  • File size / load impact
  • JS pack vs. min
  • Caching
  • XHTML Transitional doctype
  • Require JavaScript to be enabled
  • Browser support: IE6+, FF2+, Safari

19

slide-20
SLIDE 20

The Ajax Experience 2008 - jQuery on Rails (the real ones)

Development Environment

  • Firefox / Firebug
  • IE & script debugging
  • SVN for source versioning
  • J2EE servlets for Ajax calls (WebLogic)

20

slide-21
SLIDE 21

The Ajax Experience 2008 - jQuery on Rails (the real ones)

The Component

  • Identified by CSS class
  • <div class=”component”></div>
  • Component initializes on page load
  • Initialization may also occur by calling

Project.init(‘#id’)

21

slide-22
SLIDE 22

The Ajax Experience 2008 - jQuery on Rails (the real ones)

Custom Attributes & Namespace

  • Developed using namespaced attributes
  • <div spk:attr=”value”>
  • HTML5 provides “data” attributes
  • <div data-attr=”value”>

22

slide-23
SLIDE 23

The Ajax Experience 2008 - jQuery on Rails (the real ones)

Developer API & Interface

  • Basic
  • XHTML Only, no need to write JavaScript
  • Advanced
  • Add additional behavior with JavaScript

23

slide-24
SLIDE 24

The Ajax Experience 2008 - jQuery on Rails (the real ones)

Developer API & Interface

  • <div id=”gb” class=”groupbox”>
  • $(‘#gb’)

.bind(‘groupboxExpand’, function() { alert(‘Groupbox expanded!’); });

24

slide-25
SLIDE 25

The Ajax Experience 2008 - jQuery on Rails (the real ones)

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>

25

slide-26
SLIDE 26

The Ajax Experience 2008 - jQuery on Rails (the real ones)

The Life of a Page

  • HTTP Request is made for page
  • Page requests /spike/2.1/spike.css
  • Page requests /spike/2.1/spike.js

26

slide-27
SLIDE 27

The Ajax Experience 2008 - jQuery on Rails (the real ones)

The Event Cycle

  • jQuery $(document).ready(callback)

is executed

  • Trigger user space “before” ready event
  • Component initialization
  • Transform the DOM
  • Add behaviors
  • Trigger user space ready event

27

slide-28
SLIDE 28

The Ajax Experience 2008 - jQuery on Rails (the real ones)

Components In Action

  • Application Template
  • Groupbox
  • Tooltip

28

slide-29
SLIDE 29

The Ajax Experience 2008 - jQuery on Rails (the real ones)

Outline

  • Multiple Frameworks
  • Rapid Prototyping
  • Enterprise Data

29

slide-30
SLIDE 30

The Ajax Experience 2008 - jQuery on Rails (the real ones)

Prototyping The UI

  • Increasing Productivity
  • Workflow
  • Requirements
  • Prototype interface
  • Implementation
  • Cost of making changes is low
  • Developers focus on areas of expertise

30

slide-31
SLIDE 31

The Ajax Experience 2008 - jQuery on Rails (the real ones)

Prototyping The UI

  • Initial Human Factors prototype
  • Usability study / customer review
  • Handoff to application team for

implementation

  • Reuse XHTML with Wicket, ColdFusion, etc.

31

slide-32
SLIDE 32

The Ajax Experience 2008 - jQuery on Rails (the real ones)

Outline

  • Multiple Frameworks
  • Rapid Prototyping
  • Enterprise Data

32

slide-33
SLIDE 33

The Ajax Experience 2008 - jQuery on Rails (the real ones)

Enterprise Data

  • UI team develops JSON servlets that talk to

XMF/ESB web services (SOA architecture)

  • Application teams gain benefits without

having to add JAR’s or 3rd party components

  • Client side becomes point of aggregation

33

slide-34
SLIDE 34

The Ajax Experience 2008 - jQuery on Rails (the real ones)

Data Caching / Offline

  • Distribute data to the client
  • Take advantage of tools such as Google Gears

for client side caching

  • Increases client side performance, distribution
  • f load

34

slide-35
SLIDE 35

The Ajax Experience 2008 - jQuery on Rails (the real ones)

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]);

35

slide-36
SLIDE 36

The Ajax Experience 2008 - jQuery on Rails (the real ones)

Performance Tips

  • Tune jQuery Selectors
  • Late event binding
  • Bind click event using mouseover event
  • Use event delegation

36

slide-37
SLIDE 37

The Ajax Experience 2008 - jQuery on Rails (the real ones)

Dynamic Transformations

  • On DOM Insert / Update events
  • Dynamically initialize components

37

slide-38
SLIDE 38

The Ajax Experience 2008 - jQuery on Rails (the real ones)

The UI With Canvas

  • Move towards rendering components using

Canvas

  • MooTools - Mocha UI

http://mochaui.com/demo/

38

slide-39
SLIDE 39

The Ajax Experience 2008 - jQuery on Rails (the real ones)

Audience Response

  • Questions ?

39

slide-40
SLIDE 40

Thank you!

Links & Additional Resources

http://outwestmedia.com/TAE/

Jonathan Sharp

jdsharp@outwestmedia.com