amdocs and html5-mcss
Post on 17-Oct-2015
128 Views
Preview:
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 daniel.reiter@amdocs.comInformation Security Level 2 Sensitive 2012 Proprietary and Confidential Information of Amdocs23
top related