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 SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.

Topics in this session • Overview of Ajax • Introduction to Spring JS • Spring JS Building Blocks • Spring JS Advanced Solutions • Spring JS + RESTful MVC 4 SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.

What is Ajax? • An ever-evolving definition • Philosophy of User Experience • Search for the right balance between client and server • AJAX != Ajax 5 SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.

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 SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.

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 SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.

Different Kinds of Frameworks • Lightweight libraries – jQuery, Prototype, Scriptaculous • Full solution frameworks – Dojo, YUI, Ext, GWT 8 SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.

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 SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.

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 SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.

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 SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.

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 SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.

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 SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.

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 SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.

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 SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.

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 SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.

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 SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.

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 SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.

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 SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.

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/> <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/> • Add Dojo “tundra” style to body tag <body class="tundra" > ... 21 SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.

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 SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.

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 SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.

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 SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.

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 SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.

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 SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.

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 SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.

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 SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.

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 SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.

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 SpringOne 2GX 2009. All rights reserved. Do not distribute without permission.

Enhancing Spring MVC Web Applications Progressively with Spring JavaScript

by Jeremy Grelle on Feb 04, 2010

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 25

Statistics

Enhancing Spring MVC Web Applications Progressively with Spring JavaScript Presentation Transcript

http://www.slideshare.net	24
http://www.techgig.com	1