Extending Spring MVC with                            Spring Mobile and JavaScript                              Roy Clarkso...
The Changing Face of the Web4
The Changing Face of the Web4
The Changing Face of the Web4
The Changing Face of the Web4
The Changing Face of the Web4
The Changing Face of the Web4
The Changing Face of the Web4
The Changing Face of the Web4
Targeting the Diverse Internet Client        Your applications, anytime, anywhere, on any device             Each platform...
The Solution: Separate Web Sites per Platform     Create a unique (aesthetically and functionally) site for...            ...
Addendum to Previous Solution                         Spring Mobile                    Extension to Spring MVC            ...
Targeting the Right Platform                                   with Spring Mobile© 2012 SpringOne 2GX. All rights reserved...
Spring Mobile• Provides support for developing mobile web applications• Extension to Spring MVC, for server-side support• ...
Features• Device Detection• Site Preference Management• Site Switcher 8
Device Detection• Differentiate requests from various devices• Introspects HTTP requests to determine the device that  ori...
Device Resolver <annotation-driven>     <argument-resolvers>         <beans:bean class="org.springframework.mobile.device ...
Device Injection @Controller public class HomeController {     @RequestMapping("/")     public void home(Device device) { ...
Device Detection Demo12
Site Preference Management• Allows the user to indicate whether he or she prefers the  mobile site or the normal site• Rem...
Site Preference Resolver <annotation-driven> !   <argument-resolvers> !   !   <beans:bean class="org.springframework.mobil...
SitePreference Injection @Controller public class HomeController {     @RequestMapping("/") !   public String home(SitePre...
Site Preference Demo16
Site Switcher• Some applications may wish to host their "mobile site" at a  different domain from their "normal site"• Sit...
“mDot” Site Switcher <interceptors> !     <beans:bean class="org.springframework.mobile.device.switcher         .SiteSwitc...
“dotMobi” Site Switcher <interceptors> !     <beans:bean class="org.springframework.mobile.device.switcher         .SiteSw...
“urlPath” Site Switcher <interceptors> !     <beans:bean class="org.springframework.mobile.device.switcher         .SiteSw...
Site Switcher Demo21
Building Platform-Targeted Sites                          with Lumbar (and Thorax)© 2012 SpringOne 2GX. All rights reserve...
Introducing Thorax                Opinionated Backbone Framework                  Project structure and scaffolding       ...
Introducing Lumbar                    JavaScript Build Tool                Works from a general codebase                  ...
Getting and Installing Thorax and Lumbar                        Prerequisites                        Node and npm         ...
Elements of a Lumbar Build File (lumbar.json)               Application: Defines the root module       Platforms: Target p...
A Peek Inside lumbar.json    {        "application": {           "name": "Application",           "module": "base"        ...
A Peek Inside lumbar.json    {        "application": {...},        "platforms": [ ... ],        "packages": {           "w...
A Peek Inside lumbar.json    { "application": {...}, "platforms": [ ... ], "packages": { ... },      "modules": {         ...
A Peek Inside lumbar.json    {        "application": { ... },        "platforms": [ ... ],        "packages": { ... }     ...
A Peek Inside lumbar.json    {        "application": { ... },        "platforms": [ "android", "iphone", "ipad", "web" ], ...
Building with Lumbar                                    .                                    !""   android                ...
Demo: Thorax Client
Conclusion© 2012 SpringOne 2GX. All rights reserved. Do not distribute without permission.
Summary         The web is consumed by many different kinds of clients       Each client platform has unique capabilities ...
Q&A© 2012 SpringOne 2GX. All rights reserved. Do not distribute without permission.
Upcoming SlideShare
Loading in...5
×

Extending Spring MVC with Spring Mobile and JavaScript

2,899

Published on

Presented at SpringOne 2GX 2012

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,899
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
49
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Extending Spring MVC with Spring Mobile and JavaScript

  1. 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.
  2. 2. The Changing Face of the Web4
  3. 3. The Changing Face of the Web4
  4. 4. The Changing Face of the Web4
  5. 5. The Changing Face of the Web4
  6. 6. The Changing Face of the Web4
  7. 7. The Changing Face of the Web4
  8. 8. The Changing Face of the Web4
  9. 9. The Changing Face of the Web4
  10. 10. Targeting the Diverse Internet Client Your applications, anytime, anywhere, on any device Each platform has different physical capabilities Same application/different experienceExperience customized to suit the capabilities/limits of the target platform4
  11. 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 sites4
  12. 12. Addendum to Previous Solution 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 framework4
  13. 13. Targeting the Right Platform with Spring Mobile© 2012 SpringOne 2GX. All rights reserved. Do not distribute without permission.
  14. 14. Spring Mobile• Provides support for developing mobile web applications• Extension to Spring MVC, for server-side support• Compliments client-side mobile frameworks 7
  15. 15. Features• Device Detection• Site Preference Management• Site Switcher 8
  16. 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
  17. 17. Device Resolver <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. 18. Device Injection @Controller public class HomeController { @RequestMapping("/") public void home(Device device) { if (device.isMobile()) { // Hello mobile user! } else { // Hello desktop user! } } }11
  19. 19. Device Detection Demo12
  20. 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
  21. 21. Site Preference Resolver <annotation-driven> ! <argument-resolvers> ! ! <beans:bean class="org.springframework.mobile.device.site .SitePreferenceWebArgumentResolver" /> ! </argument-resolvers> </annotation-driven>14
  22. 22. SitePreference Injection @Controller public class HomeController { @RequestMapping("/") ! public String home(SitePreference sitePreference, Model model) { ! ! if (sitePreference == SitePreference.MOBILE) { ! ! ! return "home-mobile"; ! ! } else { ! ! ! return "home"; ! ! } ! } }15
  23. 23. Site Preference Demo16
  24. 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
  25. 25. “mDot” Site Switcher <interceptors> ! <beans:bean class="org.springframework.mobile.device.switcher .SiteSwitcherHandlerInterceptor" factory-method="mDot"> <beans:constructor-arg value="testdomain.com" /> </beans:bean> ! ! </interceptors>18
  26. 26. “dotMobi” Site Switcher <interceptors> ! <beans:bean class="org.springframework.mobile.device.switcher .SiteSwitcherHandlerInterceptor" factory-method="dotMobi"> <beans:constructor-arg value="testdomain.com" /> </beans:bean> ! ! </interceptors>19
  27. 27. “urlPath” Site Switcher <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. 28. Site Switcher Demo21
  29. 29. Building Platform-Targeted Sites with Lumbar (and Thorax)© 2012 SpringOne 2GX. All rights reserved. Do not distribute without permission.
  30. 30. Introducing Thorax 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 validationBased on Backbone, Underscore, Zepto, Handlebars, Stylus, and Lumbar4
  31. 31. Introducing Lumbar JavaScript Build Tool Works from a general codebase With a list of platforms Generates modular, platform-specific applications Works best with Backbone/Thorax Pluggable architecture4
  32. 32. Getting and Installing Thorax and Lumbar Prerequisites Node and npm Quick Start* % npm install -g lumbar thorax@1.2.1 % thorax create MyProject % cd MyProject % lumbar build lumbar.json public % npm start * Adapted from Thorax website4
  33. 33. Elements of a Lumbar Build File (lumbar.json) 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)4
  34. 34. A Peek Inside lumbar.json { "application": { "name": "Application", "module": "base" }, "platforms": [ "android", "iphone", "ipad", "web" ], "packages": { ... } "modules": { ... }, "templates": { ... }, "styles": { ... } }4
  35. 35. A Peek Inside lumbar.json { "application": {...}, "platforms": [ ... ], "packages": { "web": { "platforms": [ "web" ], "combine": false }, "native-hello-world": { "platforms": [ "android", "iphone", "ipad" ], "modules": [ "base", "hello_world" ], "combine": true } }, "modules": { ... }, "templates": { ... }, "styles": { ... } }4
  36. 36. A Peek Inside lumbar.json { "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": { ... } }4
  37. 37. A Peek Inside lumbar.json { "application": { ... }, "platforms": [ ... ], "packages": { ... } "modules": { ... }, "templates": { "js/views/hello_world/index.js": [ "templates/hello_world/index.handlebars" ] }, "styles": { ... } }4
  38. 38. A Peek Inside lumbar.json { "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" ] } }4
  39. 39. Building with Lumbar . !"" android #   !"" index.html #   !"" native-hello-world.css #   !"" native-hello-world.js #   $"" native-hello-world@1.5x.css At command-line !"" index.html !"" ipad% lumbar build lumbar.json public #   #   !"" index.html !"" native-hello-world.css #   !"" native-hello-world.js #   $"" native-hello-world@2x.css !"" iphone What you get #   !"" 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.html4
  40. 40. Demo: Thorax Client
  41. 41. Conclusion© 2012 SpringOne 2GX. All rights reserved. Do not distribute without permission.
  42. 42. Summary 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 experienceLumbar can build platform-specific applications from a general codebaseSpring Mobile can detect the platform and direct to a platform-specific site4
  43. 43. Q&A© 2012 SpringOne 2GX. All rights reserved. Do not distribute without permission.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×