Value Lab is an IT consulting company that delivers geospatial and location analytics solutions to customers. They were asked to provide these solutions to tablets and smartphones. Their solution uses a combination of technologies including ASP.NET MVC, WCF REST services, jQuery, jQuery Mobile, Knockout JS, and the ArcGIS JavaScript API. This allows them to deliver self-adaptive, geospatial web applications with a single codebase that detects the user's device and serves the appropriate mobile or desktop view.

1. Self-Adaptive Geospatial Web
Applications with HTML5
Roberto Messora
roberto.messora@valuelab.it
@robymes
www.valuelab.it

2. • Value Lab: who we are and what we do
• The story: what our customers ask for
• The solution: technology stack
• The solution: implementation strategy
Agenda
2

3. • Value Lab is a management consulting and IT
solutions company specialized in Marketing, Sales
and Retailing
• Our goal is to help manufactures, retailers and service
companies to improve their commercial performance
and strengthen their competitive
positioning, supporting their stratiegic decisions and
operational management
• Founded in 1990 we have two offices in Milan and
Rome and we operate in Italy and abroad
Who we are
3

4. • As IT system integrator and italian ESRI
Business Partner company we use and
customize a wide range of software
solutions including ESRI ArcGIS platform
• We deliver Location Analytics and
Geomarketing solutions to our
customers, based on our geographical
data at census and street number level
Who we are
4

5. • Value Lab: who we are and what we do
• The story: what our customers ask for
• The solution: technology stack
• The solution: implementation strategy
Agenda
5

6. We know our end user scenario is very
particular:
• End user is usually a business analyst, he's not
a classical GIS user
• They usually are not particularly interested in
technology, but they ask for usability and high
customizations
• They started to ask location analysis delivered
to tablets and sometimes to smartphones
The Story: A Specific Scenario
6

7. • Value Lab: who we are and what we do
• The story: what our customers ask for
• The solution: technological stack
• The solution: implementation strategy
Agenda
7

8. Key technologies:
• Microsoft ASP.NET MVC 4
• Microsoft WCF REST Services
• Combres
• ArcGIS Javascript API
• jQuery / jQuery Mobile
• Knockout JS
The Solution: Technological Stack
8

9. • ASP.NET MVC 4.0 introduces a new
important capability: automatic user
agent detection
• We can laverage the same infrastructure
to address desktop and mobile UI simply
taking into account a formal convention:
simply add a specific View for mobile
devices
Server-Side: ASP.NET MVC 4.0
9

10. • We decided to expose application
services in the same way ArcGIS Server
does: HTTP REST services
• Client-Side we can use the same
paradigm to access both ArcGIS services
and application services
• We decided to use Microsoft WCF REST
Services because of its integration with
ASP.NET and JSON compatibility
Server-Side: WCF REST Services
10

11. • HTML5 rich internet applications (RIA)
means a large number of CSS and
Javascript files
• Combres streamlines client-side
resources optimization both for desktop
and mobile:
• Runtime minification
• Caching
• Reduced number of client requests
Server-Side: Combres
11

12. We decided to use jQuery as main Javascript
support framework because of:
• Wide adoption and documentation
• Great third parties plug-in availability
• Simplicity
• Customization
• Same technology both for desktop and
mobile
Client-Side: jQuery & jQuery Mobile
12

13. Knockout JS is a complete Model-View-
ViewModel presentation pattern
implementation in Javascript:
• Clean HTML markup
• Clear separation between UI and
business logic
• Simple and powerful databinding
mechanism
Client-Side: Knockout JS
13

14. • Value Lab: who we are and what we do
• The story: what our customers ask for
• The solution: technology stack
• The solution: implementation strategy
Agenda
14

15. • Knockout JS is built as a “pure” UI
presentation pattern: it doesn’t matter if
desktop or mobile, it works the same
way with jQuery or jQuery Mobile
• Knockout JS allow us to deliver optimized
UIs using the same business logic with
desktop and mobile
Knockout JS + jQuery Mobile
15

16. Thank you
Roberto Messora
roberto.messora@valuelab.it
@robymes
www.valuelab.it