During the 2015 IBM Digital Experience, Mark Polly, Perficient Director, Strategic Advisors for Portal, Social, Web Content, demonstrated how you can dart past your competition by getting your digital experience into market faster than ever before.

1. DART PAST YOUR COMPETITION BY GETTING YOUR DIGITAL
EXPERIENCE INTO MARKET FASTER THAN EVER BEFORE
IBM Digital Experience 2015 – Session TECH-B14

2. 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

3. AGENDA
TECH-B14
• Introduction
• Portal Infrastructure
• Simple Portlet Development
• More Complex
Development
– Knockout with REST
– AngularJS with REST
• Q&A
3

4. 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

5. 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. 6
“I NEED TO REDUCE THE
TIME TO STAND UP
APPLICATIONS AND FAST-
PATH PROJECTS”

7. Portal
Infrastructure
Can
infrastructure
keep pace with
our Digital
Transformation?

8. 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
• Install Portal Node 2
• 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. 9
What’s the problem?
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. 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. 12
Pre-built Application Patterns

13. 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
• Install Portal Node 1
• Transfer Portal Database
• Install Portal Node 2
• Cluster Portal
• Install HTTP
• Configure HTTP Plugin
5 days
Days Total5
90 minutes
Purchasing
Admin
Resources

14. 14
Example Portal Install

15. 15
Example Portal Install

16. 16
Example Portal Install

17. 17
Example Portal Install

18. 18
Example Portal Install

19. 19
Example Portal Install

20. 20
Example Portal Install

21. 21
Example Portal Install

22. 22
Example Portal Install

23. 23
Example Portal Install

24. 24
Example Portal Install

25. 25
Example Portal Install

26. 26
Example Portal Install

27. 27
Example Portal Install

28. 28
Example Portal Install

29. 29
Example Portal Install

30. 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. 31
Simple Portlet development
Can development keep pace
with our Digital
Transformation?

32. 32
What’s the problem?
• Even simple portlets can take a “long” time to
develop and deploy into production

33. 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
• Compile and test
1-2 days

34. 34
Portlet Deployment
•Create Page
•Deploy
Portlet
Dev
•Create XML
Access
•Deploy
Portlet
•Run XML
Access
•Test
Int
•Create XML
Access
•Deploy
Portlet
•Run XML
Access
•Test
QA
•Create XML
Access
•Deploy
Portlet
•Run XML
Access
•Test
PROD
1 Day Every Wednesday Schedule 2 weeks
In advance
Next release is
in July
A Long Time!

35. 35

36. 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:

37. Deployment
• WCM Syndication
• Create HTML
Component
• Create Portal
Page
• Add &
Configure Web
Content Viewer
• Test
Authoring
Server
• Syndicate
Content
• Test
Production
1 Day

38. 38
WCM In Action

39. WCM In Action

40. Simple Portlet Development

41. More Complex
development
Agenda:
Can
development
keep pace with
our Digital
Transformation?

42. 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

43.  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

44. 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
• Compile and test
Web Experience Factory
• Create a WEF Project
• Create an HTML page
• Add Web Service Consumer
builder
• Add HTML builder
• Write HTML & Knockout code
• Add css
• Add portlet builder
• Compile and test
1-2 days

45. Portlet Deployment
•Create Page
•Deploy
Portlet
Dev
•Create XML
Access
•Deploy
Portlet
•Run XML
Access
•Test
Int
•Create XML
Access
•Deploy
Portlet
•Run XML
Access
•Test
QA
•Create XML
Access
•Deploy
Portlet
•Run XML
Access
•Test
PROD
1 Day Every Wednesday Schedule 2 weeks
In advance
Next release is
in July
A Long Time!

46. How can we speed this up?
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

47. How can we speed this up?
• Create a Portal Page (creates WCM Site
Area)
• Create new WCM Content
• Insert css
• Write HTML & Knockout code
• Add Web Content Viewer
• Configure to display content
Now that we have some basic
WCM ready, our developer can:

48. Deployment
• WCM Syndication
• Create Portal
Page
• Create Content
Item
• Add &
Configure Web
Content Viewer
• Test
Authoring
Server
• Syndicate
Content
• Test
Production
1 Day

49. WCM In Action – Authoring Template

50. WCM In Action – Presentation Template

51. WCM In Action – Create Content

52. WCM In Action – Create Content

53. WCM In Action – Create Content

54. WCM In Action – Create Content

55. WCM In Action – Preview

56. WCM In Action – Adding to Portal Page

57. WCM In Action – Resulting Page

58. WCM In Action – Setting Theme Policy

59. WCM In Action – Theme Policy

60. WCM In Action – Final Portal Page

61. 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.

62. Simulating JSFiddle.net or IBM Script Portlet

63. Simulating JS Fiddle

64. Simulating JS Fiddle

65. Simulating JS Fiddle

66. Simulating JS Fiddle

67. Simulating JS Fiddle

68. Simulating JS Fiddle

69. Simulating JS Fiddle

70. 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 ✔ ✔

71. 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

72. For Additional Information
 IBM Digital Experience Solutions
http://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 Catalog
https://greenhouse.lotus.com/catalog/
72

73. 73
CONTACT
Mark Polly, Director
Mark.polly@Perficient.com