Your customer engagement transformation starts here

Transcription

1 Your customer engagement transformation starts here Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

2 Using JavaScript frameworks with HP LiveSite Pratik Parikh & Akshat Pramod September 23rd, 2014

3 Introduction Parikh, Pratik Lead, Professional Services R&D Solutions Pramod, Akshat Lead, Solutions (Professional Services) 3

4 Agenda LiveSite Runtime Architecture Overview Features and Client Side Integration Optimized One Web Adaptive vs. Responsive vs. RESS JavaScript Frameworks Reference Architectures 4

5 Goals

6 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? 6

7 LiveSite Runtime Architecture Overview Features and Client Side Integration

8 The New World of Marketing New Destinations New Business Models New Marketing Problems 8

9 LiveSite Creates Engaging Experiences Flexible and Robust Rendering Engine Globalization Vanity URL Localization Targeting (Rule Based, Geo Location, Machine Learning Integration) Mobile Optimized Delivery 9 Social and Campaign Management

10 LiveSite Display Services Dynamic display of targeted content and websites Public sites Partner portal 3 rd part sites Syndication 10 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 File System LiveSite Display Services Widget LiveSite Content services LiveSite Content services API OpenDeploy/DataDeploy FormsPublisher TeamSite SitePublisher <RSS/>

11 LiveSite Content Services Simplifying Runtime Content Delivery Designed for TeamSite No SQL design required Automatically adapts to updates Public sites File System Partner portal LiveSite Display Services 3 rd part sites Widget LiveSite Content services API Syndication <RSS/> 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 LiveSite Content services OpenDeploy/DataDeploy FormsPublisher TeamSite SitePublisher 11

12 LiveSite Content Services 12 Targeting Rule Preview Start.page Targeting enabled Component Rule: If the referrer of the * user contains minivans then add Content to the context with Category = Odyssey Minivan Rule Action Rule Condition TeamSite Server Deployment Targeting Rule Rule Action Rule Condition ReferrerURL= google.com?query=minivans Production Start.page Targeting enabled Component Runtime Server IDOL Database Component Renders and LiveSite executes the Rule retrieved from LSCS LSCS Rules Engine OOTB Content Retriever

13 Integrating With LiveSite Integration To External Component External Services Internal Data Sources System Integrations Integration from Client Component LSDS Rendering Architecture LSDS Component Base Architecture Binding JavaScript Framework Service Locator Layer Services SOAP REST XML-RPC Persistence Frameworks JPA ORM NOSQL Messaging Services JMS AMQP Model Data LSDS Rendering Architecture Markup/Templates 13

14 Optimized One Web Responsive vs. Adaptive vs. RESS

15 Optimized One Web Responsive (RWD) 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 15 Adaptive (AWD) 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 Responsive + Server Side (RESS) 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

16 Optimized One Web Components Shopping cart Catalogue Templates/Layouts Payment Custom Component Add Device Tags Multi device Components Shopping cart Catalogue Payment Custom Component Multi-device Templates/Layouts TS Editor TS Preview on a browser TS Editor TS Preview On a multi-device emulator 16

17 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-tgios_or_android; data-tg-ios_and_chrome 17

18 LiveSite Tagging Device Example Rule1 : HTML Attribute Overwriting <Div style= background: green data-tg-phonestyle= 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; } 18

19 JavaScript Frameworks MVC vs. MVP vs. MVVM vs. MVW

20 Model View Controller Request Publish Subscribe *View 1 Controller Operations Model 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 20

21 Model View Presenter *Presenter 1 Got Display Data 1 View 0 0 Model 1 Need 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 21

22 Model View View Model Binding Notify Notify Operations View ModelView Model 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 22

23 Model View Whatever W Use Asynchronous Module Definition (AMD Require.JS) or AngularJS s Modules or Browserify to achieve reuse and modularity o Browserify is modularity o node.js way 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 23 M V

24 Reference Architectures AngularJS and BackboneJS

25 Architecture Supporting Angular.JS Goals 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. 25 Angular.JS resolves HTML Markup templates lookup and bind the content model.

26 LSDS Rendering Engine LiveSite Resource LiveSite SiteMap LiveSite Site Segmentation Aliases Link Links Google.com Yahoo.com ETC. Aliases Content Model By Site LiveSite Pages Components Targeting Rules Content Records Architecture Supporting Anjular.JS Request AngularJS Single Page Application Content Model Call Content Model Scope Binding Response Request Content Model JSON Global Scope Page Scope Layout Area Compone nt Data Compone nt Data Compone nt Data Layout Area 26

27 Architecture Supporting Backbone.JS Goals 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). 27 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.

28 LSDS Rendering Engine LiveSite Resource LiveSite SiteMap LiveSite Site Segmentation Aliases Link Links Google.com Yahoo.com ETC. Aliases Content Model By Site LiveSite Pages Components Targeting Rules Content Records Architecture Supporting Backbone.JS Request BackboneJS Single Page Application Collections JSON Call Content JSON Model Response Request Content Model JSON Binding Framework Layout Area Compone nt Data Compone nt Data Compone nt Data Layout Area 28

29 Things to Think about Goal: 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 29 User Experience/User Interaction Targeting/Segmentation

30 HP Professional Services

31 Our Skill = Your Advantage Expertise that delivers the most comprehensive solutions Experience Differentiated Expertise One HP Scale 15+ years Of HP Autonomy deployments Deep Expertise Across the HP entire Autonomy Portfolio Seamless Connection Across HP Business units 1000s Of Solutions implemented across varied industries 100s Staff members certified (business and technical) Direct Access to HP Autonomy Product Development, Support, and Product Management 31

32 How can this help me? Your go-to Experts for Marketing Optimization Services Faster time to value Reduced risk Direct access to support & roadmaps Reduced support calls Maximize 32 the value of your investment

33 Questions?? Contact 33

34 Contact Reach out to your Professional Services Experts with any questions: Pratik Parikh Akshat Pramod Contact 34

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