Enhancing Spring MVC Web Applications Progressively with Spring JavaScript

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

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

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.


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

19

<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>


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

• Add Dojo “tundra” style to body tag

21

<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/>

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

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

<body class="tundra" > ...




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


• 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

Summary


Q&A

Enhancing Spring MVC Web Applications Progressively with Spring JavaScript

Technology

Transcript of Enhancing Spring MVC Web Applications Progressively with Spring JavaScript