Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Perficient PepsiCo Rich Internet Apps Seminar


Published on

PepsiCo needed to:
Enable dashboards and selected applications on smart phones
Increase the usability and richness of custom applications
E.g. Port Demand Resource Planner from a thick client to an RIA
Establish a division of responsibilities between rich applications and portal umbrellas

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

Perficient PepsiCo Rich Internet Apps Seminar

  1. 1. PepsiCo RIA Seminar<br />October 7-8, 2010<br />Contact: Jeff Shaw<br />303.229.1640<br /><br />
  2. 2. Agenda<br />2<br />
  3. 3. Fast Facts<br />Founded in 1997<br />Public, NASDAQ: PRFT<br />2009 revenue of $188 million<br />17 markets throughout the U.S. & Canada:<br />Austin, Chicago, Cincinnati, Cleveland, Columbus, Dallas, Denver, Detroit, Fairfax, Houston, Indianapolis, Minneapolis, New Orleans, Philadelphia, San Jose, St. Louis, and Toronto<br />1,100+ employees<br />Dedicated solution practices<br />Served 400+ clients in past 12 months<br />Alliance partnerships with major technology vendors<br />Multiple vendor/industry technology & growth awards<br />Our working model revolves around high-performance on-shore leadership teams leveraging our offshore capabilities in the delivery of business solutions<br />3<br />
  4. 4. Our Solutions Expertise & Services<br />Business-Driven Solutions<br /><ul><li>Enterprise Portals
  5. 5. User Experience
  6. 6. Business Intelligence/Data Warehouse
  7. 7. SOA and Business Process Management
  8. 8. CRM Solutions
  9. 9. Enterprise Performance Management
  10. 10. Customer Self-Service
  11. 11. eCommerce & Product Information Management
  12. 12. Enterprise Content Management
  13. 13. Industry-Specific Solutions
  14. 14. Mobile Technology
  15. 15. Security Assessments</li></ul>Perficient Services<br /><ul><li>End-to-End Solution Delivery
  16. 16. IT Strategic Consulting
  17. 17. IT Architecture Planning
  18. 18. Business Process & Workflow Consulting
  19. 19. Usability and UI Consulting
  20. 20. Custom Application Development
  21. 21. Offshore Development
  22. 22. Package Selection, Implementation and Integration
  23. 23. Architecture & Application Migrations
  24. 24. Education</li></ul>Perficient brings deep solutions expertise and offers a complete set of flexible services to help clients implement business-driven IT solutions <br />4<br />
  25. 25. Our Partnerships<br />Top Partners<br /><ul><li>Our partner network enhances our core competencies and extends our offerings</li></ul>Clients benefit from:<br /><ul><li>Highly skilled product specialists at lower cost
  26. 26. Faster time-to-market and cost savings for projects
  27. 27. Industry-leading skills transfer and mentoring
  28. 28. Superior project, platform and product support
  29. 29. Unrivaled experience that results from strong relationships (IBM, Oracle)</li></ul>Other Valued Partners Include<br />“Perficient's track record in delivering scalable, integrated and reliable solutions makes them one of IBM's most reliable partners.” <br /> -- Paraic Sweeney, IBM<br />5<br />
  30. 30. Today’s Presenters<br />Michael Porter – Portal and Collaboration Practice Manager<br />10 years experience working with portal, collaboration, and content solutions <br />Industry-known thought leader and responsible for driving client’s strategy<br />Publishes articles, blogs, and presents at various conferences each year<br />Working with companies across the U.S. to define their vision for portal, collaboration, and other technologies <br />Brian Flanagan – User Experience SME and Flex Technologist<br />Extensive experience working with clients to develop a business-focused User Experience strategy<br />Responsible the development of best practice front-end solutions<br />15 years of IT experience<br />Jeff Rivkin – AJAX Technology SME<br />Solutions architect and tech lead for a variety of intranet and extranet portal implementations <br />Responsible for developing and delivering AJAX-based technology solutions<br />30 years of IT experience<br />John Angelini – Microsoft Silverlight SME/MVP<br />Specializes in SharePoint architecture, development and customization<br />Numerous implementations with WPF, Silverlight, WCF, WF and other .NET 3.X technologies<br />Lengthy background in commercial graphic design and 3D animation; video editing and special effect design<br />Jeff Shaw – PepsiCo Account Manager<br />30 years experience in delivering enterprise technology solutions<br />Responsible for PepsiCo/Perficient relationship management<br />6<br />
  31. 31. Why We’re Here Today<br />PepsiCo needs to:<br />Enable dashboards and selected applications on smart phones<br />Increase the usability and richness of custom applications<br />E.g. Port Demand Resource Planner from a thick client to an RIA<br />Establish a division of responsibilities between rich applications and portal umbrellas<br />7<br />
  32. 32. Agenda<br />8<br />
  33. 33. What Is User Experience?<br />User Experience is not part of the process.<br />It is the Process.<br />9<br />
  34. 34. Why User Experience?<br /><ul><li>RIAs that focus on user experience
  35. 35. Drive increased return on investment (ROI) by simplifying and improving user interaction
  36. 36. Enabling users to:
  37. 37. Find information more easily
  38. 38. Complete task quickly and accurately
  39. 39. Use rich data visualization to make better decisions</li></ul>10<br />
  40. 40. The User Experience Model<br /><ul><li>Image © 1999 Ralph A. Clevenger</li></ul>VisualsCues, feedback and aesthetics<br />10%<br />Interaction TechniquesControls that work in conjunction with input devices<br />30%<br />Conceptual ModelTask and goal support, users’ mental models, behaviors and expectations<br />60%<br />11<br />
  41. 41. Our Approach<br />
  42. 42. Engaging Users<br />3x3 Paper PrototypingRapidly iterate through design concepts<br />AccessibilityValidate usability for all users<br />Design StudiosGroup sessions to facilitate ideation<br />Moderated Usability TestingEngage users to validate design concepts<br />13<br />
  43. 43. 14<br />Understanding Accessibility<br />Novice Computer Users<br />~ 25% of US households do not own a computer<br />Aging Population<br />By 2010, 60% of US population<br />will be over the age of 35 <br />Language Learners<br />Temporary Situational Restrictions<br />Poor hearing<br />Failing Vision<br />Color Blindness<br />Ranges of Human Ability<br />Blind / Visually Impaired<br />MobilityImpaired<br />Deaf / Hard<br />of Hearing<br />Cognitive / <br />Learning<br />“Disabilities” are no longer confined to traditional definitions, especially with growing need to embrace multi-generational and multi-cultural populations.<br />
  44. 44. Trends In User Experience<br />Mobility<br />Design for mobile first<br />Social Interaction<br />Focus on real-time collaboration<br />Gaming Mechanics<br />Leverage gaming behaviors to motivate users<br />Analytics<br />Evaluate the usefulness of a solution through analytics<br />15<br />
  45. 45. Agenda<br />16<br />
  46. 46. 17<br />A Rich Internet Application is a web application that has many characteristics of desktop applications typically delivered by a site-specific browser… Adobe Flash, Java, and Microsoft Silverlight are currently the three most common platforms with penetration rates of 99%, 80%, and 54% respectively.<br /> --- Wikipedia<br />Rich Internet applications (RIAs) offer a rich, engaging experience that improves user satisfaction and increases productivity. Using the broad reach of the Internet, RIAs can be deployed across browsers and desktops.<br />--- Adobe<br />
  47. 47. 18<br /><ul><li>Fat applications provide rich features and logic
  48. 48. Thin applications can provide a rich experience………..</li></ul> powered by the server<br /><ul><li>And the pendulum swings again…</li></ul><br />
  49. 49. 19<br />Previous Web 2.0 Architecture<br />
  50. 50. 20<br />Current and Future Architecture<br />Portal + Enterprise 2.0<br />
  51. 51. 21<br />Enterprise Uses of Web 2.0 – REST/WOA<br />WOA – Web Oriented Architecture is less a standard and more a pragmatic way of getting things done on the web<br />WOA incorporates simple, lightweight mechanisms to integrate services, as opposed to the complexities of SOAP<br />REST is a core technology of WOA<br />Most of the mash-ups you see today leverage WOA<br /><br />
  52. 52. Things to think about for your RIA<br />22<br />
  53. 53. Common Aspects of Web Applications<br />Think through whether you need this functionality<br />Deep LinkingLink deeply into the application. Your business user says, “this is a great chart. I want others to see it”<br />Page and sub-page interactione.g. loosely coupled. Can I go from application component on one page and click a button to go to another web page while passing context?<br />Content ManagementBusiness User says, “I need to change this piece of content right here.”Developer says, “No problem, let me code and test for two months and I’ll have it out there for you.<br />23<br />
  54. 54. Common Aspects of Web Applications<br />Think through whether you need this functionality<br />Process or workflowMany times forms or data means that a process needs to be followed. How will you inject a workflow into your application?<br />Location, location, locationRich Internet Applications are just that, RICH.e.g. they can be client heavy. If you ask a user in Brazil to download a 2 Meg package before he or she can start using the app and then ask the same thing again just a few minutes later you will have problems.- The most common complaint of a newly rolled out global site is that it’s unusable outside the U.S.<br />24<br />
  55. 55. Agenda<br />25<br />
  56. 56. What is Ajax?<br />Development tools/techniques for interactive web applications<br />AJAX = Asynchronous JavaScript and XML<br />Update web page without reloading the whole page <br />Combination of technologies: HTML, CSS, DOM, XMLHttpRequest or ActiveX, JavaScript<br />Name coined in 2005; code dates to 2003<br />26<br />
  57. 57. How Ajax Works<br />XMLHttpRequest - exchange data with server<br />Requests: GET/POST; Asynchronous/Synchronous<br />Responses: XML, JSON, or text<br />Callback functions<br />27<br />
  58. 58. Ajax Conceptual Architecture<br />Considerations:<br /><ul><li> Code reuse
  59. 59. Debugging</li></ul>28<br />
  60. 60. Sample Ajax-based Applications<br /><ul><li> Predictive text
  61. 61. Pre-fetch results</li></ul>29<br />
  62. 62. Ajax Frameworks & Libraries<br />jQuery<br />DOJO<br />Yahoo User Interface (YUI)<br />Google Web Toolkit (GWT)<br />Direct vs. indirect <br />Libraries:<br />Software FX<br />Fusion<br />DHTMLX<br />Other<br />30<br />
  63. 63. Ajax Libraries: DHTMLX<br /><ul><li> Open source or commercial license
  64. 64. Integrate charts and grids
  65. 65. Browser independent</li></ul>31<br />
  66. 66. Ajax Libraries: TreeGrid<br /><ul><li> Commercial license
  67. 67. Powerful spreadsheet/grid capabilities
  68. 68. Fast</li></ul>32<br />
  69. 69. Ajax Pros and Cons<br />Pros<br />Maturity<br />Major vendor support<br />Browser independence<br />Availability of tested complex components<br />Performance<br />Code readability<br />Make web pages more desktop-like<br />Open source<br />Cons<br />Bookmarks, history and deep-dives<br />Extensibility<br />Documentation<br />Debugging<br />Handling large datasets<br />Disabled JavaScript<br />Coding for search engine crawlers<br />Browser compatibility<br />33<br />
  70. 70. Agenda<br />34<br />
  71. 71. What is Adobe Flex?<br />Open Source Framework<br />100+ Extensible Components<br />Powerful Charting Capabilities<br />Based on Flash Platform<br />Consistent Deployment<br />Enterprise Class Runtime<br />Actionscript Language<br />35<br />
  72. 72. Flash Platform<br />36<br />
  73. 73. Flash Catalyst<br />Interaction Design Tool<br />Enables rapid interaction design without coding<br />Round-trip editing bridges the designer/developer workflow<br />Provides an interchange between CS5 and Flex<br />Produces Reusable Code<br />37<br />
  74. 74. Flash Builder<br />Built on eclipse<br />Powerful testing & debugging <br />Flex unit testing<br />Performance profiling<br />Network monitoring<br />Client-side data management<br />On-demand fetching of data<br />Page through large data sets<br />Automates the CRUD<br />38<br />
  75. 75. Degrafa: Declarative Graphics Framework<br />Open source framework<br />Creates dynamic graphics in MXML markup<br />39<br />
  76. 76. Flare<br />Open source library<br />Advanced data visualizations<br />40<br />
  77. 77. iLog Elixer<br />Licensed product<br />Includes components for advanced graphical display<br />41<br />
  78. 78. Mobile Applications<br />AIR for mobile devices<br />Adobe “Hero” mobile framework<br />Multi-screen development<br />42<br />
  79. 79. Sample Flash Catalyst Prototypes<br />43<br />
  80. 80. Sample Flex Application<br />44<br />
  81. 81. Sample Flex Applications<br />TweetDeck<br />New York Times Reader<br />SAP Business Objects<br />45<br />
  82. 82. Flex Pros and Cons<br />Pros<br />Mature product<br />Feature Rich<br />High penetration<br />Backed by Adobe<br />3rd Party Support<br />Ubiquitous runtime<br />Eclipse development environment<br />Write once deploy everywhere<br /><ul><li>Cons
  83. 83. Requires plug-in
  84. 84. Not compatible with all browsers (iphone/ipad)
  85. 85. Compatibility with native browser features like back button and password manager
  86. 86. Smaller developer population</li></ul>46<br />
  87. 87. Agenda<br />47<br />
  88. 88. What is Silverlight?<br />Platform for creating engaging, interactive applications for the Web, desktop, and mobile devices<br />Free browser plugin with very small footprint<br />Can easily access J2EE services that are exposed<br />Browsers supported : Internet Explorer 6, 7, 8, Firefox 2 and 3, Safari 3 and 4, and now Google Chrome<br />Out of the box integration with platforms such as SharePoint<br />Same coding paradigm as any other .Net App<br />Primary development platform for Windows Phone 7<br />Fun Fact : NetFlix uses Silverlight for delivering Streaming media <br />48<br />
  89. 89. Silverlight Internals<br />Expression Blend easy prototyping with reusable code <br />Runs on the Client Browser<br />Can be deployed without the browser as a thick App <br />Abundant Out of the Box controls for rendering content plus numerous Third-Party controls available<br />SketchFlow increases the speed with which the vision for an Application can be demonstrated <br />Other Cool Features : RIA Services, Animation, Streaming Media, 3D Graphics, Pan, Zoom etc<br />Small learning curve for existing .Net developers<br />49<br />
  90. 90. Example Silverlight Applications<br />Streaming Media Player in SharePoint<br />50<br />
  91. 91. 51<br />Example Silverlight Applications<br />Graphing / Line of Business<br />
  92. 92. 52<br />Example Silverlight Applications<br />Windows Phone 7 - AP News Reader<br />
  93. 93. Silverlight Pros and Cons<br /><ul><li>Cons
  94. 94. Requires plug-in
  95. 95. Not compatible with all browsers, but most
  96. 96. Requires .Net development skills (not prevalent at PepsiCo)</li></ul>Pros<br />Mature product<br />Multiple Platform Support <br />Feature Rich<br />High penetration<br />Requires .Net skills (prevalent in the industry)<br />Backed by Microsoft<br />3rd Party Support<br />Run out-of-browser with elevated permissions<br />Write once deploy everywhere<br />53<br />
  97. 97. Agenda<br />54<br />
  98. 98. RIA Technology Comparison<br />* With add-on products<br />55<br />