Enterprise Software does not have to be boring

Enterprise Software does not have to be boring

Building RIAs for Enterprise 2.0 with Silverlight Sanju Sunny

Building RIAs for Enterprise 2.0

with Silverlight

Sanju Sunny

Agenda Who is Avanade? Enterprise 2.0 and RIA Demos Silverwhat? Even More Demos Hands-On – ”Hello World 2.0” Lessons from the field The Near Future

Who is Avanade?

Enterprise 2.0 and RIA

Demos

Silverwhat?

Even More Demos

Hands-On – ”Hello World 2.0”

Lessons from the field

The Near Future

Increase adoption of RIA technologies Improve User Experience for Enterprise Apps Copyright © 2009 Avanade/Accenture All Rights Reserved.

Increase adoption of RIA technologies

Improve User Experience for Enterprise Apps

Who is Avanade? Joint venture between Accenture & Microsoft founded in 2001 Avanade is the premier global technology integrator for Microsoft solutions in the enterprise 42 locations worldwide Global Delivery Network Technology Experts Strong Assets

Joint venture between Accenture & Microsoft founded in 2001

Avanade is the premier global technology integrator for Microsoft solutions in the enterprise

42 locations worldwide

Global Delivery Network

Technology Experts

Strong Assets

‘ Power of 3” : A Formidable Partnership Industry insight and business acumen focused on helping clients become high performance organizations Industry Solutions Cross industry and industry-specific solution s Horizontal Solutions/Accelerators Solutions that speed the design-build-run phase of solution implementation Deep Microsoft technology skills Solutions, Offerings and Assets Assets, a proven approach and certified experts ensure improvements across infrastructure and applications Enterprise software platform Microsoft Products/Engineered Platforms Solutions and services are built on the Microsoft software platform and servers

Avanade in Singapore

Generic Marketing Video #1

Generic Marketing Video #1

VIDEO – Intro

VIDEO – Intro

Why RIA? The need for more sophisticated Web-based applications will drive the adoption of Rich Internet Applications. Companies looking to differentiate themselves from the competition are focusing on design and customer experience.

The need for more sophisticated Web-based applications will drive the adoption of Rich Internet Applications.

Companies looking to differentiate themselves from the competition are focusing on design and customer experience.

DEMO – Contact Trace

DEMO – Contact Trace

What is Enterprise 2.0? “ A web-based environment that enhances business communication , business decision making and business innovation through: Easier and tailored access to business information , expertise and knowledge Faster and more flexible information and knowledge authoring and sharing Lower-cost application and system deployment ” BI Research

“ A web-based environment that enhances business communication , business decision making and business innovation through:

Easier and tailored access to business information , expertise and knowledge

Faster and more flexible information and knowledge authoring and sharing

Lower-cost application and system deployment ” BI Research

RIA + Enterprise 2.0 More perspectives: “ Enterprise 2.0 demands light-weight software that is easy to adopt, use and integrate ” Sandhill Group “ Liberation of previously inaccessible information ” “ Leverages collective intelligence of many”

More perspectives:

“ Enterprise 2.0 demands light-weight software that is easy to adopt, use and integrate ” Sandhill Group

“ Liberation of previously inaccessible information ”

“ Leverages collective intelligence of many”

DEMO – Microsoft Common User Interface for Healthcare

DEMO – Microsoft Common User Interface for Healthcare

DEMO – Rich Island Example

DEMO – Rich Island Example

RIA Paradigm Form submission is transparent to user Validation, interaction, and flow code on the client side Only parts of page are updated at a time Richer interactivity Asynchronous Stateful Shift from page based web applications Wide adoption of formats and architectures (XML, SOAP, REST, E4X, RSS)

Form submission is transparent to user

Validation, interaction, and flow code on the client side

Only parts of page are updated at a time

Richer interactivity

Asynchronous

Stateful

Shift from page based web applications

Wide adoption of formats and architectures (XML, SOAP, REST, E4X, RSS)

Benefits of RIA Increased user stickiness Increased user interface responsiveness Reduced abandonment rate Reduced page load, server load, & network traffic Process simplification (fewer pages per process) Deployment simplification (integrates by design with SOA) Offline capabilities (users can be occasionally connected)

Increased user stickiness

Increased user interface responsiveness

Reduced abandonment rate

Reduced page load, server load, & network traffic

Process simplification (fewer pages per process)

Deployment simplification (integrates by design with SOA)

Offline capabilities (users can be occasionally connected)

RIA Real World Case Studies 70% application performance increase 50%-90% bandwidth/network reductions 70% decrease in call center calls 50% increase in leads generated 50% increase in revenue booked Copyright © 2007 Accenture All Rights Reserved.

70% application performance increase

50%-90% bandwidth/network reductions

70% decrease in call center calls

50% increase in leads generated

50% increase in revenue booked

RIA Technology Map Copyright © 2007 Accenture All Rights Reserved. Rich Internet Applications Runtime-based Browser-based Plug-in WPF AIR Java Web Start AJAX Silverlight Flex JavaFX JavaScript AJAX Frameworks Custom AJAX Microsoft Adobe Sun WPF Silverlight Microsoft

Introducing Silverlight Microsoft® Silverlight™ is a cross-browser, cross-platform, and cross-device plug-in for delivering the next generation of media experiences and rich interactive applications for the Web.

Introducing Silverlight 5MB Browser Plugin Current Version – Silverlight 2.0 Supports major browsers and OS C#/.NET in the browser!

5MB Browser Plugin

Current Version – Silverlight 2.0

Supports major browsers and OS

C#/.NET in the browser!

One Framework to Rule them All WPF Surface Apps Silverlight Web Apps Windows Apps

Features and Benefits Rich Media Windows Media Adaptive Streaming DeepZoom Design Expression Suite Vector Graphics Animations Template Styles Control library Connectivity XML Web Services WCF Sockets AJAX Development C# in the browser! Base Class Library WPF UI Lite Sandbox Security Storage

Rich Media

Windows Media

Adaptive Streaming

DeepZoom

Design

Expression Suite

Vector Graphics

Animations

Template Styles

Control library

Connectivity

XML Web Services

WCF

Sockets

AJAX

Development

C# in the browser!

Base Class Library

WPF UI Lite

Sandbox Security

Storage

VIDEO – DeepZoom

VIDEO – DeepZoom

Hands On – DeepZoom

Hands On – DeepZoom

DEMO – ADvantage

DEMO – ADvantage

DEMO – Annotation Panel

DEMO – Annotation Panel

The Return of the Designer Designer-Developer Workflow User Experience is KEY

Designer-Developer Workflow

User Experience is KEY

RIA = Designers + Developers XAML Design Develop

RIA = Designers + Developers

Better Tools for Better Applications Expression Blend Expression Design Media Visual Studio Encoder

Better Tools for Better Applications

The Expression Suite Visual Studio 2008

The Expression Suite Expression Blend

RIA = Designers + Developers XAML Design Develop

The Expression Suite Expression Media

The Expression Suite Expression Web

The Expression Suite Expression Design

The Expression Suite Expression Encoder

The Expression Suite DeepZoom Composer

HANDS ON – Anatomy of a Silverlight Project Web Services Data Binding Templating Visual Studio XAML

HANDS ON – Anatomy of a Silverlight Project

Hello World! Create a new Silverlight Project Files overview XAML VS.NET and Expression Blend Event Handlers BreakPoints

Create a new Silverlight Project

Files overview

XAML

VS.NET and Expression Blend

Event Handlers

BreakPoints

HANDS ON – Rich Media

HANDS ON – Rich Media

Rich Media Add a Video Control the Video Add an effect Transformations

Add a Video

Control the Video

Add an effect

Transformations

HANDS ON – Interactivity

HANDS ON – Interactivity

Interactivity Responding to Events Storyboards

Responding to Events

Storyboards

HANDS ON – Refactoring

HANDS ON – Refactoring

Refactoring Scenarios Abstraction into User Controls Visual States Design

Scenarios

Abstraction into User Controls

Visual States

Design

HANDS ON – Connectivity

HANDS ON – Connectivity

Connectivity Creating a WCF Service Create Operation and Data Contracts Automatic Properties Async Invocation

Creating a WCF Service

Create Operation and Data Contracts

Automatic Properties

Async Invocation

HANDS ON – Working with Data

HANDS ON – Working with Data

Working with Data Data Binding in WPF/Silverlight The power of templates

Data Binding in WPF/Silverlight

The power of templates

HANDS ON – Designing with Templates

HANDS ON – Designing with Templates

Working with Data Control Templates Styles

Control Templates

Styles

The Journey So Far… Anatomy of a Silverlight Project - Hello World! Rich Media Interactivity Refactoring Connectivity Working with Data Designing with Templates

Anatomy of a Silverlight Project - Hello World!

Rich Media

Interactivity

Refactoring

Connectivity

Working with Data

Designing with Templates

Lessons from the Field Composite Applications Keep size down Break up into logical parts Use Interfaces to define contracts Main App IModule IModule IModule Sales Billing Inventory

Composite Applications

Keep size down

Break up into logical parts

Use Interfaces to define contracts

Lessons from the Field Dynamic Assembly/Data Loading Load modules on demand Even better, prefetch data when user is idle Client Cache Screen 1 Screen 2 Screen 3

Dynamic Assembly/Data Loading

Load modules on demand

Even better, prefetch data when user is idle

Lessons from the Field Versioning Version check on app launch Manifest file + local cache Client Cache Server Cache

Versioning

Version check on app launch

Manifest file + local cache

Lessons from the Field Configuration Management Config file support Initialize on load Client Server <xml/>

Configuration Management

Config file support

Initialize on load

Lessons from the Field Diagnostics and Trace Avanade Silverlight Accelerator

Diagnostics and Trace

Avanade Silverlight Accelerator

Planning for large RIA Projects Architecture is important User Experience is important Form + Function Iterative/Agile development model Involve key stakeholders early/often Prototype It Estimation models need adjustment

Architecture is important

User Experience is important

Form + Function

Iterative/Agile development model

Involve key stakeholders early/often

Prototype It

Estimation models need adjustment

Things to watch out for Access to local resources from sandbox Interact with HTML DOM and ActiveX Use local Web Services Development ramp-up time Needs designers + developers No 3D support currently Market penetration is small although rising Must be connected, no offline mode Usability, deep linking, Export to Excel etc

Access to local resources from sandbox

Interact with HTML DOM and ActiveX

Use local Web Services

Development ramp-up time

Needs designers + developers

No 3D support currently

Market penetration is small although rising

Must be connected, no offline mode

Usability, deep linking, Export to Excel etc

‘ I didn't know it could do that!’ #1 Reflection.Emit Create classes in memory E.g. Generate entity classes from schema Fast and strongly typed

Reflection.Emit

Create classes in memory

E.g. Generate entity classes from schema

Fast and strongly typed

‘ I didn't know it could do that!’ #2 LINQ Query almost anything (objects/xml/databases) Find max in collection Filtering collections (e.g. get orders with total <500 ) int[] numbers = { 5, 4, 1, 3, 9, 8, 6, 7, 2, 0 }; int maxNum = numbers. Max (); var orders = from c in customers, o in c.Orders where o.Total < 500.00M select new {c.CustomerID, o.OrderID, o.Total};

LINQ

Query almost anything (objects/xml/databases)

Find max in collection

Filtering collections (e.g. get orders with total <500 )

‘ I didn't know it could do that!’ #2 Convert xml snippet to typed object tree Bike Bike Wheel Wheel Wheel Wheel <Bike> <Wheel/> <Wheel/> </Bike> <Bike> ….

Convert xml snippet to typed object tree

Guidelines and Best Practices Respect the User High Information Density is good Less is more, don’t go overboard Metaphor Overload Affordances Support Deep Linking & Searchable Content Typography - Flashing Pink Text on Green Background Usability + Aesthetics Hire a Designer

Respect the User

High Information Density is good

Less is more, don’t go overboard

Metaphor Overload

Affordances

Support Deep Linking & Searchable Content

Typography - Flashing Pink Text on Green Background

Usability + Aesthetics

Hire a Designer

On the horizon…. Copyright © 2007 Accenture All Rights Reserved. SL1 2006 SL1.1 2007 SL2b 2008 SL2.0 2008 SL3 Beta MAR 2009

New in Silverlight 3! Copyright © 2007 Accenture All Rights Reserved.

SNEAK PREVIEW – Touch Computing

SNEAK PREVIEW – Touch Computing

On the Web www.silverlight.net/GetStarted/ Download Development and Design Tools Essential Tools: Visual Studio Tools for Silverlight http://www.microsoft.com/downloads/details.aspx?FamilyId=50A9EC01-267B-4521-B7D7-C0DBA8866434&displaylang=en Expression Studio http://www.microsoft.com/downloads/details.aspx?familyid=32A3E916-E681-4955-BC9F-CFBA49273C7C&displaylang=en

www.silverlight.net/GetStarted/

Download Development and Design Tools

Essential Tools: Visual Studio Tools for Silverlight http://www.microsoft.com/downloads/details.aspx?FamilyId=50A9EC01-267B-4521-B7D7-C0DBA8866434&displaylang=en Expression Studio http://www.microsoft.com/downloads/details.aspx?familyid=32A3E916-E681-4955-BC9F-CFBA49273C7C&displaylang=en

Think BIG!

Think BIG!

Questions? [email_address]

Questions?

Questions? [email_address]

Questions?