Dart Past Your Competition by Getting Your Digital Experience into Market Faster Than Ever Before
3 likes554 views
The document discusses the challenges in digital experience development and how IBM's PureApplication System and WebSphere Portal can accelerate application deployment. It emphasizes the need for faster infrastructure and development processes to keep pace with digital transformation, detailing various development methodologies and tools. Additionally, it highlights the integration of standard JavaScript frameworks to streamline portlet creation and deployment within the IBM ecosystem.
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
- 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
- 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
- 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
- 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