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

Punit Sahni [email_address] Building Rich Internet Applications (with Adobe Flex) An Application Blueprint Source: Morgan Stanley Matrix

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

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

Step 1- WORKFLOW
Idea validation and consensus building at this stage are fundamental keys for success.
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.
Develop UI architecture which optimizes the flow of application, ensures consistent application of reusable patterns of views, and minimizes required views.
Engage the User’s Workflow
Actions
Finding Something, Learning Something
Performing a transaction, Controlling / Monitoring
Creating / Sharing or being Entertained
Patterns
Safe Exploration / Gratification
Satisfying / Change in mid stream
Incremental Construction / Habituation
Spatial Memory / Prospective Memory
Streamlined Repetition / Keyboard Only
Advise
Identify the Rich Internet Application user's goals to ensure that RIAs deliver measurable results:
Increased revenue : more online transactions due to speed, task completion rate, and return.
Increased differentiation : more intuitive, customized, and compelling access to services.
Engaging experience
Increased understanding : from complex business information to understanding trends in statistics, RIAs help a user understand content in a visual and interactive way.
Reduced support costs : more usable + fewer errors = fewer support calls.
The Workflow phase answers “What are we building?” and “Why?”
Learn more at:
Rob Adams:: Designing for Flex series - Merging the web and the desktop Designing content displays Guiding with motion
Presentation Patterns by Paul Williams - Autonomous View Supervising Presenter Presentation Model View Helper Code Behind Passive View
Carson Hager & Dave Wolf :: Building RIAs from front to back

Step 2 - PROTOTYPE
MOCKUPS
Existing processes and technology are reviewed against end user needs and available data to generate a conceptual future-state workflow and user-centric interface.
PROTOTYPES
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
WIREFRAMES
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.
The Prototype phase answers “What will be the user experience of RIA solution?”
Learn more:
Mockups, Prototyping and wireframes
http://www.sitepoint.com/article/wireframing-balsamiq-mockups /
16 Design Tools for Prototyping and Wireframing
http://www.paperprototyping.com/
http://developer.yahoo.com/ypatterns/wireframes/
Prototype a Rich Internet Application (RIA) to show particular user experience advantages for several application characteristics like:
Context continuity
Data-intensive web applications
Embedded rich media
Transitions and user guidance
User Interface Design
William Wen :: 11 Great User Interface Design Resources
The Yahoo Design Pattern Library
UIpatterns.com - Also a large database of solutions with thorough explanations.
Welie’s Patterns - Martijn van Welie shares his personal set of design patterns.
Convert workflows and interfaces into a prototype for user feedback and recommendations.

Step 3 - ARCHITECTURE-DESIGN
Design guidelines
Choose an RIA based on audience, rich interface, and ease of deployment.
Design to use a Web infrastructure utilizing services.
Design for running in the browser sandbox.
Determine the complexity of your UI requirements.
Use scenarios to increase application performance or responsiveness.
Design for scenarios where the plug-in is not installed.
The Architecture-Design phase answers “What do we reuse from commercial and open-source world?”
Learn more at:
Joe Berkovitz :: An architectural blueprint for Flex applications
Adobe.com - Flex and Java
Flex FrameworkQuest – 6 part series comparing Cairngorm, PureMVC , Swiz and Mate
Microsoft recommendations for RIA applications
List of 31 Flex APIs, Libraries, Components and Tools
Develop your design solutions in following categories
Client
Controls
Composition
Media & Graphics
Presentation
Portability
State Management
Validation
Server
Services Layer
Business Layer
Data Layer
Cross-Cutting
Security
Operational management
Communication
Caching
Exception Management
Logging

Step 4 - IMPLEMENTATION
This stage provides the final, hardened and tested release version of the prototypes that were developed and enhanced in the Prototype and Evolve phases.
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.
The Implementation phase answers “What and when will we release?” and “Did we build an efficient development environment?”
Learn more at:
Anatomy of an Enterprise Flex RIA - InsideRIA.com
Wiring up Flex, Mate, BlazeDS , Spring, Hibernate and MySQL with Maven 2
Flex + Cairngorm + Spring ActionScript + Tomcat + WebORB/BlazeDS + Spring Java + Hibernate + MySQL Tutorial
Operational Eco-System
Bug Tracking
Build and Deployment
Automated Builds
Project Management
Story Cards – Pictorial BRD’s
RDD’s, FDDs and TDD’s
Task Estimation
Development Eco-System
Source Control - CVS, SVN
Build and Deployment
Server Side – Java/PHP/.NET Foundation
Java
Remoting Gateway (BlazeDS, LCDS)
J2EE Container
PHP, Rails
.NET
Flex Builder 3 – Eclipse Based tool
Apache Ant – ( http://ant.apache.org/ )
Maven
Code Generation Tools

Step 5 - DEPLOYMENT
The primary delivery in this phase is the solution, released and running in a live production environment.
Also providing the tools and knowledge transfer to manage and support the production platform is critical.
Managing the feedback loop of information gathered throughout this process ensures future releases continue to deliver on the latest user and market needs.
FOCUS:
Continuous integration
Deployment Management
Application lifecycle management
Software Asset Reuse
Compliance and IT Governance
The Deploy phase answers “How do we deploy, maintain and grow the end solution?”
Learn more at:
Continuous Integration with Maven, Flex, Fliunt , and Hudson

Learn more at:
Adobe – Flex
Flex Learning Paths – Designer, Programmer, Manager, Architect
Flex 3 Developer's Guide (web)
Flex Developer Center - Architecture
http://www.cflex.net/
http://flex.org/
Adobe Books
Thank You

http://www.slideshare.net	17
http://punitsahni.blogspot.com	3
http://mycareerandlearnings.blogspot.com	1
http://www.punitsahni.com	1

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

by Punit Sahni on Aug 28, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 22

Statistics

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