Developing Exceptional Mobile and Multi-Channel Applications using IBM Web Experience Factory

Size: px

Start display at page:

Download "Developing Exceptional Mobile and Multi-Channel Applications using IBM Web Experience Factory"

Tiffany McGee
6 years ago
Views:

1 Developing Exceptional Mobile and Multi-Channel Applications using IBM Web Experience Factory IBM Corporation 2011

2 Who am I? 2

3 Agenda Mobile web applications and Web Experience Factory Tour of Web Experience Factory automation of mobile web applications Demo Downloads and additional resources 3

4 Which way shall we go? Does your organization need to......develop, manage and deploy web and hybrid mobile applications for smart phone and smart devices? OR WebSphere Portal Themes + Web Experience Factory iphone, ipad, Android, Blackberry, etc....develop, manage and deploy a mobile web site or mobile web Mobile Portal applications for a wide Accelerator variety of devices and iphone, ipad, Android, Blackberry, + 8,000 More Devices device types?

5 Mobile application development and web technology Organizations are faced with a need to move applications rapidly to the exploding smartphone and mobile device market Building native applications with multiple device SDKs is very costly and time-consuming Modern smartphone and tablet browsers have very good support for a rich user experience that can have a native look and feel This is done with web technologies: HTML/HTML5, CSS, and JavaScript Web Experience Factory provides a set of highlyautomated tools for developing mobile web applications using those web technologies

Techniques for Creating Exceptional Mobile Experiences

installing software Use device browsers to provide

technologies (HTML5, CSS, JS) Hybrid applications: leverage

applications that use the device browser to display

features Leverage standard web technologies (HTML5, CSS, JS)

device features such as camera, accelerometer, calendar,

6 Techniques for Creating Exceptional Mobile Experiences Mobile web applications Accessible over the internet without installing software Use device browsers to provide native-looking applications Built using standard web technologies (HTML5, CSS, JS) Hybrid applications: leverage web technology and native device features Installed applications that use the device browser to display web-based UI Provide the ability to use native device features Leverage standard web technologies (HTML5, CSS, JS) Native applications Installed applications that use all device features such as camera, accelerometer, calendar, contacts, etc. Support the richest user experience (e.g., gaming applications) Built using each phone's native SDK

7 Techniques for Creating Exceptional Mobile Experiences Use Web Mobile web applications Experience Factory for Accessible over the internet without installing software rapid Use device browsers to provide native-looking applications development Built using standard web technologies (HTML5, CSS, JS) of Web and Hybrid applications: leverage web technology and Hybrid app native device features Installed applications that use the device browser to display web-based UI Provide the ability to use native device features Leverage standard web technologies (HTML5, CSS, JS) Native applications Installed applications that use all device features such as camera, accelerometer, calendar, contacts, etc. Support the richest user experience (e.g., gaming applications) Built using each phone's native SDK

IBM Web Experience Factory key features Automates and simplifies software creation for rapid solution delivery Creates highly interactive, rich user interfaces that leverage Ajax

capabilities (relational DB, Web and REST services, SAP, Siebel, PeopleSoft, Lotus Domino, Microsoft Excel, etc.

8 IBM Web Experience Factory key features Automates and simplifies software creation for rapid solution delivery Creates highly interactive, rich user interfaces that leverage Ajax techniques and Dojo widgets Generates native-looking mobile web applications for smartphones and other devices Provides a rich pre-built connector library and transformation capabilities (relational DB, Web and REST services, SAP, Siebel, PeopleSoft, Lotus Domino, Microsoft Excel, etc.) Includes Dynamic Profiling capability, to generate multiple variations from a single source model For different devices, different roles, customers/partners, etc. Supercharges Application Development Runs on IBM WebSphere Portal or IBM WebSphere Application Server 8

Web Experience Factory automation of design patterns Web

approach using builders A builder is a tool with a

all the necessary application code and artifacts Builders are

Factory graphical Designer IDE Application code Web

9 Web Experience Factory automation of design patterns Web Experience Factory features a model-based development approach using builders A builder is a tool with a wizard-like UI that automates a design pattern, generating all the necessary application code and artifacts Builders are combined in a model and edited using the Web Experience Factory graphical Designer IDE Application code Web Experience Factory code generation engine Model Builder 1 Builder 2 Etc. Libraries and templates 9

s Tablets...deploy to multiple platforms.

10 One tool multiple platforms and devices Use one common set of tools, techniques, application code (models)... Web Experience Factory Desktop...and generate Browser applications s for multiple client devices Smartphone s Tablets...deploy to multiple platforms... WebSphere Portal WebSphere Application Server 10

11 Multi-channel execution architecture Client devices Mobile Navigation UI (e.g., vertical lists) Smartphone Mobile enabled Portal Theme WebSphere Portal Web Experience Factory WAR Mobile Profile Device Portlet Profile Factory Selection Engine Handler Sourc e Model Desktop Profile Desktop browser Desktop Navigation UI (e.g., horizontal tabs) Generated mobile application code and pages Generated desktop application code and pages Shared Services and Data Access 11

12 Agenda Mobile web applications and Web Experience Factory Tour of Web Experience Factory automation of mobile web applications Demo Downloads and additional resources 12

13 Samples of mobile web applications built with Web Experience Factory

14 So, how do I build a mobile-enabled web application with Web Experience Factory? Use all the high-level tools of Web Experience Factory to quickly build your data access and user interface pieces Add mobile-enablement features such as the Data Layout builder and mobile UI themes Optionally, use device type profiling to create different variants for different device types Use the Mobile List & Detail Service Consumer wizard to get started quickly

Building mobile web applications using a service architecture Web Experience Factory DB or other back end data source Provider builders SQL

Data transforms and schemas References to Java classes/libraries Service Interface operations and schemas Service (provider) model

15 Building mobile web applications using a service architecture Web Experience Factory DB or other back end data source Provider builders SQL Data Services, Web services, REST services, SAP, Domino, PeopleSoft, Siebel, etc. Data transforms and schemas References to Java classes/libraries Service Interface operations and schemas Service (provider) model Presentation (consumer) model Presentation builders Service Consumer View & Form or Data Services UI Data Field Settings Builders for mobile UI Data Layout Mobile UI theme UI customization builders Desktop Smartphone

16 Build a mobile-enabled web application using a database or web service

17 Agenda Mobile web applications and Web Experience Factory Tour of Web Experience Factory automation of mobile web applications Demo Downloads and additional resources 17

18 Key resources for developers Web Experience Factory wiki Learning Roadmap from the Web Experience Factory wiki Covers topics from your first installation to advanced topics such as creating builders Web Experience Factory forums on developerworks Includes numerous samples and articles, best practices documents, and links to other resources rs=3044&uid=swg These are very active and are monitored closely by the Web Experience Factory team Go here for specific questions or if you get stuck on anything IBM Customer Experience Suite, WebSphere Portal and Web Content Manager Software and Solutions

19 Summary 1) IBM Web Experience Factory has a very rich set of tools for the rapid development of great-looking mobile web applications 2) This mobile support is added in WEF onwards. 3) The dynamic profiling feature of Experience Factory makes it easy to create applications optimized for multiple device types, from a single source model Desktop, smartphone, tablet, etc. 4) IBM Web Experience Factory is WebSphere Portlet Factory, so it's a mature and stable product, with a deep set of tools and a complete developer ecosystem 19

Developing Web Applications for Smartphones with IBM WebSphere Portlet Factory 7.0

Developing Web Applications for Smartphones with IBM WebSphere Portlet Factory 7.0 WebSphere Portlet Factory Development Team 6 September 2010 Copyright International Business Machines Corporation 2010.