Using Modern Web Development Tools and Technology with IBM Digital Experience

Using Modern Web Development Tools and
Technology with IBM Digital Experience
Jonathan Booth
Senior 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 Nodebased 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 presentation
We’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
Add application to a site
page alongside other
applications and content
Push to server to
make application
available on the site
toolbar
List view
Detail view
Test/run the
application – all the
dynamic views are
managed by the
Angular framework
Update view
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
JavaScript and CSS
tabs
Tree view
of files and
folders
HTML editing
tab
Preview
window
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
Service
calls
Client Tier
Desktop or mobile
browser
HTML, JS, CSS
Client-side interaction uses data from
JSON/REST services
REST/JSON services
Delivery Tier
IBM Digital
Experience
Dynamically assembles and delivers complete site to all
devices
Business Services Tier
Provides compact services that are suited for
use in UI layer, using REST/JSON
CastIron, DataPower,
StrongLoop
Transforms and aggregates services from Back
End Services Tier
REST calls from Client Tier can go through Portal’s Ajax
Proxy
REST (JSON or XML) services
Any type of services or remote interfaces – WSDL/SOAP, SQL…
Back End Services Tier
Existing cloud or on-premises systems of record,
services, or data
External third-party services
A few service examples with script applications
IBM Business Process Manager
IBM WebSphere Commerce
Node.js Service on Bluemix
Yahoo Finance Service
IBM Forms Experience Builder
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 development
Node-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
Set up application project
using npm, yeoman, and
bower
Edit application code
Test locally with
Express server
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
© 2015 IBM
22
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
Developer or
designer workstation
Source
Code
Repository
Git, SVN, RTC,
etc.
st
late
Pull de
co sh
Pu es
at
upd
Push to server
Developer Test
Portal
WCM or
WebDAV
Build or integration
Staging/Integration Portal
Production Portal
Push
to
server
system
(Jenkins)
Pull la
Syndication
test
with automated tools
code
WCM or
WebDAV
WCM 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
New w
ith
CF08
• 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
© 2015 IBM
27
New IBM Theme Editor provides browser
editing of theme files
Downl
from c oad
atalog
Simple Theme
New w
ith
CF08
• 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
© 2015 IBM Corporation
29
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
A t o 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
3 . Lib rary file s are
d o w nlo ad e d into
fo ld e rs fo r
Co m po ne nts and
Pre se ntatio n
Te m plate s
1 . Clic k Ge t
Lib rarie s
2 . Se le c t a
lib rary fro m
th e se rve r
4 . Wo rk w ith
plain .h tm l
file s, using any
e d ito rs o r
o th e r to o ls
Update or create new local files, then push updates to
server
7 . Upd ate s are
se e n in WCM
auth o ring and o n
live site
5 . Use e d ito rs o r
o th e r to o ls to
c re ate /m o d ify
file s
6 . Clic k “ Push
Upd ate d ” to
push ne w o r
m o d ifie d file s
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
• IBM Digital Experience Developer
http://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
40
Notices and Disclaimers
Copyright © 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!