Using Modern Web Development Tools and Technology with IBM

IBM Digital Experience
Using Modern Web Development Tools and
Technology with IBM Digital Experience
Agenda
• The 2015 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 2015 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 2015
• 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 how modern
web development tools
and technologies are used
with IBM Digital Experience
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
IBM Digital Experience
Modern Web Applications and Frameworks with
Script Portlet
Script Portlets: web applications built with standard frameworks
and tools, running as components on a Digital Experience site
Use JavaScript libraries and
frameworks of your choice
Applications are stored in Web Content
Manager and available on site toolbar
Rich applications on a
DX site, leveraging DX
value-add features
Applications can be built and
edited with browser-based editor
Build/test applications
with your preferred tools,
then “push” to server
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
Building simple applications with the browser-based editor
JavaScript and CSS
tabs
Tree view
of files and
folders
HTML editing
tab
Preview
window
Building applications with standard web development tools,
then pushing to a Digital Experience server
Build applications with your
favorite editors (Sublime Text
shown here) and other tools such
as Node.js-based tools
Test and debug applications
standalone in browser
Push the application
folder to a Digital
Experience server where
it runs as a component
JavaScript frameworks and Single Page Applications
• Modern web applications use JavaScript frameworks to structure the
application and provide valuable common functionality
– Angular, Backbone, ExtJS, Ember, React, etc.
– Frameworks include features such as data binding, views, controllers, HTML
templates, and storage
• The Single Page Application (SPA) model is used
– A main HTML page provides the shell where all interaction takes place
– JavaScript handles all dynamic interaction and accessing data from server
• With Script Portlet, a “single page application” runs as one component
within a Digital Experience site
– Don’t be confused by the terminology – the site still has many pages
Angular Single Page Application running alongside other
applications or content
The “single page application” runs as one
component on a site along with other
applications and content
List view
Detail view
Update view
About view
The Angular framework
dynamically displays
different screens within the
main shell HTML, fetching
data via REST/JSON
when necessary
All the dynamic views
for the SPA will be
displayed within this
component area
Examples of JS frameworks used with Script Portlet
IBM 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
Dynamically assembles and delivers complete site to all
devices
IBM Digital Experience
REST calls from Client Tier can go through Portal’s Ajax
Proxy
REST (JSON or XML) services
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
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
IBM Digital Experience
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 and design
Valuable 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
Example of gulp build with script application
Available @ https://github.com/OpenNTF/Script-Portlet-Node-Samples
• Automates the script application build process, including:
– finding errors and poor code quality in JavaScript using
JSHint
– compiling LESS to CSS
– combining JavaScript and CSS source files
– compressing and minifying JavaScript and CSS source
– pushing the application to a Digital Experience server
– watching the application file folder for changes,
automatically performing all these tasks whenever the
code is changed
Web Developer Toolkit for IBM Digital Experience
Available @ https://github.com/OpenNTF/WebDevToolkitForDx
• Node-based tools for working with script applications, DX
themes, and WCM designs
• Provides a “Dashboard” UI for working with applications and
designs
– Manages push/pull/watch for synchronizing local files with
server
– Includes other useful tools such as a script application test
server and tools for working with theme modules and
profiles
• Lets designers work with WCM design artifacts locally as plain
HTML and image files (more on this later…)
Web Developer Toolkit – Dashboard
•
•
•
•
•
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 Corporation
25
Web UI Prototyping Toolkit
Available @ https://github.com/OpenNTF/Web-UI-Prototyping-Toolkit
Tools for easy creation of HTML prototypes for UX designs
• Provides web server rendering with live editing of text
• Supports modular design with reusable artifacts for
fragments & layouts
– Avoids duplication
• Can export static HTML pages of the designs
• Can automatically generate DX theme artifacts and push to
server
• Generates responsive screenshots at multiple sizes
• Generates navigation UI
© 2015 IBM Corporation
26
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
Developer Test Portal
Push to server
Source Code
Repository
Git, SVN, RTC, etc.
WCM or
WebDAV
Build or integration
Staging/Integration Portal
Production Portal
system (Jenkins) Push to server
Syndication
with automated tools
WCM or
WebDAV
WCM or
WebDAV
IBM Digital Experience
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 also 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 1click create, copy, or export of
themes
• IBM Digital Experience File Sync
(DX Sync) – see slide 25
• Web Developer Toolkit optionally
provides a GUI for DX Sync – see
slide 23
© 2015 IBM Corporation
31
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
• A number of generic dynamic content spots are available
– Top Navigation, Mega Menu, etc.
© 2015 IBM Corporation
32
IBM Digital Experience
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 an optimal customer experience through dynamic
content delivery with a high level of 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, with WCM
tags for dynamic content
• CSS provides styling and is
delivered via theme modules
• 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
Atomic Design
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. Library files are
downloaded into
folders for
Components and
Presentation
Templates
1. Click Get
Libraries
2. Select a
library from
the server
4. Work with
plain .html
files, using
any editors or
other tools
Update or create new local files, then push
updates to server
7. Updates are
seen in WCM
authoring and
on live site
5. Use editors
or other tools to
create/modify
files
6. Click “Push
Updated” to
push new or
modified files
IBM Digital Experience
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
42
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
© 2015 IBM Corporation
43