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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Destacado

Destacado (10)

Similar a Enhancing Spring MVC Web Applications Progressively with Spring JavaScript

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

Último

Último (20)

Enhancing Spring MVC Web Applications Progressively with Spring JavaScript