Extending Spring MVC with Spring Mobile and JavaScriptRoy Clarkson, Spring Mobile/Android Project Lead

Craig Walls, Spring Social Project LeadTwitter/Github: @royclarkson, @habuma

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

The Changing Face of the Web

4

The Changing Face of the Web

4

The Changing Face of the Web

4

The Changing Face of the Web

4

The Changing Face of the Web

4

The Changing Face of the Web

4

The Changing Face of the Web

4

The Changing Face of the Web

4

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

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 problemCode duplication across platform-specific sites

4

Addendum to Previous Solution

4

Spring MobileExtension 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 platformsAnd collateral specific to certain platforms

Builds site-per-platformThorax: Opinionated Backbone framework

Targeting the Right Platformwith Spring Mobile

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

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

7

Features• Device Detection• Site Preference Management• Site Switcher

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

Device Resolver

10

<annotation-driven>

<argument-resolvers>

<beans:bean class="org.springframework.mobile.device .DeviceWebArgumentResolver" />

</argument-resolvers>

</annotation-driven>

<interceptors>

! <beans:bean class="org.springframework.mobile.device .DeviceResolverHandlerInterceptor" />!</interceptors>

Device Injection

11

@Controllerpublic class HomeController {

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

}

Device Detection Demo

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

Site Preference Resolver

14

<annotation-driven>

! <argument-resolvers>

! ! <beans:bean class="org.springframework.mobile.device.site .SitePreferenceWebArgumentResolver" />

! </argument-resolvers>

</annotation-driven>

SitePreference Injection

15

@Controllerpublic class HomeController {

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

}

Site Preference Demo

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

“mDot” Site Switcher

18

<interceptors>! <beans:bean class="org.springframework.mobile.device.switcher .SiteSwitcherHandlerInterceptor" factory-method="mDot">

<beans:constructor-arg value="testdomain.com" />

</beans:bean>! !</interceptors>

“dotMobi” Site Switcher

19

<interceptors>! <beans:bean class="org.springframework.mobile.device.switcher .SiteSwitcherHandlerInterceptor" factory-method="dotMobi">

<beans:constructor-arg value="testdomain.com" />

</beans:bean>! !</interceptors>

“urlPath” Site Switcher

20

<interceptors>! <beans:bean class="org.springframework.mobile.device.switcher .SiteSwitcherHandlerInterceptor" factory-method="urlPath">

<beans:constructor-arg value="/m" /> <beans:constructor-arg value="/showcase" />

</beans:bean>! !</interceptors>

Site Switcher Demo

21

Building Platform-Targeted Sites with Lumbar (and Thorax)

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

Introducing Thorax

4

Opinionated Backbone FrameworkProject structure and scaffolding

On-demand module loadingModel/collection view binding

Inheritable view and DOM eventsData loading helpers

Form serialization/populationForm validation

Based on Backbone, Underscore, Zepto, Handlebars, Stylus, and Lumbar

Introducing Lumbar

4

JavaScript Build ToolWorks from a general codebase

With a list of platformsGenerates modular, platform-specific applications

Works best with Backbone/ThoraxPluggable architecture

Getting and Installing Thorax and Lumbar

4

PrerequisitesNode and npm

Quick Start*

* Adapted from Thorax website

% npm install -g lumbar thorax@1.2.1% thorax create MyProject% cd MyProject% lumbar build lumbar.json public% npm start

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)

A Peek Inside lumbar.json

4

{ "application": { "name": "Application", "module": "base" }, "platforms": [ "android", "iphone", "ipad", "web" ], "packages": { ... } "modules": { ... }, "templates": { ... }, "styles": { ... }

}

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": { ... }

}

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": { ... } }

A Peek Inside lumbar.json

4

{ "application": { ... }, "platforms": [ ... ], "packages": { ... } "modules": { ... },

"templates": { "js/views/hello_world/index.js": [ "templates/hello_world/index.handlebars" ] }, "styles": { ... }

}

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" ] }}

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#   $"" native-hello-world@1.5x.css!"" index.html!"" ipad#   !"" index.html#   !"" native-hello-world.css#   !"" native-hello-world.js#   $"" native-hello-world@2x.css!"" iphone#   !"" index.html#   !"" native-hello-world.css#   !"" native-hello-world.js#   $"" native-hello-world@2x.css$"" web !"" base.css !"" base.js !"" base@2x.css !"" hello_world.css !"" hello_world.js !"" hello_world@2x.css $"" index.html

Demo: Thorax Client

Conclusion

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

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

Q & A

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