Using Modern Web Development Tools and Technology with IBM

IBM Digital Experience

Using Modern Web Development Tools and Technology with IBM Digital Experience

2

• 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)

Agenda

• 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 2015 web development landscape

• 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

The IBM Digital Experience framework in 2015

• 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

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

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

What we’ll cover in this presentation

Theme

Content

Content Applications


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

Build/test applications

with your preferred tools,

then “push” to server

Rich applications on a

DX site, leveraging DX

value-add features

Applications are stored in Web Content

Manager and available on site toolbar

Applications can be built and

edited with browser-based editor

• 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

Why web developers like 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

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

Push the application

folder to a Digital

Experience server where

it runs as a component

Test and debug applications

standalone in browser

• 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

JavaScript frameworks and Single Page Applications

Angular Single Page Application running alongside other applications or content

List view

Detail view

Update view

About view

The “single page application” runs as one

component on a site along with other

applications and content

All the dynamic views

for the SPA will be

displayed within this

component area

The Angular framework

dynamically displays

different screens within the

main shell HTML, fetching

data via REST/JSON

when necessary

Examples of JS frameworks used with Script Portlet


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)

Application services and the Web 2.0 runtime architecture

Four tier architecture and data services

Client Tier

Desktop or mobile browser

HTML, JS, CSS

Client-side interaction uses data from JSON/REST services

Delivery Tier


Dynamically assembles and delivers complete site to all devices

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

Business Services Tier

CastIron, 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

Service

calls

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

• 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

The Node.js ecosystem and web development tools

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

Node.js tools for web development and design

• 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

Example of gulp build with script applicationAvailable @ https://github.com/OpenNTF/Script-Portlet-Node-Samples

• 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 for IBM Digital ExperienceAvailable @ 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

Web Developer Toolkit – Dashboard

Script Applications

Themes

WCM Libraries

© 2015 IBM Corporation 25

• 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

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


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

Web UI Prototyping ToolkitAvailable @ https://github.com/OpenNTF/Web-UI-Prototyping-Toolkit

Git, SVN, RTC, etc.

Developer or designer workstation

Build or integrationsystem (Jenkins)

Source CodeRepository

Push to server

Push to serverwith automated tools

Developer Test Portal

WCM or WebDAV

Staging/Integration Portal Production Portal

• 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

Using source code management with Digital Experience applications and designs

WCM or WebDAV

Syndication

WCM or WebDAV


Site Design and Responsive Mobile Web with Digital Experience Themes

• 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

Responsive and adaptive design

• 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

Theme architecture key principles


• Theme Manager provides easy 1-click 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

New theme development tools


• 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.

Simple Theme


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

• 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

IBM Web Content Manager – for sites and applications

Use simple authoring UI in browser

…and to applications

Deliver managed content to sites…

• 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

Working with WCM designs using modular design principles

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

1. Click Get

Libraries

2. Select a

library from

the server

3. Library files are

downloaded into

folders for

Components and

Presentation

Templates

4. Work with

plain .html

files, using

any editors or

other tools

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

5. Use editors

or other tools to

create/modify

files

6. Click “Push

Updated” to

push new or

modified files

7. Updates are

seen in WCM

authoring and

on 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

42


For Additional Information

• IBM Digital Experience Developer

http://developer.ibm.com/digexp

WebSphere Portal and IBM Web Content Manager Information Center Wikihttp://www-10.lotus.com/ldd/portalwiki.nsf/

IBM Digital Experience Demonstrations: http://www.youtube.com/user/IBMXWebX

Documents

Using Modern Web Development Tools and Technology with IBM