extending spring mvc with spring mobile and javascript
DESCRIPTION
Presented at SpringOne 2GX 2012TRANSCRIPT
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 [email protected]% 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# $"" [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
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.