Extending Spring MVC with Spring Mobile and JavaScript Roy Clarkson, Spring Mobile/Android Project Lead Craig Walls, Spring Social Project Lead Twitter/Github: @royclarkson, @habuma © 2012 SpringOne 2GX. All rights reserved. Do not distribute without permission. 1 

The Changing Face of the Web 4 2 

The Changing Face of the Web 4 2 

The Changing Face of the Web 4 2 

The Changing Face of the Web 4 2 

The Changing Face of the Web 4 2 

The Changing Face of the Web 4 2 

The Changing Face of the Web 4 2 

The Changing Face of the Web 4 2 

Targeting the Diverse Internet Client Your applications, anytime, anywhere, on any device Each platform has different physical capabilities Same application/different experience Experience customized to suit the capabilities/limits of the target platform 4 3 

The Solution: Separate Web Sites per Platform Create a unique (aesthetically and functionally) site for... Desktop browsers Handhelds (iPhone, various Android phones, iPod Touch) Tablets (iPad, various Android tablets) Now you have a new problem Code duplication across platform-specific sites 4 4 

Addendum to Previous Solution 4 Spring Mobile Extension to Spring MVC Directs requests to platform-specific sites Lumbar (and Thorax) From Walmart Labs (yes, that Walmart) Build tool for JavaScript client projects Identify collateral common to all platforms And collateral specific to certain platforms Builds site-per-platform Thorax: Opinionated Backbone framework 5 

Targeting the Right Platform with Spring Mobile © 2012 SpringOne 2GX. All rights reserved. Do not distribute without permission. 6 

Spring Mobile • Provides support for developing mobile web applications • Extension to Spring MVC, for server-side support • Compliments client-side mobile frameworks 7 7 

Features • Device Detection • Site Preference Management • Site Switcher 8 8 

Device Detection • Differentiate requests from various devices • Introspects HTTP requests to determine the device that originated the request • Provides a DeviceResolver abstraction and interceptor • LiteDeviceResolver implementation 9 9 

Device Resolver 10 ! ! 10 

Device Injection 11 @Controller public class HomeController { @RequestMapping("/") public void home(Device device) { if (device.isMobile()) { // Hello mobile user! } else { // Hello desktop user! } } } 11 

Device Detection Demo 12 12 

Site Preference Management • Allows the user to indicate whether he or she prefers the mobile site or the normal site • Remembers the user’s preference for their session • StandardSitePreferenceHandler implementation 13 13 

Site Preference Resolver 14 ! ! ! ! 14 

SitePreference Injection 15 @Controller public class HomeController { @RequestMapping("/") ! public String home(SitePreference sitePreference, Model model) { ! ! if (sitePreference == SitePreference.MOBILE) { ! ! ! return "home-mobile"; ! ! } else { ! ! ! return "home"; ! ! } ! } } 15 

Site Preference Demo 16 16 

Site Switcher • Some applications may wish to host their "mobile site" at a different domain from their "normal site" • SiteSwitcherHandlerInterceptor can be used to redirect mobile users to a dedicated mobile site • Supported SiteSwitchers – mDot – dotMobi – urlPath 17 17 

“mDot” Site Switcher 18 ! ! ! 18 

“dotMobi” Site Switcher 19 ! ! ! 19 

“urlPath” Site Switcher 20 ! ! ! 20 

Site Switcher Demo 21 21 

Building Platform-Targeted Sites with Lumbar (and Thorax) © 2012 SpringOne 2GX. All rights reserved. Do not distribute without permission. 22 

Introducing Thorax 4 Opinionated Backbone Framework Project structure and scaffolding On-demand module loading Model/collection view binding Inheritable view and DOM events Data loading helpers Form serialization/population Form validation Based on Backbone, Underscore, Zepto, Handlebars, Stylus, and Lumbar 23 

Introducing Lumbar 4 JavaScript Build Tool Works from a general codebase With a list of platforms Generates modular, platform-specific applications Works best with Backbone/Thorax Pluggable architecture 24 

Getting and Installing Thorax and Lumbar 4 Prerequisites Node and npm Quick Start* * Adapted from Thorax website % npm install -g lumbar [email protected] % thorax create MyProject % cd MyProject % lumbar build lumbar.json public % npm start 25 

Elements of a Lumbar Build File (lumbar.json) 4 Application: Defines the root module Platforms: Target platforms (e.g., iPhone, Android, etc) Packages: Macro-level definition of what goes into a platform Modules: Logical groupings of code Templates: Client-side templates (e.g. Handlebars) Styles: Stylesheets to be compiled (e.g. Stylus) 26 

A Peek Inside lumbar.json 4 { "application": { "name": "Application", "module": "base" }, "platforms": [ "android", "iphone", "ipad", "web" ], "packages": { ... } "modules": { ... }, "templates": { ... }, "styles": { ... } } 27 

A Peek Inside lumbar.json 4 { "application": {...}, "platforms": [ ... ], "packages": { "web": { "platforms": [ "web" ], "combine": false }, "native-hello-world": { "platforms": [ "android", "iphone", "ipad" ], "modules": [ "base", "hello_world" ], "combine": true } }, "modules": { ... }, "templates": { ... }, "styles": { ... } } 28 

A Peek Inside lumbar.json 4 { "application": {...}, "platforms": [ ... ], "packages": { ... }, "modules": { "base": { "scripts": [ {"src": "js/lib/zepto.js", "global": true}, {"src": "js/lib/underscore.js", "global": true}, ... ], "styles": [ "styles/base.styl", {"src": "styles/iphone.styl", "platform": "iphone"}, ... ], "static": [ {"src": "static/#{platform}/index.html", "dest": "index.html"} ] }, "hello_world" : { ... } }, "templates": { ... }, "styles": { ... } } 29 

A Peek Inside lumbar.json 4 { "application": { ... }, "platforms": [ ... ], "packages": { ... } "modules": { ... }, "templates": { "js/views/hello_world/index.js": [ "templates/hello_world/index.handlebars" ] }, "styles": { ... } } 30 

A Peek Inside lumbar.json 4 { "application": { ... }, "platforms": [ "android", "iphone", "ipad", "web" ], "packages": { ... } "modules": { ... }, "templates": { ... }, "styles": { "pixelDensity": { "android": [ 1, 1.5 ], "iphone": [ 1, 2 ], "ipad" : [ 1, 2 ], "web": [ 1, 2 ] }, "includes": [ "nib", "styles/include/global.styl" ] } } 31 

Building with Lumbar 4 At command-line % lumbar build lumbar.json public What you get . !"" android # !"" index.html # !"" native-hello-world.css # !"" native-hello-world.js # $"" [email protected] !"" index.html !"" ipad # !"" index.html # !"" native-hello-world.css # !"" native-hello-world.js # $"" [email protected] !"" iphone # !"" index.html # !"" native-hello-world.css # !"" native-hello-world.js # $"" [email protected] $"" web !"" base.css !"" base.js !"" [email protected] !"" hello_world.css !"" hello_world.js !"" [email protected] $"" index.html 32 

Demo: Thorax Client 33 

Conclusion © 2012 SpringOne 2GX. All rights reserved. Do not distribute without permission. 34 

Summary 4 The web is consumed by many different kinds of clients Each client platform has unique capabilities and limitations Web applications should target each platform Same application / different experience Lumbar can build platform-specific applications from a general codebase Spring Mobile can detect the platform and direct to a platform-specific site 35 

Q & A © 2012 SpringOne 2GX. All rights reserved. Do not distribute without permission. 36