Your customer engagement transformation starts here · Vanity URL Localization Targeting (Rule Based, Geo Location, Machine Learning Integration) Mobile Optimized Delivery ... OpenDeploy/DataDeploy

© Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

Your customer engagement transformation starts here


Using JavaScript frameworks with HP LiveSitePratik Parikh & Akshat Pramod

September 23rd, 2014

© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.3Engage 2014

IntroductionParikh, Pratik• Lead, Professional Services R&D Solutions

Pramod, Akshat• Lead, Solutions (Professional Services)


Agenda• LiveSite Runtime Architecture Overview

• Features and Client Side Integration• Optimized One Web

• Adaptive vs. Responsive vs. RESS• JavaScript Frameworks• Reference Architectures


Goals


Goals and Objectives

How to deliver dynamic content over multiple channels?

How to keep pace with increasing focus on Customer Experience?

Prepare for accelerated web volume and velocity

Myriad frameworks, responsive website, integrations, cloud apps etc.

How to reduce dependency on “Custom Solutions”?


LiveSite Runtime Architecture Overview

Features and Client Side Integration


The New World of Marketing

New Destinations New Business Models New Marketing Problems


LiveSite Creates Engaging Experiences

Flexible and Robust Rendering Engine

Globalization

Vanity URL

Localization

Targeting (Rule Based, Geo Location, Machine Learning Integration)

Mobile Optimized Delivery

Social and Email Campaign Management


Dynamic display of targeted content and websites

LiveSite Display Services

• Automatic display of TeamSite components

(site search, promotions, directed

navigation)

• Provides Tag Library access

• Enable integration to custom sites

• Render a page fragment in a JSP

• Hosted within a servlet engine

• Tomcat, WebSphere, WebLogic, Jboss etc.

• Available for both J2EE and .NET platforms

LiveSiteContent services API

Partner portalPublic sites Syndication3rd part sites

LiveSiteFile System

LiveSiteContent services

Widget <RSS/>

FormsPublisher SitePublisher

OpenDeploy/DataDeploy

TeamSite

Display Services


Simplifying Runtime Content Delivery

LiveSite Content Services

Designed for TeamSite• No SQL design required • Automatically adapts to updates

REST-Based Client API• No web services code to manage• Integrates with any UI framework

Preconfigured Deployment• No XML-DB mapping required• Distributed transactional updates

LiveSiteContent services API

Partner portalPublic sites Syndication3rd part sites

LiveSiteDisplay Services

File System

LiveSiteContent services

Widget <RSS/>

FormsPublisher SitePublisher

OpenDeploy/DataDeploy

TeamSite


LiveSite Content Services

Start.page

Targeting Rule

Targeting enabled Component

Preview

TeamSiteServer

Rule: If the referrer of the * user contains minivans then add Content to the context with Category =“Odyssey Minivan”

Rule Action

Rule Condition

Start.page

Targeting Rule

Targeting enabled Component

Production

RuntimeServer

Rule Action

Rule ConditionDatabase

LSCS RulesEngine

OOTB Content Retriever

IDOL

Deployment

Component Renders and LiveSite executes the Rule retrieved from LSCS

ReferrerURL=google.com?query=minivans


Integrating With LiveSite

Integration To External Component

Ext

ern

al S

ervi

ces Services

• SOAP• REST• XML-RPC

Inte

rnal

Dat

a S

ou

rces Persistence Frameworks

• JPA• ORM• NOSQL S

yste

m In

teg

rati

on

s

Messaging Services

• JMS• AMQP

Integration from Client Component

BindingJavaScript

Framework

Model Data Markup/Templates

LSDS Rendering Architecture

Service Locator Layer

LSDS Component Base Architecture

LSDS Rendering Architecture


Optimized One Web

Responsive vs. Adaptive vs. RESS


Optimized One Web

• Server always send same HTML to all devices

• Uses CSS to alter the rendering on the device using media queries

• No request to server is made as everything is done client-side

Responsive (RWD)

Responsive web design with server side components

Fluid grids for layouts

Detects the requesting device server side and delivers features optimized for the user on that device

Responsive + Server Side (RESS)

• Changes to fit a predetermined set of screen and device sizes

• Uses server side components to deliver the HTML with fixed adaptive break points instead of fluid grids

• Site is typically fully designed for the user agent it detects

Adaptive (AWD)


Optimized One Web

Templates/Layouts

Shopping cart Payment

Catalogue Custom

Component

Components

Multi-device Templates/Layouts

Shopping cart Payment

Catalogue Custom

Component

Multi device Components

Add Device Tags

TS Editor TS Preview on a browser

TS Editor TS PreviewOn a multi-device emulator


Optimized One Web

LiveSite Mobile Device Tagging Features

• Device support For Touch and Feature Phone, Tablet, Desktop, Smart TV’s

• OS Support For iOS, Android, Blackberry, Windows, Baba, WebOS, Symbian, ChromeOS

• Browser support For Most Major Browser like Safari, Chrome, Firefox, Skyfire, IE, Opera, Bolt,

Openwave, Obigo, Telca, Netfront, Blazer, Polaris, Dolphin, Ucweb, Silk

• Operator support For equal, greater than, less than, less, greater, not, and, or, range

• Operator Use Examples: data-tg-ios4; data-tg-ios4X; data-tg-ios_ge_5; data-tg-

ios_or_android; data-tg-ios_and_chrome


LiveSite Tagging Device ExampleRule1 : HTML Attribute Overwriting

<Div style=“background: green” data-tg-phone-

style=“background: blue; margin:-2px”/>

Rule2: Hide/Show HTML Blocks

<Div data-tg-tablet=“hide”><Span>This is iPhone</Span></Div>

Rule 3: CSS Attribute Overwriting

MyBlock {

float : right;

-tg-android-float : left; }


JavaScript Frameworks

MVC vs. MVP vs. MVVM vs. MVW


Model View Controller

1Controller

*View ModelOperations

Req

ues

t

Pu

blis

h

Su

bsc

rib

e

• Controller holds application logic and determines application flow

• Controller is the entry point• Single Controller can be used by

multiple views listening to the events, facilitating the communication between Model and View

• Controller responsible for determining which view to display


Model View Presenter

*Presenter1

1View0 0Model1

Need Display Data

Got Display Data

• Presenter has reference to both models and views

• Changes to view or model does not effect Presenter

• View is more loosely coupled to the model. The presenter is responsible for binding the model to the view

• 1:1 relationship of Presenter to Map. Complex views may have multiple presenters


Model View View Model

ModelView

View Model

Bin

din

g

No

tify Op

erat

ion

s

No

tify

• User interacts with the View• Many-to-one relationship

between View and ViewModel• View has a reference to

ViewModel• View Model has no information

about the View• Supports two-way data binding

between View and ViewModel


Model View Whatever

M V

W

• Use Asynchronous Module Definition (AMD – Require.JS) or AngularJS’s Modules or Browserify to achieve reuse and modularity

o Browserify is modularity node.js way

o RequireJS is modularity by configuration

• Keep Views with model data and markup focused

• Keep Model lean and need based• Use the pattern that provides

supportability, readability, consistency and maintainability


Reference Architectures

AngularJS and BackboneJS


Architecture Supporting Angular.JSGoals

LSDS provides content model.

Content model is content derived from multiple data sources in JSON Format.

Content model is JSON and has regional content with layout area.

JSON should be free of HTML markup and CSS.

JSON will have reference to HTML Markup templates in Use.

Angular.JS resolves HTML Markup templates lookup and bind the content model.


Architecture Supporting Anjular.JS

AngularJS Single Page Application

Content Model Call

LSD

S R

en

de

rin

g E

ng

ine

Liv

eS

ite

Re

sou

rce

Content ModelJSON

Liv

eSit

e S

iteM

ap

Liv

eSit

e S

ite

Seg

men

tati

on

Ali

ase

sLi

nk

Con

ten

t M

od

el

By

Sit

e

Liv

eSit

e P

ag

es

Co

mp

on

en

ts

Co

nte

nt

Re

cord

s

Ta

rge

tin

g R

ule

s

Content Model Scope Binding

Global Scope Page Scope

Layout Area

Layout Area

Component

Data

Component

Data

Component

Data

Ali

ase

sLi

nk

s

Go

og

le.c

om

Ya

ho

o.c

om

ET

C…

.

Request

Response

Request


Architecture Supporting Backbone.JSGoals

LSDS provides content model.

Content model is content derived from multiple data sources in JSON Format.

Content model is JSON and has regional content with layout area.

Binding Framework Choice (ReactJS, RivetsJS, cujoJS).

JSON should be free of HTML markup and CSS. JSON will have reference to HTML Markup templates in Use.

Backbone.JS resolves HTML Markup templates lookup and bind the content model using Binding Framework Selected.


Architecture Supporting Backbone.JS

BackboneJS Single Page Application

Collections JSON Call

LSD

S R

en

de

rin

g E

ng

ine

Liv

eS

ite

Res

ou

rce

Content ModelJSON

Liv

eS

ite

Sit

eMa

pLi

veS

ite

Sit

e

Seg

men

tati

on

Ali

ase

sLi

nk

Co

nte

nt

Mo

de

l By

S

ite

Liv

eSit

e P

ag

es

Co

mp

on

en

ts

Co

nte

nt

Re

cord

s

Ta

rge

tin

g R

ule

s

Content JSON Model

Binding Framework

Layout Area

Layout Area

Component

Data

Component

Data

Component

Data

Ali

ase

sLi

nk

s

Go

og

le.c

om

Ya

ho

o.c

om

ET

C…

.

Request

Response

Request


Things to Think aboutGoal: Acquisition, Retention and Return on Investment Measurability

• Search Engine Optimization

• State Less Web Application

• Deep Linking – History Management and Bookmarking

• Data Integrity

• Localization

• Supportability

• End to End Testing

• Easy Content Contribution for Multiple Channels

• Multi Tenant Analytics

• Social Integration

• User Experience/User Interaction

• Targeting/Segmentation


HP Professional Services


Expertise that delivers the most comprehensive solutions

Our Skill = Your Advantage

Experience Differentiated Expertise One HP Scale

1000sOf Solutions implemented

across varied industries

15+ yearsOf HP Autonomy

deployments

100sStaff members certified (business and technical)

Deep Expertise Across the HP entire Autonomy Portfolio

Seamless Connection

Across HP Business units

Direct Access to HP Autonomy Product

Development, Support, and Product Management


How can this help me?

Faster time to value

Direct access to support & roadmaps

Reduced support calls

Maximize the value of your investment

Reduced risk

Your go-to Experts for Marketing Optimization Services


Questions?

?Contact

[email protected]


Contact

Reach out to your Professional Services Experts with any questions:

Pratik Parikh

[email protected]

Akshat Pramod

[email protected]

[email protected]

mailto:[email protected]

mailto:[email protected]


THANK YOU


Documents

Your customer engagement transformation starts here · Vanity URL Localization Targeting (Rule Based, Geo Location, Machine Learning Integration) Mobile Optimized Delivery ... OpenDeploy/DataDeploy