Building Rich Internet Applications (with Adobe Flex) - An Application Blueprint


Published on

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

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Building Rich Internet Applications (with Adobe Flex) - An Application Blueprint

  1. 1. Punit Sahni [email_address] Building Rich Internet Applications (with Adobe Flex) An Application Blueprint Source: Morgan Stanley Matrix
  2. 2. Application Blueprint Initiate Execute Plan Step 1: WORKFLOW Step 2: PROTOTYPE Step 4: IMPLEMENTATION Step 3: ARCHITECTURE/DESIGN Step 5: DEPLOY/CI What should we do? “ What are we building?” and, “Why?” How might we do it? “ What will be the user experience of RIA solution?” What’s my 1 st Release? “ What and when will we release?” “ Did we build an efficient development environment? Did we do right architecture and design? “ What do we reuse from commercial and open-source world?” How is it supported? “ How do we deploy, maintain and grow the end solution?” Iteratively Develop RIA Roadmap
  3. 3. Some Representative Deliverables Step 1: WORKFLOW Step 2: PROTOTYPE Step 4: IMPLEMENTATION Step 3: ARCHITECTURE/DESIGN Step 5: DEPLOYMENT User needs and pain points Competitive landscape UI Strategy Plan Visual design and product branding Target user profiles Screen Flow Map Process design / use cases Conceptual workflow Information Architecture Scope Maps High Level Technical Architecture Wireframes Solution mockups and initial prototype End user feedback Enhanced functional design and workflow Interface Design Data architecture and models Enhanced prototype Prioritized on phasing RIA Application Design SCM set-up Bug-tracking Development & Testing Environments Release and support plan Training and user support materials Application demos Performance Metrics Future Iteration roadmap Micro-architecture/ Framework Automated deployment
  4. 4. Step 1- WORKFLOW <ul><li>Idea validation and consensus building at this stage are fundamental keys for success. </li></ul><ul><li>In this phase center around developing and continually evolving your business and technology vision, supported by a clear view of the current and future market landscape. </li></ul><ul><li>Develop UI architecture which optimizes the flow of application, ensures consistent application of reusable patterns of views, and minimizes required views. </li></ul><ul><li>Engage the User’s Workflow </li></ul><ul><li>Actions </li></ul><ul><ul><li>Finding Something, Learning Something </li></ul></ul><ul><ul><li>Performing a transaction, Controlling / Monitoring </li></ul></ul><ul><ul><li>Creating / Sharing or being Entertained </li></ul></ul><ul><ul><li>Patterns </li></ul></ul><ul><ul><li>Safe Exploration / Gratification </li></ul></ul><ul><ul><li>Satisfying / Change in mid stream </li></ul></ul><ul><ul><li>Incremental Construction / Habituation </li></ul></ul><ul><ul><li>Spatial Memory / Prospective Memory </li></ul></ul><ul><ul><li>Streamlined Repetition / Keyboard Only </li></ul></ul><ul><ul><li>Advise </li></ul></ul><ul><li>Identify the Rich Internet Application user's goals to ensure that RIAs deliver measurable results: </li></ul><ul><ul><li>Increased revenue : more online transactions due to speed, task completion rate, and return. </li></ul></ul><ul><ul><li>Increased differentiation : more intuitive, customized, and compelling access to services. </li></ul></ul><ul><ul><li>Engaging experience </li></ul></ul><ul><ul><li>Increased understanding : from complex business information to understanding trends in statistics, RIAs help a user understand content in a visual and interactive way. </li></ul></ul><ul><ul><li>Reduced support costs : more usable + fewer errors = fewer support calls. </li></ul></ul>The Workflow phase answers “What are we building?” and “Why?” <ul><li>Learn more at: </li></ul><ul><li>Rob Adams:: Designing for Flex series - Merging the web and the desktop Designing content displays Guiding with motion </li></ul><ul><li>Presentation Patterns by Paul Williams - Autonomous View Supervising Presenter Presentation Model View Helper Code Behind Passive View </li></ul><ul><li>Carson Hager & Dave Wolf :: Building RIAs from front to back </li></ul>
  5. 5. Step 2 - PROTOTYPE <ul><li>MOCKUPS </li></ul><ul><ul><li>Existing processes and technology are reviewed against end user needs and available data to generate a conceptual future-state workflow and user-centric interface. </li></ul></ul><ul><li>PROTOTYPES </li></ul><ul><ul><li>Develop a functional prototype which consists of key reusable elements coded in desired UI technology in order to share and validate UI design system. Expand the design to include additional key views and reusable UI elements </li></ul></ul><ul><li>WIREFRAMES </li></ul><ul><ul><li>Define functional wireframes to specify required functionality independent of look and feel. Develop the visual design which specifies look and feel, branding, color schemes and use of specific UI components. </li></ul></ul>The Prototype phase answers “What will be the user experience of RIA solution?” <ul><li>Learn more: </li></ul><ul><li>Mockups, Prototyping and wireframes </li></ul><ul><ul><li> / </li></ul></ul><ul><ul><li>16 Design Tools for Prototyping and Wireframing </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li> </li></ul></ul><ul><li>Prototype a Rich Internet Application (RIA) to show particular user experience advantages for several application characteristics like: </li></ul><ul><ul><li>Context continuity </li></ul></ul><ul><ul><li>Data-intensive web applications </li></ul></ul><ul><ul><li>Embedded rich media </li></ul></ul><ul><ul><li>Transitions and user guidance </li></ul></ul><ul><li>User Interface Design </li></ul><ul><ul><li>William Wen :: 11 Great User Interface Design Resources </li></ul></ul><ul><ul><li>The Yahoo Design Pattern Library </li></ul></ul><ul><ul><li> - Also a large database of solutions with thorough explanations. </li></ul></ul><ul><ul><li>Welie’s Patterns - Martijn van Welie shares his personal set of design patterns. </li></ul></ul>Convert workflows and interfaces into a prototype for user feedback and recommendations.
  6. 6. Step 3 - ARCHITECTURE-DESIGN <ul><li>Design guidelines </li></ul><ul><ul><li>Choose an RIA based on audience, rich interface, and ease of deployment. </li></ul></ul><ul><ul><li>Design to use a Web infrastructure utilizing services. </li></ul></ul><ul><ul><li>Design for running in the browser sandbox. </li></ul></ul><ul><ul><li>Determine the complexity of your UI requirements. </li></ul></ul><ul><ul><li>Use scenarios to increase application performance or responsiveness. </li></ul></ul><ul><ul><li>Design for scenarios where the plug-in is not installed. </li></ul></ul>The Architecture-Design phase answers “What do we reuse from commercial and open-source world?” <ul><li>Learn more at: </li></ul><ul><li>Joe Berkovitz :: An architectural blueprint for Flex applications      </li></ul><ul><li> - Flex and Java </li></ul><ul><li>Flex FrameworkQuest – 6 part series comparing Cairngorm, PureMVC , Swiz and Mate </li></ul><ul><li>Microsoft recommendations for RIA applications </li></ul><ul><li>List of 31 Flex APIs, Libraries, Components and Tools </li></ul><ul><li>Develop your design solutions in following categories </li></ul><ul><ul><li>Client </li></ul></ul><ul><ul><ul><li>Controls </li></ul></ul></ul><ul><ul><ul><li>Composition </li></ul></ul></ul><ul><ul><ul><li>Media & Graphics </li></ul></ul></ul><ul><ul><ul><li>Presentation </li></ul></ul></ul><ul><ul><ul><li>Portability </li></ul></ul></ul><ul><ul><ul><li>State Management </li></ul></ul></ul><ul><ul><ul><li>Validation </li></ul></ul></ul><ul><ul><li>Server </li></ul></ul><ul><ul><ul><li>Services Layer </li></ul></ul></ul><ul><ul><ul><li>Business Layer </li></ul></ul></ul><ul><ul><ul><li>Data Layer </li></ul></ul></ul><ul><ul><li>Cross-Cutting </li></ul></ul><ul><ul><ul><li>Security </li></ul></ul></ul><ul><ul><ul><li>Operational management </li></ul></ul></ul><ul><ul><ul><li>Communication </li></ul></ul></ul><ul><ul><ul><li>Caching </li></ul></ul></ul><ul><ul><ul><li>Exception Management </li></ul></ul></ul><ul><ul><ul><li>Logging </li></ul></ul></ul>
  7. 7. Step 4 - IMPLEMENTATION <ul><li>This stage provides the final, hardened and tested release version of the prototypes that were developed and enhanced in the Prototype and Evolve phases. </li></ul><ul><li>Key focus areas of this phase center on final preparation for the enhanced and hardened application going live, including developing and testing the final product for launch in accordance with the stringent quality assurance processes and standards of financial institutions and large enterprises. </li></ul><ul><li>The Implementation phase answers “What and when will we release?” and “Did we build an efficient development environment?” </li></ul><ul><li>Learn more at: </li></ul><ul><li>Anatomy of an Enterprise Flex RIA - </li></ul><ul><li>Wiring up Flex, Mate, BlazeDS , Spring, Hibernate and MySQL with Maven 2 </li></ul><ul><li>Flex + Cairngorm + Spring ActionScript + Tomcat + WebORB/BlazeDS + Spring Java + Hibernate + MySQL Tutorial </li></ul><ul><li>Operational Eco-System </li></ul><ul><li>Bug Tracking </li></ul><ul><li>Build and Deployment </li></ul><ul><li>Automated Builds </li></ul><ul><li>Project Management </li></ul><ul><ul><li>Story Cards – Pictorial BRD’s </li></ul></ul><ul><ul><ul><li>RDD’s, FDDs and TDD’s </li></ul></ul></ul><ul><ul><li>Task Estimation </li></ul></ul><ul><li>Development Eco-System </li></ul><ul><li>Source Control - CVS, SVN </li></ul><ul><li>Build and Deployment </li></ul><ul><li>Server Side – Java/PHP/.NET Foundation </li></ul><ul><ul><li>Java </li></ul></ul><ul><ul><ul><li>Remoting Gateway (BlazeDS, LCDS) </li></ul></ul></ul><ul><ul><ul><li>J2EE Container </li></ul></ul></ul><ul><ul><li>PHP, Rails </li></ul></ul><ul><ul><li>.NET </li></ul></ul><ul><li>Flex Builder 3 – Eclipse Based tool </li></ul><ul><li>Apache Ant – ( ) </li></ul><ul><li>Maven </li></ul><ul><li>Code Generation Tools </li></ul>
  8. 8. Step 5 - DEPLOYMENT <ul><li>The primary delivery in this phase is the solution, released and running in a live production environment. </li></ul><ul><li>Also providing the tools and knowledge transfer to manage and support the production platform is critical. </li></ul><ul><li>Managing the feedback loop of information gathered throughout this process ensures future releases continue to deliver on the latest user and market needs. </li></ul><ul><li>FOCUS: </li></ul><ul><ul><li>Continuous integration </li></ul></ul><ul><ul><li>Deployment Management </li></ul></ul><ul><ul><li>Application lifecycle management </li></ul></ul><ul><ul><li>Software Asset Reuse </li></ul></ul><ul><ul><li>Compliance and IT Governance </li></ul></ul>The Deploy phase answers “How do we deploy, maintain and grow the end solution?” <ul><li>Learn more at: </li></ul><ul><li>Continuous Integration with Maven, Flex, Fliunt , and Hudson </li></ul>
  9. 9. <ul><li>Learn more at: </li></ul><ul><li>Adobe – Flex </li></ul><ul><li>Flex Learning Paths – Designer, Programmer, Manager, Architect </li></ul><ul><li>Flex 3 Developer's Guide (web) </li></ul><ul><li>Flex Developer Center - Architecture </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li>Adobe Books </li></ul>Thank You