Post on 10-May-2018
© Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
Your customer engagement transformation starts here
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
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)
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.4Engage 2014
Agenda• LiveSite Runtime Architecture Overview
• Features and Client Side Integration• Optimized One Web
• Adaptive vs. Responsive vs. RESS• JavaScript Frameworks• Reference Architectures
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
Goals
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.6Engage 2014
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”?
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
LiveSite Runtime Architecture Overview
Features and Client Side Integration
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.8Engage 2014
The New World of Marketing
New Destinations New Business Models New Marketing Problems
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.9Engage 2014
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
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.10Engage 2014
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
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.11Engage 2014
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
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.12Engage 2014
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
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.13Engage 2014
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
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
Optimized One Web
Responsive vs. Adaptive vs. RESS
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.15Engage 2014
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)
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.16Engage 2014
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
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.17Engage 2014
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
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.18Engage 2014
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; }
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
JavaScript Frameworks
MVC vs. MVP vs. MVVM vs. MVW
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.20Engage 2014
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
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.21Engage 2014
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
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.22Engage 2014
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
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.23Engage 2014
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
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
Reference Architectures
AngularJS and BackboneJS
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.25Engage 2014
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.
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.26Engage 2014
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
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.27Engage 2014
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.
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.28Engage 2014
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
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.29Engage 2014
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
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
HP Professional Services
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.31Engage 2014
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
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.32Engage 2014
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
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.33Engage 2014
Questions?
?Contact
PromoteServices@hp.com
© Copyright 2014 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.34Engage 2014
Contact
Reach out to your Professional Services Experts with any questions:
Pratik Parikh
parikh@hp.com
Akshat Pramod
akshat.pramod@hp.com
ContactPromoteServices@hp.com
© Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
THANK YOU
© Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.