To deliver innovative customer experiences that build loyalty and new business opportunities, organizations are shifting to DevOps and Continuous Delivery practices. These approaches and tools can help teams shorten cycle times, while consistently applying focus on the user experience and delivery quality to increase customer value.
Continuous Delivery practices builds a deployment pipeline that connects from developer machines to test and production servers. Automation is applied at many of the release steps between code development, iterations, testing, approvals and deployment to production. Faster delivery cycles enable teams to incorporate more rapid feedback and learning, leading to (continually) enhanced user experiences. Modern Web Development frameworks and tools can be used, supporting design and developers with varied skill sets, and offer the flexibility to support advances over time.
In this article, Jonathan Booth, IBM Senior Architect, IBM Watson Content Hub and Digital Experience, and Thomas Hurek,, IBM Digital Experience Architect and Watson Content Hub Frontend Squad Lead share perspectives and guidance on Modern Web Development, and Continuous Delivery approaches supporting IBM Digital Experience solutions, including WebSphere Portal, Web Content Manager and Watson Content Hub.
Question 1: The world of web development and design has been advancing rapidly. What are the trends you are seeing from customers and partners developing for IBM Digital Experience solutions?
For designers, the IBM Digital Experience framework has shifted over the past couple of years, from a Java developer focus to a web developer focus. With the latest versions of IBM Digital Experience; this includes Web Content Manager, WebSphere Portal V8.5 and 9, developers and designers can work with standard modern web technology, such as HTML, JS, and CSS files
Designers and developers are updating and modernizing their site themes to enhance the user experience and improve performance. With Digital Experience Versions 8.5 and 9, designers and developers have flexibility in their application of frameworks and approaches when creating solution themes. The platform’s Modular theme provides a flexible framework that lets developers specify capabilities that are needed for a certain scenario, app, on specific pages, and otherwise removing them for an entire site to improve performance. Theme optimization uses modules to define components, and profiles, which are sets of modules which can be assigned per page. WebSphere Portal provides a set of ready-to-use modules, and extensions can be developed and added for use. In addition, the platform’s Simple Themes allow developers to create, copy, and customize themes in minutes with just a few clicks, and are designed to be a starting point for theme development. The Simple Themes support fluid responsive design to support mobile devices, are highly brandable through use of CSS/JS/HTML, and contain minimal artifacts for an easy starting point and quick learning curve. It is simple to integrate third-party frameworks into Digital Experience themes, and in some cases they are already provided, such as JQuery and Bootstrap. For examples, see this article: Leverage Bootstrap within Your Digital Experience. For customers integrating Watson Content Hub assets to their Digital Experience solutions, additional examples are provided on the Watson Customer Engagement developer center to extend the WebSphere Portal themes developed to Watson Content Hub.
Question 2: How are site designers changing the methods they use create and deliver Digital Experience solutions?Â
Designers have a lot of flexibility to design and deliver their interfaces and applications. In addition to portlets, webdock applications, templates, widgets, responsive design and other presentation approaches, Web developers can build standard web applications (â€śSingle Page Applicationsâ€ť) that run alongside other content and applications as part of a complete Digital Experience site. Single Page Applications can provide a rich, more dynamic experience for end users, with an ability to re-render UI elements without requiring a server connection to retrieve HTML. Developers can use their favorite frameworks: Angular, Backbone, React, Bootstrap, etc.â€¦and their favorite tools: editors, Node-based tools such as Bower, grunt/gulp, LESS/Sass and others. Supporting continuous delivery approaches, applications developed can be pushed from a developer or build machine to a local or cloud server, stored in WebSphere Portal and Web Content Manager.
In addition to the IBM Digital Experience V9 and 8.5 Knowledge Center documentation, the IBM Digital Experience technical leads publish development examples, such as how to create a Single Page Application with the Script Application, using Angular and the Angular CLI.
Question 3: What are advantages of the Script Application?
The Script Application is designed for front-end developers to make porting applications, or creating new applications for WebSphere Portal and Web Content Manager easy and fast. WebSphere Portal and Web Content Manager V8.5 and higher releases include the Script Application, where developers can create and edit applications with the Script Application Editor, import items to existing applications, or upload content from a command line. Using the Script Application Editor, designers can take any existing web page, pick out individual parts, and enter them into corresponding tabs in the Script Application Editor. The Preview window displays the results. Developers can also build on their workstations with preferred tools, then use â€śsp pushâ€ť to move the application to the server. This approach is more useful when building simple to complex applications, and when used with source code management.
With â€śsp pushâ€ť the entire application can be instantly updated from a folder on your machine. This process also supports flexible design options, such as the ability to include various application file types; JS, HTML fragments, images, JSON, media, etc. When ‘pushed’ via the command line to the DX server and toolbar, the application files are stored as elements in one WCM content item. Relative links to local files are converted to WCM tags. An example of this process can be viewed in this video: Modern Script Application Development with IBM Digital Experience.
Question 4: How does the Script Application support a ‘Web 2.0’ runtime architecture?
The Digital Experience platform, content artifacts and APIs are designed to support Web 2.0 abilities, with user-generated content, usability, and ease of integration with other web properties. With Script Applications, data access is done using REST services with JSON format data. Any number of tools, frameworks, and services can provide the REST/JSON services, such as IBM Cloud Services (or other Cloud platform services), applications and services such as SAP, Oracle, Watson Content Hub, etc., IBM App Connect Professional platform, IBM DataPower appliance, IBM StrongLoop, Node.js, and more.
A set of examples of how to use the Script Application, with step by step instructions, are available on the IBM Digital Experience Developer site. Some recent articles show how use the Script Application to render Watson Content Hub items in Digital Experience page, using Handlebars templating. Additional Script Application examples of use are available here: https://developer.ibm.com/digexp/docs/docs/script-portlet/
Question 5: What tools are Digital Experience teams using to manage their web development projects?
- Grunt and Gulp: to automate build tasks
- Yeoman to generate application projects with sensible defaults and best practicessystem
- Bower: package manager for librariessystem
- Express: implement a local test server with just a few lines of JS
- LESS and SASS: use CSS preprocessors to compile high-level style files to CSS
- Uglify: minify and combine JS and CSS files
- JSHint: do static analysis of JS code to check for errors/warnings
- Pull all the latest code from source code management
- Do a build with tools such as gulp or grunt to optimize the code
- Run unit tests
- Push all the applications to a staging WebSphere Portal and Web Content Manager platform
We provide examples of how these tools can be applied when building and managing release cycles for WebSphere Portal and Web Content Manager solutions. This example, Sample Node.js Build Tools for Script Portlet shows how to use a gulp or Grunt build script to automate Script Application build process, and promote it to production on the Digital Experience platform.
IBM Digital Experience also provides an open source Web Developer Toolkit that provides a user interface for working with Script Applications, and Web Content Manager (WCM) design elements, and a command line tool for moving WCM design elements – Presentation Templates and Components – between local file systems and WebSphere Portal and WCM Servers.
Question 6: What are other examples of how Digital Experience solution managers can apply continuous delivery practices to their build and release processes?
For example, using the Digital Experience â€śsp pushâ€ť utility, developers and release managers can automatically populate a local or remote Web Content Manager library with applications from a file system. As outlined, developers can keep all their Script Application code in a source code management system and automatically push the latest code into WCM. With tools such as gulp or grunt you can optimize and unit test your applications before pushing to the server. An automation server such as Jenkins , or Urban Code Deploy can:
These practices can be used to support a Continuous Integration / Continuous Delivery process. For moving applications between Digital Experience servers (such as from staging to production), the Web Content Manager syndication feature can be used:
Question 7: How are Digital Experience teams changing their development, test and staging to production collaboration to support more frequent release cycles?
We’re seeing greater use of Agile development practices, including sprint cycles, defining objectives more closely aligned to business objectives, organizing to sprint teams, setting acceptance criteria, and intervals to complete, track issues, review and release the work. Increased, iterative, “lower risk” deliveries help teams, and project sprint sub-teams collaborate, evaluate feedback, coordinate updates and new features and approaches that meet digital experience platform business and release quality goals.
Join these IBM Digital Experience leaders for a Question and Answer webinar Modern Web Development and Continuous Delivery with IBM Digital Experience solutions Q&A on Thursday August 2 at 1:00 . Register: here