Using Modern Web Development Tools and Technology with IBM Digital ExperienceJonathan BoothSenior Architect, IBM Digital Experience Tooling

Agenda• The 2016 web development landscape and IBM Digital

Experience• Modern web applications and frameworks with Script Portlet• Application services and the Web 2.0 runtime architecture• Node.js web developer tools and the latest Node-based tools

for IBM Digital Experience• Site design and responsive mobile web with Digital Experience

themes• Content management and modular design with Web Content

Manager (WCM)

2

The 2016 web development landscape• The world of web development and design has been advancing

rapidly in recent months• JavaScript frameworks and libraries are rapidly evolving and

improving§ These provide a rich set of capabilities to let developers focus on

their application functionality• Powerful development, build, and test tools such as Node-

based tools give developers and designers big boosts in productivity

• In the developer marketplace, web development and JavaScript skills are the most prevalent skills today§ There are more new Github repositories for JavaScript than any

other language

The IBM Digital Experience framework in 2016• The IBM Digital Experience framework has shifted over the

past 1-2 years, from a Java developer focus to a web developer focus

• With today’s IBM Digital Experience, developers and designers can work with standard modern web technology:§ HTML, JS, and CSS files§ JS libraries and frameworks (Angular, Bootstrap, Handlebars,

jQuery, etc., etc.)• …and standard modern web development and design tools:

§ Editors, source code management, Node-based build/test tools, automated integration/build systems

• …but all the Java features are still available if/when you want them

IBM Digital Experience – the complete framework for managing all your web sites and content

• Gives you an out-of-the-box framework to deliver and manage all your content and applications

• Lets developers and designers use modern web tools and technology (the focus of this presentation)

• Lets business users and page authors manage and customize all the web site content and pages§ Lets IT focus on other work – performance, back end integration,

etc.• Provides a simple browser UI for working with business

content: authoring, reviewing/previewing, digital asset management, etc.

• Lets you deliver business content to all sites and platforms including mobile apps

What we’ll cover in this presentationWe’ll look at three aspects of your Digital Experience (DX) development:• Applications, with

script applications• Site design, with DX

themes• Content and content

design, with Web Content Manager

Theme

Content

Content Applications

Modern Web Applications and Frameworks with Script Portlet

Using modern script applications with Digital Experience

• Web developers build standard web applications (“Single Page Applications”) that run alongside other content and applications as part of a complete Digital Experience site

• Developers use their favorite frameworks: Angular, Backbone, React, Bootstrap, etc.

• …and their favorite tools: editors, Node-based tools such as Bower, grunt/gulp, LESS/Sass

• Applications are pushed from a developer or build machine to a local or cloud server, stored in WCM

Example application built with Angular framework, integrated into a complete site

Build applications with your preferred tools and frameworks Push to server to

make application available on the site

toolbar

List view

Detail view

Update viewTest/run the

application – all the dynamic views are managed by the

Angular framework

Add application to a site page alongside other

applications and content

The complete Angular interactive application with multiple views runs in this

component area

Examples of JS frameworks used with Script Portlet

Building simple applications with the browser-based editor

Tree view of files and

folders

JavaScript and CSS tabs

Preview window

HTML editing tab

Why web developers like Script Portlet• They can build standard web applications (“Single Page

Applications”) that run alongside other content and applications as part of the complete Digital Experience site

• No Java development or server code deployment is needed• They can use their favorite libraries and frameworks

§ Angular, Bootstrap, Handlebars, Backbone, jQuery…• They can use their favorite modern web development tools

§ Text editors, Node.js tools (Bower, grunt/gulp, Yeoman, etc.), and any other tools for working with HTML/JS/CSS

• Applications can be instantly updated on a local or remote server over HTTP

• Applications can be tested standalone outside of Digital Experience

Application Services and the Web 2.0 Runtime Architecture

Application services and the Web 2.0 runtime architecture

• 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:§ Cloud-based services such as Bluemix services§ IBM CastIron platform or DataPower appliance§ IBM StrongLoop§ IBM Business Process Manager

• External services can go through Portal’s built-in Ajax proxy• The trend for application architecture is to have a four-tier

architecture (see next slide)

Four tier architecture and data services

Client TierDesktop or mobile browser

HTML, JS, CSS

Client-side interaction uses data from JSON/REST services

Delivery TierIBM Digital Experience

Dynamically assembles and delivers complete site to all devices

REST calls from Client Tier can go through Portal’s Ajax Proxy

Business Services TierCastIron, DataPower, StrongLoop

Provides compact services that are suited for use in UI layer, using REST/JSON

Transforms and aggregates services from Back End Services Tier

Back End Services TierExisting cloud or on-premises systems of record, services, or data

External third-party services

Servicecalls

REST/JSON services

REST (JSON or XML) services

Any type of services or remote interfaces – WSDL/SOAP, SQL…

A few service examples with script applications

IBM Business Process Manager Node.js Service on Bluemix IBM Forms Experience Builder

IBM WebSphere Commerce Yahoo Finance Service Flickr Photos

Node.js Web Developer Tools and the Latest Node-Based Tools for IBM Digital Experience

The Node.js ecosystem and web development tools

• Node.js use has taken off in the web development community§ Npm registry has 145,000 packages, 1.2 billion downloads/month

• Node-based tools are widely used by web developers and designers

• Developers can easily download and run these tools on their workstations

• Tools can be customized and combined/chained using JS• Tools are mostly open source and are being rapidly enhanced

and expanded

Node.js tools for web developmentNode-based tools such as these can be used with your IBM Digital Experience applications and designs:• Grunt and Gulp: automate build tasks• Yeoman: generate application project with sensible defaults and best

practices• Bower: package manager for libraries• 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• …and many more

Using the latest Node-based tools with DX

Edit application code

Test locally with Express server

Set up application project using npm, yeoman, and

bower

Run gulp/grunt from command line or from Dashboard UI to build application and push to

server

Application runs on DX site page

Use gulp/grunt script to check code quality, compile to CSS, and optimize

code

Web Developer Toolkit for IBM Digital Experience@ https://github.com/OpenNTF/WebDevToolkitForDx

• Work with script applications, DX themes, and WCM design elements in a simple UI

• Click to push or watch/sync applications and designs to a local or remote server

• Select themes and WCM design libraries and pull from server

• Work with theme modules and profiles

• Run script applications locally on a test server

Script Applications

Themes

WCM Libraries

IBM Digital Experience File Sync (DX Sync)Available @ https://github.com/digexp/dxsync

• A Node.js-based WebDAV client for synchronizing theme design files to a workstation

• Supports watching of files and directories in the background

• Lets you work on a local file system with your favorite editor, automatically synchronizing with a remote server

• This is used under the covers by the theme support of the Web Developer Toolkit

22© 2015 IBM Corporation

Git, SVN, RTC, etc.

Developer or designer workstation

Build or integrationsystem (Jenkins)

Source Code

Repository

Push to server

Push to serverwith automated tools

Developer Test Portal

WCM or WebDAV

Staging/Integration Portal Production Portal

Pull latest

codePush

updates

Pull latest code

Using source code management with Digital Experience applications and designs

• All the HTML/JS/CSS/etc. for Script applications, theme designs, and WCM designs can be maintained in a source code repository

• Command line or GUI tools can push files to a development or staging server

• Script applications and WCM designs can be syndicated from staging to production server

WCM or WebDAV

SyndicationWCM or WebDAV

Site Design and Responsive Mobile Web with Digital Experience Themes

Responsive and adaptive design• Out-of-the-box themes use responsive web design and

adaptive techniques for great appearance on all devices• Layout and navigation are optimized for device size and class• Bootstrap theme is available for download

Theme architecture key principles• Allow complete flexibility for theme implementation, while

providing a prescriptive “best practice” starting point• Support all devices (mobile and desktop) using responsive

web design and adaptive techniques• Use standard HTML/CSS for branding and design, with

“dynamic content spots” for dynamic elements such as navigation§ Any editors and other web development tools can be used

• Provide a module structure for JS/CSS libraries, so you can easily specify which features to include for different pages or site areas

• Build everything for maximum performance: minimize number of requests and download size

New theme development tools• Theme Manager provides easy

1-click create, copy, or export of themes

• Theme Editor provides browser editing of theme files

• IBM Digital Experience File Sync (DX Sync)

• Web Developer Toolkit \provides a GUI for DX Sync

27© 2015 IBM Corporation

New with CF08

New IBM Theme Editor provides browser editing of theme files

Download from catalog

Simple Theme

• Simple Themes provide a great starting point for theme development

• They contain a minimal set of artifacts for an easy starting point and quick learning curve

• Fluid responsive design supports all mobile devices• Themes are easily branded and customized using

CSS/JS/HTML and editable via WebDAV and DX Sync

29

© 2015 IBM Corporation

New with CF08

Content Management and Modular Design with IBM Web Content Manager (WCM)

IBM Web Content Manager

• Allows business users to author, preview/review, and publish content from a simple browser UI

• Enables rapid development of sites through reusable components and templates

• Separates content from design/presentation, allowing web designers to control the display, independently of content

• Delivers your business content dynamically to all your sites and applications including mobile apps – “Content as a Service” (CaaS)

• Provides dynamic content delivery with personalization

IBM Web Content Manager – for sites and applications

Use simple authoring UI in browser

…and to applications

Deliver managed content to sites…

Working with WCM designs using modular design principles

• WCM design elements use standard HTML and CSS, with WCM tags for dynamic content

• WCM Components let designers assemble designs from modular pieces

• This supports best practice “Atomic Design” or “Modular Design” principles, for maximum reuse with minimal duplication

Ato m ic

De s ig n

Reusable design components: Content Template Catalog (CTC) example

Components are classified and organized into folders for maximum reuse

Using the new Web Developer Toolkit with WCM designs

• Designers can work with WCM Components and Presentation Templates as plain HTML files

• HTML, Image, Style Sheet, File, Text, and Rich Text components are supported

• Run from Dashboard UI or from command line• Pull: pulls Components and Presentation Templates from a

WCM library into a local folder• Push: pushes all changed or new files to a server

Working with WCM designs: get design elements as local HTML, CSS, and image files

1 . Clic k Ge t Lib r ar ie s

2 . Se le c t a lib r ar y fr o m

th e se r ve r

3 . Lib r ar y file s ar e d o w n lo ad e d into

fo ld e r s fo r Co m po n e n ts an d

Pr e se n tatio n Te m plate s

4 . Wo r k w ith plain .h tm l

file s, usin g an y e d ito r s o r

o th e r to o ls

Update or create new local files, then push updates to server

5 . Use e d ito r s o r o th e r to o ls to c r e ate /m o d ify

file s

6 . Clic k “ Push Upd ate d ” to push n e w o r m o d ifie d file s

7 . Upd ate s ar e se e n in WCM

auth o r in g an d o n live site

Wrapping Up…

A final summary to leave you withØIBM Digital Experience provides a great framework for

managing and delivering complete web sites that use the latest modern web technology

ØWeb developers and designers can use their favorite modern tools and technology with Digital Experience

ØYou get out-of-the-box support for all the DX value-add features such as content management with WCM, responsive/adaptive design, security, dynamic delivery with personalization, etc.

ØIBM will continue to deliver frequent updates to support modern web development§ Some features will be delivered in a product CF as part of our

“continuous delivery” approach§ Other features such as Node-based tools will be delivered on

GitHub

39

For Additional Information

40

• IBM Digital Experience Developerhttp://developer.ibm.com/digexp

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

Notices and DisclaimersCopyright © 2015 by International Business Machines Corporation (IBM). No part of this document may be reproduced or transmitted in any form without written permission from IBM.

U.S. Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM.

Information in these presentations (including information relating to products that have not yet been announced by IBM) has been reviewed for accuracy as of the date of initial publication and could include unintentional technical or typographical errors. IBM shall have no responsibility to update this information. THIS DOCUMENT IS DISTRIBUTED "AS IS" WITHOUT ANY WARRANTY, EITHER EXPRESS OR IMPLIED. IN NO EVENT SHALL IBM BE LIABLE FOR ANY DAMAGE ARISING FROM THE USE OF THIS INFORMATION, INCLUDING BUT NOT LIMITED TO, LOSS OF DATA, BUSINESS INTERRUPTION, LOSS OF PROFIT OR LOSS OF OPPORTUNITY. IBM products and services are warranted according to the terms and conditions of the agreements under which they are provided.

Any statements regarding IBM's future direction, intent or product plans are subject to change or withdrawal without notice.

Performance data contained herein was generally obtained in a controlled, isolated environments. Customer examples are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual performance, cost, savings or other results in other operating environments may vary.

References in this document to IBM products, programs, or services does not imply that IBM intends to make such products, programs or services available in all countries in which IBM operates or does business.

Workshops, sessions and associated materials may have been prepared by independent session speakers, and do not necessarily reflect the views of IBM. All materials and discussions are provided for informational purposes only, and are neither intended to, nor shall constitute legal or other guidance or advice to any individual participant or their specific situation.

It is the customer’s responsibility to insure its own compliance with legal requirements and to obtain advice of competent legal counsel as to the identification and interpretation of any relevant laws and regulatory requirements that may affect the customer’s business and any actions the customer may need to take to comply with such laws. IBM does not provide legal advice or represent or warrant that its services or products will ensure that the customer is in compliance with any law

Notices and Disclaimers cont.Information concerning non-IBM products was obtained from the suppliers of those products, their published announcements or other publicly available sources. IBM has not tested those products in connection with this publication and cannot confirm the accuracy of performance, compatibility or any other claims related to non-IBM products. Questions on the capabilities of non-IBM products should be addressed to the suppliers of those products. IBM does not warrant the quality of any third-party products, or the ability of any such third-party products to interoperate with IBM’s products. IBM EXPRESSLY DISCLAIMS ALL WARRANTIES, EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.

The provision of the information contained herein is not intended to, and does not, grant any right or license under any IBM patents, copyrights, trademarks or other intellectual property right.

•IBM, the IBM logo, ibm.com, Aspera®, Bluemix, Blueworks Live, CICS, Clearcase, Cognos®, DOORS®, Emptoris®, Enterprise Document Management System™, FASP®, FileNet®, Global Business Services ®, Global Technology Services ®, IBM ExperienceOne™, IBM SmartCloud®, IBM Social Business®, Information on Demand, ILOG, Maximo®, MQIntegrator®, MQSeries®, Netcool®, OMEGAMON, OpenPower, PureAnalytics™, PureApplication®, pureCluster™, PureCoverage®, PureData®, PureExperience®, PureFlex®, pureQuery®, pureScale®, PureSystems®, QRadar®, Rational®, Rhapsody®, Smarter Commerce®, SoDA, SPSS, Sterling Commerce®, StoredIQ, Tealeaf®, Tivoli®, Trusteer®, Unica®, urban{code}®, Watson, WebSphere®, Worklight®, X-Force® and System z® Z/OS, are trademarks of International Business Machines Corporation, registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at: www.ibm.com/legal/copytrade.shtml.

Thank you!