amdocs and html5-mcss

Upload: emdsena

Post on 17-Oct-2015

128 views

Category:

Documents


2 download

TRANSCRIPT

Amdocs Overview

Highly Customizable UIStyle Customize application look and feel (CSS)Design concept and themeWidget stylingView Customize application layout, widgets used, widget style in context, widget display propertiesPresentation logic (JS Object) Customize user interaction, application and user event handlingFlows and client side processing Customize application flows, validation, relational modelInteraction with BE Server Customize REST servicesInformation Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs24AgendaAbout AmdocsMulti Channel Self ServiceTechnological challengesSolution approachArchitectural dilemmas

For 30 years, Amdocs has ensured service providers success by embracing their biggest challengesAbout AmdocsLeader in Customer Experience Systems and Services $3.2b revenue, $1.17b in cashMore than 19,000 professionals Serving customers in more than 60 countriesTraded on New York Stock Exchange (DOX)3

250+ Customers2500+ Projects

We support more than 2 billion customer experiences a day

4Multi Channel Self-Service (MCSS)Information Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs5The Business need:Unassisted consumer access to Service ProviderComplete, integrated transactional-care (Bill payment, Care, Commerce) that provides consistent and great user experience across all touch points

Fast DeploymentMulti-touchpointSlick AppsEasy UpdatesTechnological ChallengesInformation Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs6Mobile deployment on limited control environment, multiple OS, form factors and constantly expanding matrix of devicesNative user experience

Need for common code base to reduce lengthy development and deployment cycles and retain consistency across touch point

Customizable yet upgradable (theme, styling, functionality)Continuous upgrade/patch

HTML5, JQuery widget libraries REST servicesModern Web Architecture1Mobile Deployment3Device abstraction layer for deployment to multiple mobile devices (reduce device porting time)Supports major form factor combinations tablet, desktop, smart phone (increase code reuse)Touchpoint Optimization & ConsistencyIDE for Quicker page creation and re-use across form factorsRapid Deployment42Unified UI infrastructure that cuts across touch points and channels enabling rapid time to market and a screamingly simple user experienceSolution ApproachUser Experience (UX) Framework

7Standards Based Web TechnologyHTML5BackboneJSjQuery StackjQueryjQueryMobilejQueryUIRequireJSUnderscore

Information Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs8

UXF is based on technologies, JavaScript open sources tools, and utilities that are industry-standards:8ModularizationBringing Structure to Javascript UXF uses Asynchronous Module Definition (AMD), supported by requireJSA module is a component that is treated/loaded as a standalone entityEvery UXF JavaScript object is defined as a moduleProvides basic and common components that are used to create web-based applicationsWidget libraryApplication building blocksInformation Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs9Provides a clear separation ofServer REST servicesUI business logicUI flowsClient presentation layer HTML/JS/CSSEasier maintenance of large-scale applicationsEasy reuse of codeCustomization enables substitution of core module with a customized version

Provides structured approach to javascript simplfying code management and increasing reuseBenefitsCapabilities

9Widgets LibraryVersatile Building BlocksWidget self contained client side component that exposes a specific piece of content (information or service). Typically implements several views, optimized per touch point or device.Technical Widgets based on jQuery/JQM widgets that provide basic UI elements. Widgets can be grouped to form higher level (composite) widgets Business Widgets widgets combined with services create reusable blocks of business functionality (i.e. search product widget)Information Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs10Easy reuse of code drop widgets into pagesCustomization creation of custom composite widgets

Widgets provide ease to reuse building blocks of functionality allowing rapid page constructionBenefitsCapabilities

10Supporting toolsSet up environment Quick jump start, standard working environmentDesign Design tools Services, Data and presentationDevelop Structured development concepts, templates, live documentation, data binding, code inspectionTest Automated tests, build reports, Simulates browsers, desktop, mobile and tablet, simulate devices API, device emulatorBuild Optimize development resources for production, code validation, build servers for multiple platforms (So all development and build could be done on same machine)Custom build Create partial build in case not all features, widgets are required to create specific application version that contain only what is needed by specific customerRuntime Logging framework, Usage analysis, Configuration, background updatesInformation Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs11CapabilitiesUXF is a complete stack of technologies and tools that supports creating and deploying user-experience focused applications cross device and cross platform11Architectural DilemmasInformation Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs12

Hybrid ApplicationInformation Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs13The dilemmaNative or HTML5?Native has the potential to provide better performance and optimized graphics.. We decided hybrid HTML5 Built using web technologies and compiled into a native executable run by the native browserA True design once deploy many enabling technologyClose to native experience on smart devices and desktopsRapid DevelopmentCode ReuseRich customizable ExperienceRepeated effort to customize multiple native code

NativeUser Experience and Code Reuse Information Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs14User ExperienceCode Reuse/Rapid DeploymentUXF HybridWeb AppClient FrameworkInformation Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs15The dilemma:Use an existing frameworks such as Dojo or Sencha Vs. building our own framework based on smaller components such as jQuery /JQuery Mobile, Backbone, RequireJS etc. We decided build our ownAmdocs requirements include a unique blend of customization/upgrade/experience/rapid development Widget library decoupling easier to adopt new UI elements without impacting the JS frameworkVendor locking/decouplingAbility to upgradeStrengthen our in house knowledge of the technology

Mobile EnablementUser Experience Framework (UXF)Hybrid Application Support HTML5 pages encapsulated and installed on mobile device as applicationSupported Devices UXF ME supports broad range of mobile phones and tablets Device Abstraction Provides common set of APIs to access native resources on supported devices (camera, accelerometer, GPS)Push Notification Provides common API enabling Push Notification across multiple OSMobile Development IDE that allows emulation of devices as well as simulation of local device resourcesPackaging and Deployment Installer generator for selected devices creates OS specific installation package and application /version management. Use of technology specific package selection such as Android Google filters.

UXF Mobile Enablement allows deployment of a single sourced Hybrid Mobile app to host of supported devices

Client or Server Centric ArchitectureThe dilemmaClient based architecture reduces network resource utilization and reduces impact on service provider backend systemsServer based architecture simplifies Security and Role Based Authorization. Also uses more popular language (java vs JS)

We decided to go client centric becauseUI experience (performance)Higher scalability (strong client side CPU)Resource security is managed on the serverDecoupling of server/client technology

Information Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs17Client Centric MVVM Design PatternInformation Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs18The entire application is client side - Server provides only content via REST ServicesModel Reflects front end server REST servicesView Interact with the user in graphical way ViewModel the displayed data modelAllows clear separation of front end server data from the UI display logicData binding automatic update of UI when model data change and vise versa

Cross Touch Point DesignDesign Once Deploy ManyAdaptable widgets across major form factorsSmartphone, Tablet, DesktopMultiple embedded views (based in part on responsive design concept)Enables touchpoint specifics events with widgetsIncreases code reuse

List WidgetModelList of devices (name, picture, desc)ViewModel Abstract ViewSelect Row {Click on Row, Touch Row, }Next Rows {Scroll Down, Wipe}ViewsTablet View

Web View

Mobile View

Details

GetDeviceListService call.The use of Model View ViewModel(MVVM) paradigm enables a single widget to render appropriately for different form factors

Information Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs20Graph WidgetGraph WidgetCarouselCarouselRecommendation

RecommendationRecommendationService Providers are looking to provide a superior customer experience which is consistent across unassisted touch points

However, technological challenges such as limited control environment, multiple OS, form factors and constantly expanding matrix of devices as well as long development and deployment cycles inhibit adoption of self service solutions

The Amdocs Multi Channel Self Service provides a solution based on the UX Framework and advanced web technologies such as HTML5, JavaScript, widget libraries and industry standard open source tools and utilities

SummaryInformation Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs21

QuestionsInformation Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs22?Thank You [email protected] Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs23