Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Extending Spring MVC with Spring Mobile and JavaScript

Extending Spring MVC with Spring Mobile and JavaScript

Presented at SpringOne 2GX 2012

Ac4567321a430466f6e34f9ee5b92ccd?s=128

Roy Clarkson

October 16, 2012
Tweet

More Decks by Roy Clarkson

Other Decks in Programming

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