This document discusses strategies for integrating stateful applications into a stateless content management system (CMS) to support Nu Skin's new website. It describes Nu Skin's business needs for a new CMS, the architecture of the new site, and techniques for delivering dynamic content from stateful systems like SAP into the new stateless CMS. These techniques include using cookies, the DOM, iframes, server-side includes, and Ajax applications to synchronize data between stateful systems and the static pages generated by the new CMS.

1. Day Communiqué 5.2
Stateful Sites in a Stateless World
Oct, 2009

2. History
• Founded in 1984, Nu Skin Enterprises is a direct
selling company based in Provo, UT
– Selling premium quality personal care, nutrition, and
technology products
– Global network of more than 750,000 active independent
distributors and preferred customers.
– 1.3 billion in sales last year
• Nu Skin operates in 48 international markets and 36
languages across the Americas, the Asia Pacific
region and Europe
• More then 70% of Nu Skin revenue is from outside
North America

3. Business Case
• Business Case for a new CMS solution:
– Current platform was a more technical based, IT
centric platform for contribution
– No easy way for less-technical users to contribute
content
• Heavy dependency on Corporate IT
– Performance
– Web property consolidation
• Many different properties, no single global web strategy
• Global web standards, brand standards

4. • US/English Launch on October 22, 2009
– 6 months of development.
– 12 months from RFP to first market launch.
– 1200 Content Pages
– 10 marketing content contributors
• 3 have no web experience whatsoever
– 38 markets scheduled by Q4 2010
• 36 LANGUAGES
• New design
• New CMS
• 48 New content contributors

5. Live Site

6. Previous Architecture

8. New Architecture
AKAMAI (CDN)
APACHE
WEBLOGIC
DAY CQ5
SAP
ORACLE

9. 40,000 Static Servers
Server
Server
Nu Skin
Server
Server

10. How to Deliver new site in 6 Months
• Leverage DAY for content centric pages
• To increase performance convert as many
pages as possible from Stateful to Static
• When state is required for functionality, reuse
existing applications

11. Techniques for integrating stateful apps
into the static CMS
• Using the Cookie
• Using the DOM (HTML Document Object Model)
• Using Iframes
• Using Ajax Applications
• Using Server Side Includes

13. Using the Cookie
• Migrate non secure session variables into the
client cookie.
• Synchronize cookie and server session using
post rendering Ajax calls
• Bind cookie variables directly to html elements
using the BIND API

15. BIND
Cookie:
bind-first_name=Bart
bind-last_name=Strong
bind-number_of_items=1
HTML Elements:
hello, <div class=“bind-first_name”></div>
Your Cart(<div class=“bind-number_of_items”></div>)

17. Using the DOM
• Create HTML with both wholesale and retail
pricing hidden. Using java script and cookie
variables, display only those values appropriate
to the user.
• Only use technique when data is not sensitive.

19. Product Price Example

20. How to handle real time product
information
• Key content not owned by Day but by SAP
– Product pricing
– Product availability
1. SAP posts changes to product information to CQ5
author using existing sling REST services
2. Updated product information kicks off workflow that
activates pages and notifies Akamai

22. Product Content Propagation
PUBLISH
SAP
AUTHOR
AKAMAI

24. Using IFrame
• Pros
– Application Reuse with completely different look
– Simple
– Good use of bandwidth
• Cons
– Security
– Cross Domain
– Frame Resizing
– Session Syncing

28. IFrame component tips
• Iframes work for simple flows
• Define
– Entry Page
– Success Page
– Abort and Error Page
• Securely pass CSS from the design.
• Iframe components means the business can
decide where the flow is used.

29. Iframe Configuration

32. Server Side Includes
• When to Use
– Can’t really touch the Stateful apps HTML
– Statefull app needs access to full HTML
(ie header, body tag, …)
• Pros
– Quick
– Simple
• Cons
– Slows apache rendering
– Problems with last modified date
– Link checker

34. Web 2.0 Ajax Applications
• Thin client Ajax based apps
• Delivered as cacheable Java Script files and/or
Flash files
• Services can be hosted across domains
– (with a little help)
• Complex apps can be encapsulated behind
simple CQ5 components
• Nice separation of content from functionality

36. Web 2.0 (Ajax Applications)
• When to Use
– When possible
– When application functionality is separated from
content but located in a content page.
• Pros
– Mix Stateful and Stateless content into the same
HTML element
– An application can become a component
• Cons
– More Complex
– Security

37. Benefits of Techniques
• Faster pages
• Reduce load on hardware
• Accelerate solution delivery
• Application reuse
• Architecture agnostic

38. THANK YOU