dart past your competition by getting your digital experience into market faster than ever before

DART PAST YOUR COMPETITION BY GETTING YOUR DIGITAL

EXPERIENCE INTO MARKET FASTER THAN EVER BEFOREIBM Digital Experience 2015 – Session TECH-B14

2

Mark Polly, Perficient

Director, Strategic Advisors for Portal, Social, Web Content

• 30+ years of experience as strategist,

technical architect, and developer

• Works on strategy engagements for Portal,

Web Content and Social technologies.

• Holds a Master of Business Administration

from Cleveland State University and

Bachelor of Science in Computer Science

from Purdue University

• Avid Blogger! Join the conversation:

blogs.perficient.com/digitaltransformation

AGENDA TECH-B14

• Introduction

• Portal Infrastructure

• Simple Portlet Development

• More Complex

Development

– Knockout with REST

– AngularJS with REST

• Q&A

3

Perficient (NASDAQ: PRFT) is a

leading information technology and

experience design firm serving

clients throughout North America.

Fast Facts:

• Founded 1997

• $500 MM+ in annualized revenues

• 24 locations in North America

• Offshore in Europe, China and India

• 2600 + employees

• 80% of revenue from recurring clients

• Served 450+ clients in past 12 months

Customer Focus

• Cross Industry: Healthcare, Life

Sciences, Financial Services , Retail,

Energy and Utilities

• Fortune 2000 (Industry and Enterprise)

• On/Off-shore delivery teams

• North America, Europe, India, and China

Solution Focus

• Portal & Collaboration

• Omni-Channel Commerce

• BPM & Integration

• Business Intelligence & Big Data

• Experience Design

• Financial Performance Management

• Enterprise Content Management

6

“I NEED TO REDUCE THE

TIME TO STAND UP

APPLICATIONS AND FAST-

PATH PROJECTS”

Portal Infrastructure

Can

infrastructure

keep pace with

our Digital

Transformation?

What’s the problem?

• Order 5 servers

• Install OS on 5 servers

• Download 6gb+ of files

• Install and Configure DB2

• Install and Configure Deployment Manager

• Install Portal Node 1

• Transfer Portal Database


• Cluster Portal

• Install HTTP

• Configure HTTP Plugin

2 Node Portal Cluster + DB2 + HTTP

5

Days Total

5 1 1 1 .5 .5 .5 .5

15

Purchasing

OS Installers

DB2 Admin

WAS Admin

Portal Admin

WAS Admin

Resources

9


Dev Int QA PROD

5 4 1 1 1 .5 .5 .5 5 1 1 .5 .5 .5 .55 1 1 .5 .5 .5 .55 1 1 .5 .5 .5 .5

A Long Time!

11

IBM PureApplication System

Platform system designed and tuned specifically for transactional web and database applications.

Workload-aware, flexible platform is designed to be easy to deploy, customize, safeguard and manage.

Operates in a traditional or private cloud environment

Pre-built patterns for IBM Digital Experience

12

Pre-built Application Patterns

13

WebSphere Portal on PureApplication Installation

2 Node Portal Cluster + DB2 + HTTP

• Order PureApplication

• Install OS on 5 servers

• Download 6gb+ of files

• Install and Configure DB2

• Install and Configure Deployment Manager


• Transfer Portal Database


• Cluster Portal

• Install HTTP

• Configure HTTP Plugin

5 days

Days Total5

90 minutes

Purchasing

Admin

Resources

14

Example Portal Install

15


16


17


18


19


20


21


22


23


24


25


26


27


28


29


30

Other Portal Infrastructure Options

• Cloud and dedicated hosting for IBM Digital Experience

• Flexible licensing agreements

• Global infrastructure

Blue Iron Network (blueironnetwork.com)

• Hosted by IBM on Softlayer

• Deployed, customized, monitored and managed by IBM

• Uses PureApplication Patterns

• Digital Experience on Cloud is for content sites

• Digital Experience Plus on Cloud is for full integration with Java applications, etc.

IBM Digital Experience on Cloud Family

31

Simple Portlet development

Can development keep pace

with our Digital

Transformation?

32


• Even simple portlets can take a “long” time to

develop and deploy into production

Traditional Portlet Development

Rational Application Developer

• Buy a RAD license

• Download & Install RAD

• Download & Install WebSphere Portal for testing

• Create a new project using Portlet wizard

• Ensure correct libraries are linked

• Select type of portlet

• Create a jsp file in the right directory

• Add script snippet

• Configure portlet.xml correctly

• Compile and test

Web Experience Factory

• Download & Install WEF

• Download & Install WebSphere Portal for testing

• Configure WEF with Portal

• Create a WEF Project

• Add an HTML builder

• Add script snippet

• Add portlet builder


1-2 days

34

Portlet Deployment

• Create Page

• Deploy Portlet

Dev

• Create XML Access

• Deploy Portlet

• Run XML Access

• Test

Int


• Deploy Portlet

• Run XML Access

• Test

QA


• Deploy Portlet

• Run XML Access

• Test

PROD

1 Day Every Wednesday Schedule 2 weeks

In advance

Next release is

in July

A Long Time!

36

How can we speed this up?

Web Content Manager provides HTML Component that renders standard HTML

• Create HTML Component

• Copy Script to component

• Create a Portal Page

• Add Web Content Viewer

• Configure to display HTML Component

Development Steps:

Deployment

• WCM Syndication

• Create HTML Component

• Create Portal Page

• Add & Configure Web Content Viewer

• Test

Authoring Server

• Syndicate Content

• TestProduction

1 Day

38

WCM In Action

WCM In Action

Simple Portlet Development

More Complex development

Agenda:

Can

development

keep pace with

our Digital

Transformation?

Next Challenge

• Display a table of upcoming appointments for the user

• Data is available via REST service

• Data returned in JSON format

• Need custom CSS for the shading and table layout

• Use an industry standard Javascript framework

Free, open source (MIT license)

Pure JavaScript — works with any web framework

Small & lightweight — 54kb minified ... reduces to 20kb when using HTTP compression

No dependencies

Supports all mainstream browsers, even ancient ones IE 6+, Firefox 3.5+, Chrome, Opera, Safari (desktop/mobile)

KNOCKOUT

http://www.opensource.org/licenses/mit-license.php

Traditional Portlet Development

Rational Application Developer

• Create a new project using Portlet wizard

• Ensure correct libraries are linked

• Select type of portlet

• Add .css file

• Create a jsp file in the right directory

• Write HTML & Knockout code

• Configure portlet.xml correctly


Web Experience Factory

• Create a WEF Project

• Create an HTML page

• Add Web Service Consumer builder

• Add HTML builder


• Add css

• Add portlet builder


1-2 days

Portlet Deployment

• Create Page

• Deploy Portlet

Dev


• Deploy Portlet

• Run XML Access

• Test

Int


• Deploy Portlet

• Run XML Access

• Test

QA


• Deploy Portlet

• Run XML Access

• Test

PROD

1 Day Every Wednesday Schedule 2 weeks

In advance

Next release is

in July

A Long Time!


Web Content Manager provides HTML Component that renders standard HTML

• Authoring Template contains HTML Components

• CSS, Javascript, HTML

• Create and assign default Workflow so code is approved before publishing

• Create Presentation Template with HTML Component tags placed correctly

• “Head” and CSS at the top

• HTML in the middle

• Javascript at the end

But we want to implement some controls and best practices for developers


• Create a Portal Page (creates WCM Site Area)

• Create new WCM Content

• Insert css


• Add Web Content Viewer

• Configure to display content

Now that we have some basic WCM ready, our developer can:

Deployment

• WCM Syndication

• Create Portal Page

• Create Content Item

• Add & Configure Web Content Viewer

• Test

Authoring Server

• Syndicate Content

• TestProduction

1 Day

WCM In Action – Authoring Template

WCM In Action – Presentation Template

WCM In Action – Create Content

WCM In Action – Preview

WCM In Action – Adding to Portal Page

WCM In Action – Resulting Page

WCM In Action – Setting Theme Policy

WCM In Action – Theme Policy

WCM In Action – Final Portal Page

What else can you do?

• Include the HTML component in the presentation template so authors don’t have to know that code

Create HTML Components for standard libraries, i.e. Knockout, Ember, etc.

Can use any WCM feature, including plug-ins, property tags, workflow, etc.

Simulating JSFiddle.net or IBM Script Portlet

Simulating JS Fiddle

WCM Development vs IBM Script Portlet

WCM Script Portlet

Run script apps along regular

portlets

✔ ✔

Use Shared WCM Library ✔ ✔

Picker for inserting WCM Tags ✔ ✔

Caching ✔ ✔

Command line support for

creating new portlets

✔

JavaScript helper for portlet

preferences

✔

Supports Built-in WCM

Rendering Portlet

✔

JavaScript Editor ✔

Supports WCM Plug-ins ✔ ✔

Summary

• IBM PureApplication System & IBM WebSphere 8.5 Portal Patterns

• Blue Iron Network

• IBM Digital Experience on Cloud

Lightweight Portal Infrastructure

• Use standard JavaScript Frameworks (Knockout, AngularJS, etc) to reduce the amount of coding

• Use WCM to deploy lightweight portlets

• Authoring, Presentation templates and Workflow make it easy to provide access to good practices

• Syndication will deploy page and code as content

• Web Content Viewer Portlet is already deployed

Lightweight Portlets

IBM Script Portlet

For Additional Information

IBM Digital Experience Solutionshttp://www-01.ibm.com/software/collaboration/digitalexperience

WebSphere Portal and IBM Web Content Manager Information Center Wiki

http://www-10.lotus.com/ldd/portalwiki.nsf/

IBM Digital Experience Demonstrations: http://www.youtube.com/user/IBMXWebX

• IBM Digital Experience Developer

http://developer.ibm.com/digexp

IBM Software Business Solutions Cataloghttps://greenhouse.lotus.com/catalog/

72

73

CONTACT

Mark Polly, Director

[email protected]

mailto:[email protected]

dart past your competition by getting your digital experience into market faster than ever before

Technology

example portal

cluster portal

websphere portal

admin portal admin

ibm digital experience

http plugin

years of experience

experience design firm