Enhancing Spring MVC Web Applications Progressively with Spring JavaScript

Enhancing Spring MVC
Web Applications with
Spring JavaScript
Jeremy Grelle - SpringSource

Slide Title

In this session, you will learn how Spring JavaScript
makes it simple to integrate rich Ajax toolkits such
as Dojo into a Spring Web application to create
compelling user interfaces.

SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.

Introduction

• Who am I???
– Jeremy Grelle
• Senior Software Engineer, SpringSource
• Member of Spring Web Products team in San
Francisco, CA
• Lead of Spring Faces, Spring JavaScript, Spring
BlazeDS Integration
• JSF 2.0 EG member.
• SpringSource's resident Ajax ninja.
• Rock Star / Geek

3

Topics in this session

• Overview of Ajax
• Introduction to Spring JS
• Spring JS Building Blocks
• Spring JS Advanced Solutions
• Spring JS + RESTful MVC

4

What is Ajax?

• An ever-evolving definition

• Philosophy of User Experience

• Search for the right balance between client and
server

• AJAX != Ajax

5

The Building Blocks of Ajax

• Document Object Model (DOM)
– tree HTML representation
– easy to target parts of dynamic web page
– e.g. 'disable all fields within a div'
• Cascading Stylesheets (CSS)
– separates content (HTML) from style
– CSS selectors apply style across DOM elements
• XMLHttpRequest
– JavaScript API for asynchronous requests
• JavaScript Object Notation (JSON)

6

Different Ajax Approaches

• JavaScript toolkit
– Dojo, YUI, jQuery
• JavaScript wrapped
– in JSF components (ICEfaces, RichFaces)
– in JSP custom tags (AjaxTags)
• JavaScript generated
– GWT
• JavaScript RPC-style invocations
– DWR, JSON-RPC
• RIA - Not necessarily based on JavaScript

7

Different Kinds of Frameworks

• Lightweight libraries
– jQuery, Prototype, Scriptaculous

• Full solution frameworks
– Dojo, YUI, Ext, GWT

8

Different Application Types

• Applications based on browsing model
– document-like, bookmarks, back button, refresh
– example: infoq.com

• Very rich applications in a browser
– desktop style, window panes, menus
– example: Google Maps, Bespin

• Many applications somewhere in between
– finding the right balance is important

9

The User Experience

• Ajax can do pretty “cool” things
– it's easy to be awed at first BUT...
– harder to predict the overall experience
• Consider the following “disruptive” effects
– back/forward button
– bookmarking
– JavaScript turned off
– support for accessibility features
• It's necessary to be pragmatic in using Ajax
techniques
– find the right blend of document-based vs. rich client

10

Ajax and Server-Side
Frameworks
• Ajax agnostic to server-side framework
– plain HTTP request

• The response is the contract
– HTML (partial DOM update), JSON, XML, ...

• Full HTML still required even for RIA
– login page, help pages, ...

11

Spring MVC with Ajax

• A swiss army knife for Web developers
– very flexible, pluggable

• Well-suited to handle Ajax requests
– supports many rendering technologies
– easy to expose HTTP endpoints
– RESTful architecture is an ideal Ajax back-end

• Versatility truly matters here!

12



13

Spring JavaScript Overview

• JavaScript abstraction framework
– builds on existing toolkits
– introduced as a SWF 2 module, moving to top-level
project for 2010

• Public API with implementations
– currently Dojo
– others possible (jQuery next)

• A pragmatic approach
– baked-in performance (Yahoo guidelines)
– progressive enhancement

14

Progressive Enhancement
(client side)

• Add Ajax behavior unobtrusively
– avoid proliferation of JavaScript

• Manipulate DOM nodes
– “enhance” plain HTML elements

• Page functions with or without JavaScript

15

Progressive Enhancement
(server side)

• Avoid separate controllers for Ajax
– use same request handling methods

• Render a page partially
– composition-based template approach

• Alternate response types
– HTML, JSON, XML, ...

16

The Parts of Spring JS

• JavaScript libraries
– public API + implementations
• Bundled (optimized) toolkits
– currently Dojo 1.2
• “Starter” CSS framework
– Mike Stenhouse's CSS framework
• ResourceServlet
– efficient rendering of static resources in a war or
a jar
• Spring MVC infrastructure for Ajax
– AjaxUrlBasedViewResolver, AjaxTilesView, ...

17

The ResourceServlet

• Generic servlet to serve static resources
– .js, .css, .jpeg, .gif, etc.

• Locates resources given the path info
– first under the Web application root
– the classpath as a fall back

• Writes the resource to the HTTP response
– gzip compression
– set response headers: last modified, content
type, ...

18

Serving Spring JS Files

• Spring JS distributed as a jar
– bundles JavaScript, CSS, and other resources
• Serve them with the ResourceServlet
• Possible to override bundled resources
– include your own in the webapp root
<servlet>
<servlet-name>Resources Servlet</servlet-name>
<servlet-class>org.springframework.js.resource.ResourceServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Resources Servlet</servlet-name>
<url-pattern>/resources/*</url-pattern>
</servlet-mapping>

19

Spring JS Resources

• Underlying library
– /resources/dojo/dojo.js

• Public API
– /resources/spring/Spring.js

• Toolkit-specific implementation
– /resources/spring/Spring-Dojo.js

• Additional underlying library resources
– /resources/dijit/themes/tundra/tundra.css

20

Including Spring JS On a Page

• Include required files
<link type="text/css" rel="stylesheet"
href="<c:url value="/resources/dijit/themes/tundra/tundra.css" />" />

<script type="text/javascript"
src ="<c:url value="/resources/dojo/dojo.js" />"><script/>
src ="<c:url value="/resources/spring/Spring.js" />"><script/>
src ="<c:url value="/resources/spring/Spring-Dojo.js" />"><script/>

• Add Dojo “tundra” style to body tag
<body class="tundra" > ...

21



22

Enhancing a DOM Node

• DOM nodes can be manipulated
– decorate with new look and/or behavior
– via JS and CSS

• A common technique for “enhancing” plain HTML
– separates static from dynamic parts
– easier to understand & maintain

• Supported by underlying toolkit
– e.g. turn HTML form fields to rich widgets

23

Spring JS Decorations

• Mechanism for DOM node enhancements
– abstracts underlying toolkit

• A function for applying decorations
– Spring.addDecoration(/*Object*/decoration)

• Several available decorations
– Element decoration
– Ajax event decoration
– Validate All decoration

24

Fragment Rendering

• An Ajax call refreshes parts of a page
– response must contain a “fragment”
– not HTML for entire page

• Yet controllers should not be aware of Ajax
– easier to maintain that way

• Spring JS provides special Spring MVC view
– renders a fragment of the response only
– works transparently

25

The “Fragments” Parameter

• Ajax event decoration submits special parameter
– a hint for what HTML to be rendered

• Server notices special parameter
– renders only specified fragment

• Composition-based view technology is required
– currently JSP/Tiles supported only
– fragment names match to a Tiles attribute

26

Built-In Response Handling
Types
• Refresh portions of the page
– grab top-level DOM nodes
– replace equivalent nodes on existing page

• Present Ajax popup
– a modal dialog with the returned HTML
– enable via AjaxEventDecoration “popup” attribute

• Client side redirect
– detects server response requesting client-side
redirect
– requires AjaxUrlBasedViewResolver

27

Demo
Spring JS Building Blocks




29

Common Questions

• The fundamental pieces of Spring JS seem nice,
but how do I...

– perform custom response handling?

– make my code more terse?

– keep things DRY?

– organize and modularize my growing amount of
JavaScript code?

30

Demo
Spring JS Advanced Solutions




32

The Evolving Web Platform

• Capable browsers with advanced JavaScript VM’s
are becoming more commonplace
– Safari, Firefox, and Chrome
– Webkit-based mobile browsers

• As the platform evolves, boundaries can be pushed
further on the client
– see Canvas, SVG, Video in HTML 5

• RESTful services provide the perfect compliment
on the server-side
– JSON representations easy to consume

33

JSON support in Spring 3.0

• MappingJacksonJsonView
– renders the model as JSON
– customizable via annotations
– high-performance

• MappingJacksonHttpMessageConverter
– easy binding from a JSON payload

34

Demo
Consuming RESTful Services


Summary

• Spring MVC very useful for Ajax
– a swiss-army knife

• Spring JS provides simple abstraction
– builds on existing Ajax toolkits
– provides both client and server side components

• Many common enterprise scenarios made easy
– rich forms
– partial page updates
– Ajax popups
– JSON

36

Q&A


Enhancing Spring MVC Web Applications Progressively with Spring JavaScript

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (10)

Similar to Enhancing Spring MVC Web Applications Progressively with Spring JavaScript

Similar to Enhancing Spring MVC Web Applications Progressively with Spring JavaScript (20)

Recently uploaded

Recently uploaded (20)

Enhancing Spring MVC Web Applications Progressively with Spring JavaScript