Extending Spring MVC with Spring Mobile and JavaScript

Presented at SpringOne 2GX 2012

Transcript

1. 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
2. The Changing Face of the Web 4 2
3. The Changing Face of the Web 4 2
4. The Changing Face of the Web 4 2
5. The Changing Face of the Web 4 2
6. The Changing Face of the Web 4 2
7. The Changing Face of the Web 4 2
8. The Changing Face of the Web 4 2
9. The Changing Face of the Web 4 2
10. 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
11. 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
12. 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
13. Targeting the Right Platform with Spring Mobile © 2012 SpringOne 2GX. All rights reserved. Do not distribute without permission. 6
14. Spring Mobile • Provides support for developing mobile web applications • Extension to Spring MVC, for server-side support • Compliments client-side mobile frameworks 7 7
15. Features • Device Detection • Site Preference Management • Site Switcher 8 8
16. 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
17. 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> 10
18. Device Injection 11 @Controller public class HomeController { @RequestMapping("/") public void home(Device device) { if (device.isMobile()) { // Hello mobile user! } else { // Hello desktop user! } } } 11
19. Device Detection Demo 12 12
20. 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
21. Site Preference Resolver 14 <annotation-driven> ! <argument-resolvers> ! ! <beans:bean class="org.springframework.mobile.device.site .SitePreferenceWebArgumentResolver" /> ! </argument-resolvers> </annotation-driven> 14
22. 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
23. Site Preference Demo 16 16
24. 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
25. “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> 18
26. “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> 19
27. “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> 20
28. Site Switcher Demo 21 21
29. Building Platform-Targeted Sites with Lumbar (and Thorax) © 2012 SpringOne 2GX. All rights reserved. Do not distribute without permission. 22
30. 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
31. 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
32. Getting and Installing Thorax and Lumbar 4 Prerequisites Node 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 25
33. 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
34. A Peek Inside lumbar.json 4 { "application": { "name": "Application", "module": "base" }, "platforms": [ "android", "iphone", "ipad", "web" ], "packages": { ... } "modules": { ... }, "templates": { ... }, "styles": { ... } } 27
35. 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
36. 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
37. A Peek Inside lumbar.json 4 { "application": { ... }, "platforms": [ ... ], "packages": { ... } "modules": { ... }, "templates": { "js/views/hello_world/index.js": [ "templates/hello_world/index.handlebars" ] }, "styles": { ... } } 30
38. 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
39. 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 32
40. Demo: Thorax Client 33
41. Conclusion © 2012 SpringOne 2GX. All rights reserved. Do not distribute without permission. 34
42. 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
43. Q & A © 2012 SpringOne 2GX. All rights reserved. Do not distribute without permission. 36