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 Content Theme 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 Push the application folder to a Digital Experience server where it runs as a component Test and debug applications standalone in browser
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 List view Detail view Update view The single page application runs as one component on a site along with other applications and content About view 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
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 IBM Digital Experience REST (JSON or XML) services Business Services Tier CastIron, DataPower, StrongLoop Dynamically assembles and delivers complete site to all devices REST calls from Client Tier can go through Portal s Ajax Proxy Provides compact services that are suited for use in UI layer, using REST/JSON 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 Node.js Service on Bluemix IBM Forms Experience Builder IBM WebSphere Commerce Yahoo Finance Service 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 Source Code Repository Developer or designer workstation Push to server Developer Test Portal WCM or WebDAV Git, SVN, RTC, etc. Build or integration Staging/Integration Portal system (Jenkins) Push to server Syndication with automated tools WCM or WebDAV Production Portal 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 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 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 1. Click Get Libraries 3. Library files are downloaded into folders for Components and Presentation Templates 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