AD406: What s New in Digital Experience Development with IBM Web Experience Factory

Size: px

Start display at page:

Download "AD406: What s New in Digital Experience Development with IBM Web Experience Factory"

Buck Rogers
6 years ago
Views:

1 AD406: What s New in Digital Experience Development with IBM Web Experience Factory Jonathan Booth, Senior Architect, Digital Experience Tooling, IBM Adam Ginsburg, Product Manager, Digital Experience Software, 2014 IBM Corporation

2 Agenda Exceptional Digital Experience Recent history of Web Experience Factory What s new in the latest Multi-Channel Feature Pack for Web Experience Factory Extending your Digital Experience web site with IBM Worklight New samples, articles, and downloadable tools

3 Some Mobile trends. 3

4 Exceptional Digital Experiences 4

5 Pam s busy day In the office: Conference call with finance department In the office: Finalization of proposal Customer meeting to discuss Proposal At home: Breakfast check figures & plan for today At home: Success. Initiate purchase order process

6 Hand-in-hand: Social & Mobile. Social Business 6

7 Agenda Exceptional Digital Experience Recent history of Web Experience Factory What s new in the latest Multi-Channel Feature Pack for Web Experience Factory Extending your Digital Experience web site with IBM Worklight New samples, articles, and downloadable tools

creating web applications and portlets Out of

development Supports multi-channel web sites

traditional coding to develop exceptional web

builders that accelerate development Dynamic

8 What is Web Experience Factory? Model-based development framework for creating web applications and portlets Out of the box capabilities simplify and speed development Supports multi-channel web sites and applications Easier and faster than traditional coding to develop exceptional web experiences Includes 150+ out-of-the-box builders that accelerate development Dynamic profiling and responsive web design allow you to write once, deploy to many devices 8

9 Recent history 9

What we delivered with the Web Experience Factory Feature Pack 1 in Q1 2013

Design (RWD) for the Data Layout builder New RWD UI themes and styles

Wizard for creating multi-channel responsive applications Worklight Camera

10 What we delivered with the Web Experience Factory Feature Pack 1 in Q Multi-channel and Responsive UI support: New layouts including Responsive Web Design (RWD) for the Data Layout builder New RWD UI themes and styles including compatibility with CTC4 and WebSphere Portal latest theme New Wizard for creating multi-channel responsive applications Worklight Camera support: New Camera builder making it easy to access camera capabilities from any application

11 Agenda Exceptional Digital Experience Recent history of Web Experience Factory What s new in the latest Multi-Channel Feature Pack for Web Experience Factory Extending your Digital Experience web site with IBM Worklight New samples, articles, and downloadable tools

12 What s new in the latest Multi-Channel Feature Pack

Mobile Browser Desktop WebSphere Portal Web

13 Demo: multi-channel banking site using client-side architecture and including hybrid app delivery Mobile Browser Desktop WebSphere Portal Web Experience Factory Portlet Hybrid using Worklight (Web + Native)

sent from server to client Client-side support in the prior release only supported mobile devices New client-side

14 New client-side support for desktop browsers & multi-channel delivery Client side architecture improves end-user responsiveness and performance by using clientside JavaScript with REST/JSON services This reduces the amount of data sent from server to client Client-side support in the prior release only supported mobile devices New client-side support is extended to desktop browsers. Key Benefits: Desktop and multi-channel applications can now benefit from client-side capabilities

15 WEF 8.0 client-side mobile web application architecture WEF server generates HTML markup templates (without data) and JS; all data is retrieved from client using REST/JSON services. 15

16 Client-side capabilities Reduces amount of traffic JSON vs HTML Improves performance, especially over slower connections Provides smooth UI interaction All interaction within a portlet is done by fetching JSON data and updating just that part of the screen All updates are done with JS/JSON/REST

17 New Client Side Tooling Getting started with client side is easy Start with one of the new wizards Use other builders to customize and enhance as usual

New developer productivity tools Four new wizards for quickly building multichannel models Client Multichannel List & Detail Multi-Page Form (Server or Client-Side) Tabbed Model Container

18 New developer productivity tools Four new wizards for quickly building multichannel models Client Multichannel List & Detail Multi-Page Form (Server or Client-Side) Tabbed Model Container Multichannel Starter (Server or Client-side) New Application Page builder to quickly build common UI patterns Data View and Data Entry pages Navigation using lists or tabs Pages with Model Container Additional builder enhancements Data Layout enhancements Variable enhancement

19 Client Multi-channel List & Detail wizard

20 Multi-Page Form (Server or Client-Side) wizard

21 Application Page builder Data View and Data Entry pages

22 Application Page builder Page Navigation and Model Container

Additional builder enhancements Data Layout builder

Four new Dojo-based layouts New Six Column Multi-Line List

from Variable builder, for quick prototyping Dojo Mobile

23 Additional builder enhancements Data Layout builder enhancements: Separate table input for selecting styles Four new Dojo-based layouts New Six Column Multi-Line List layout Dojo Title Pane Navigation Generate schema directly from Variable builder, for quick prototyping Dojo Mobile Icon Container Dojo Mobile Swap View List Six Column Multi-Line List

24 Agenda Exceptional Digital Experience Recent history of Web Experience Factory What s new in the latest Multi-Channel Feature Pack for Web Experience Factory Extending your Digital Experience web site with IBM Worklight New samples, articles, and downloadable tools

Worklight 6.x Running in mobile web browser: no option for Deposit Check Go where your mobile web browser can t go Use native device and Worklight 6.

25 Worklight 6.x Running in mobile web browser: no option for Deposit Check Go where your mobile web browser can t go Use native device and Worklight 6.x features Camera, notifications, encrypted storage, etc. Access your whole web site from an installed Worklight application, with access to native device features when you want them Turn features of the site or portlet on/off based on whether running in mobile web browser or in Worklight app Use all the powerful new features of Worklight 6.x Running in Worklight app: additional native functionality

26 Multi-channel site architecture including Worklight Desktop Web Browser Tablet Web Browser Smartphone Web Browser Worklight Hybrid Shell Installed App Firewall & Proxy Security check, notification registration, etc. HTML/JS/CSS, Ajax REST services WebSphere Portal Server Personalization, access control, customization, navigation, etc. Portlets Web Experience Factory portlets, RAD portlets, social portlets, etc. Content Enterprise applications and services Worklight Server Notifications, application authorization, app validity, update service, etc. IBM Connections and social services

27 New Worklight Enable builder Enables JavaScript access to Worklight and Cordova libraries

28 Agenda Exceptional Digital Experience Recent history of Web Experience Factory What s new in the latest Multi-Channel Feature Pack for Web Experience Factory Extending your Digital Experience web site with IBM Worklight New samples, articles, and downloadable tools

29 New resources for using JQuery and other script libraries A new set of articles and samples shows how to use popular JS libraries with Experience Factory You can use these libraries with WEF in a number of ways, such as: 1. Build most UI using JS and HTML, using WEF s portlet support and data access builders Example: use an open-source or third-party charting library with data from WEF provider Example: build all the UI using JQuery UI and a JS MVC library, accessing data from a WEF data provider 2. Build most UI with WEF and Page Automation; enhance with JS libraries Example: use JQuery widget for calendar picker or other form input 3. Build some screens using WEF UI builders and some with hand-coded JS Example: build list and table display using WEF tools; combine with a chart from a JS library Now available on the WEF wiki: several jquery samples and a downloadable builder See this blog post:

30 Benefits of combining Web Experience Factory (WEF) with jquery or other script libraries Using script libraries in combination with WEF, you can: Build portlets and applications using the skills many developers already have, with jquery, Backbone.js, ExtJS, or other scripting libraries Easily use REST/JSON to access data and services using the full array of WEF's data integration and transformation builders Selectively enhance a WEF application's UI using any of the available script UI libraries Leverage all of WEF's support for Portal features such as portlet preferences and shared render parameters Leverage WEF's unique support for dynamic profiling, to generate different application variations for different target audiences or devices

31 Script Application Builder New: A Script Application builder is available on the WEF wiki that implements a common pattern for building script-based applications With a single builder you can implement a script-based portlet or a page within a WEF portlet The builder automatically generates code and variables for JSON/REST access to all the operations from a Data Service provider model

JQuery Portlets using Script Application Builder Script-Based Portlets References to script libraries such as JQuery Application JS file $(document).

32 JQuery Portlets using Script Application Builder Script-Based Portlets References to script libraries such as JQuery Application JS file $(document).ready( function() { // Get Accounts jqsample.displaychart(); }); Data Service Provider Model Data Access and Transformation Builders JSON/REST Calls to server

33 Demo

34 New downloadable tools on the WEF wiki XML File Data Service builder For quick prototyping or UI-first development Resourced Text builder For automatically applying text from a resource bundle to locations on all pages in a model Multiple Visibility Setter builder For implementing conditional visibility on many fields at once LJO Base Class builder For improving LJO model references Session Memory Report model To see how much memory each model is keeping in user session

35 More new samples and articles New samples for the latest Multi-Channel Feature Pack: Using the new Multi-Channel Responsive Data Layouts Client-side application samples Updated Camera builder sample Worklight Enable builder samples Building a multi-channel responsive application Customer Account Sample Using the Application Page Builder (includes multi-page form) Using the new responsive HTML template for responsive multi-column forms Developing social portlets by leveraging IBM Social Business Toolkit Includes Connections Files builder to easily access files from IBM Connections Componentizing an application using Model Container and Event builders Generating PDF files Text With Image custom builder Editable Table Sample

For more information Join our community: http://ibm.

wiki, samples etc. The WEF wiki: http://www-10.lotus.com/ldd/pfwiki.

36 For more information Join our community: Latest news/blog Access to experts Links to valuable info including forums, wiki, samples etc. The WEF wiki: New RedWiki: IBM Redbooks: Developing Exceptional Multi-Channel Web Experiences: Youtube channel:

37 Engage Online SocialBiz User Group socialbizug.org Join the epicenter of Notes and Collaboration user groups Follow us on LinkedIn Participate in the IBM Social Business group on LinkedIn: Facebook Like IBM Social Business on Facebook Social Business Insights blog ibm.com/blogs/socialbusiness Read and engage with our bloggers 37

38 Access Connect Online to complete your session surveys using any: Web or mobile browser Connect Online kiosk onsite 38

39 Acknowledgements and Disclaimers Availability. References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. The workshops, sessions and materials have been prepared by IBM or the session speakers and reflect their own views. They are provided for informational purposes only, and are neither intended to, nor shall have the effect of being, legal or other guidance or advice to any participant. While efforts were made to verify the completeness and accuracy of the information contained in this presentation, it is provided AS-IS without warranty of any kind, express or implied. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this presentation or any other materials. Nothing contained in this presentation is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software. All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual environmental costs and performance characteristics may vary by customer. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other results. Copyright IBM Corporation All rights reserved. U.S. Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp. IBM, the IBM logo, ibm.com, and WebSphere are trademarks or registered trademarks of International Business Machines Corporation in the United States, other countries, or both. If these and other IBM trademarked terms are marked on their first occurrence in this information with a trademark symbol ( or ), these symbols indicate U.S. registered or common law trademarks owned by IBM at the time this information was published. Such trademarks may also be registered or common law trademarks in other countries. A current list of IBM trademarks is available on the Web at Copyright and trademark information at Other company, product, or service names may be trademarks or service marks of others. 39

What s New IBM Multi-Channel Feature Pack 2 for IBM Web Experience Factory 8.0.x IBM Corporation

What s New IBM Multi-Channel Feature Pack 2 for IBM Web Experience Factory 8.0.x 2013 IBM Corporation Leaders leverage social business for a competitive advantage IBM MobileFirst As a mobile enterprise,