INT07WCF, JSON and AJAX for performance and manageabilityDaniel Fisherdaniel.fisher@devcoach.deSoftware Architect | CTO devocach®

Michael Willersmichael.willers@devcoach.de

Software Architect | CTO devocach®

www.devcoach.com Experts each with 10+ years experience

Development Architecture Consulting & Coaching

Community activists Annual Software Developer Community Event

Deep knowledge and skills on Service Orientation & Agile Methods Web & Data access Security & Deployment

Real Projects – Not just cool demos!

AgendaPerformanceManagabilityPitfallsSummary

Performance

What is PerformanceDevelopment

Beiing Agile

TechnicalDesign enabling a fast execution of functionalityCode written to be executed with low memory and cpu utilization

Non-TechnicalUser ExperienceResponsiveness of an application

What makes bad performance?

Un-necessary thingsMultiple rendering of UIMultiple transfer of data over the wire

Don‘t repeat yourself

HTTP vs. AJAXHTTP

Ajax

The Ajax technique soupXHTML (or HTML) and CSSECMAScript/JavaScriptXMLHttpRequest object/IFrame objectXML, JSON

Ajax is not a technology in itself, but a term that refers to the use of a group of technologies.

Ajax HistoryMost of the technologies that enable Ajax started with Microsoft's initiatives in developing Remote Scripting in 1998.Microsoft created the XMLHttpRequest object in IE 5 and first used it in Outlook Web Access supplied with Exchange 2000. 2003 not long before Microsoft introduced Callbacks in ASP.NET.“AJAX” was first used by Jesse James Garrett in February 2005 as a shorthand term to the suite of technologies as a proposal to a client.

AJAX w/o ASP.NET Pt. 1

var request = new Request(); function _getXmlHttp(){ /*@cc_on @*/ /*@if (@_jscript_version >= 5)

var progids=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] or (i in progids) {

try { return new ActiveXObject(progids[i]) }catch (e) {}

} @end @*/ try { return new XMLHttpRequest();} catch (e2) {return null; }}

function Request() { this.Get = Request_get; this._get = _getXmlHttp(); if (this._get == null) return;}

...

AJAX w/o ASP.NET Pt. 2

...ReadyState = { Uninitialized: 0, Loading: 1, Loaded:2, Active:3, Completed: 4 }HttpStatus = { OK: 200, NotFound: 404 }

function Request_get(url, f_change, method) {if (!this._get) return;if (method == null) method="GET";if (this._get.readyState != ReadyState.Uninitialized)

this._get.abort() this._get.open(method, url, true);if (f_change != null)

var _get = this._get;this._get.onreadystatechange = function(){ f_change(_get);}

this._get.send(null);}

AJAX w/o ASP.NET Pt. 3

...function ajaxInnerHTML(method, args, elmId){ request.Get( url + "?m=" + escape(method) + "&p=" + escape(args), function(result) { if (result.readyState!=ReadyState.Complete)

return;

if (result.status==HttpStatus.OK && result.responseText != "")

{ elm = document.getElementById(elmId); if(elm)

{ var response = result.responseText;

elm.innerHTML = response; } }

});}

AJAX w/o ASP.NET - SummaryWorks just with „ugly hacks“?

Or just in one browser (version)Javascript is not type safe

Code like in the 90‘s...Welcome to WEB 0.5?

What is ASP.NET AJAX?An framework for building rich, interactive Web experiences and browser-applications

Microsoft AJAX LibraryCross-browser compatible client script framework

ASP.NET AJAX ExtensionsServer controls enabling AJAX in ASP.NET applications

ASP.NET AJAX FuturesFeatures of future AJAX Extension releases (Betas)

ASP.NET AJAX Control ToolkitRich set of server controls and client script functionality

AJAX Topology

Client Server

HTML, XML, JavaScript, CSS

ASP.NET

Ajax ExtensionsApp Services BridgeWeb Services Bridge

AJAX Enabled ControlsControl ToolkitAjax Control Toolkit

Ajax Control Extender

Microsoft Ajax LibraryScript Core

Base Class LibraryComponent Model

UI Framework

Microsoft AJAX Library

Architecture

IE, Firefox, Safari, …)

Browser Compatibility

Asynchronous Communications

Script Core Library

Base Class Library

XHTML/CSS

JSON Serializer WSProxiesXML-HTTP

AJAX with ASP.NET

var request = new Sys.Net.WebRequest();request.set_url('Default.aspx');request.add_completed( function(response, args){ if (response.get_statusCode() == 200) { window.alert(response.get_responseData()); } });request.invoke();

ASP.NET AJAX Web ServicesASP.NET AJAX clients can consume Web services

ASMXWCF

ASMX model extended to support JSON endpointsServer framework includes JSON serializer

Microsoft.Web.Script.Serialization.JavaScriptConverter

Also includes ASMX front-ends for ASP.NET 2.0 profile service and authentication service

XML

<Person><id>1234</id><FirstName>John</FirstName><LastName>Doe</LastName><Address>21 Jump ST</Address><City>Springfield</City><State>GA</State><Zip>55555</Zip>

</Person>

JSON

{"Person":

[{

"id":"1234","FirstName":"John","LastName":"Doe","Address":"21 Jump ST","City":"Springfield","State":"GA","Zip":"55555"

}]

}

AJAX & Web Services

Create a service referenceView the generated ProxyCall the web service

Demo

AJAX & WCF Web ServicesBinding for AJAX

webHttpBinding (Serializer for JSON)HTTP Verb Attributes & URI-Template

Enable REST-APIsFactory-attribute

Enables configuration-less servicesConfiguration

Support webHttpBinding as additional endpoint

Managability

What is managabilityA code base that is easy to maintain, extend and localize.Code that tells you where to find the error if one appears.

A Development Environment that supports the developer

Syntax HighlightingIntellisenseCompile Time Errors

Less Code = Less Bugs

// JavaScript w/o ASP.NETvar obj = document.getElementById( ‘id_of_object‘);

// JavaScript with ASP.NETvar obj = $Get(‘id_of_object‘);

Less Code

Case Study: vision4health

Demo

AJAX Library Debugging Objects

Sys.Debug.assert(condition, message, displayCaller)

Checks for a condition - if the condition is false, displays a message and prompts to break into the debugger.

Sys.Debug.clearTrace() Clears all trace messages from the TraceConsoletextarea element.

Sys.Debug.traceDump(object, name) Dumps an object to the debugger console and to the TraceConsoletextarea element, if available.

Sys.Debug.fail(message) Displays a message in the debugger's output window and breaks into the debugger.

Sys.Debug.trace(text) Appends a text line to the debugger console and to the TraceConsoletextarea element, if available.

Debugger API internals

function Sys$_Debug$_appendConsole(text) { // VS script debugger output window. if ((typeof(Debug) !== 'undefined') && Debug.writeln) { Debug.writeln(text); } // Firebug and Safari console. if (window.console && window.console.log) { window.console.log(text); } // Opera console. if (window.opera) { window.opera.postError(text); } // WebDevHelper console. if (window.debugService) { window.debugService.trace(text); }

Debug & Trace

Case Study: AUTOonline

Demo

PitfallsBrowser integration

No HistoryNo Bookmarks

Response-time concernsSearch engine optimizationJavaScript reliability and compatibilitySource code fully exposed to clientAnother language, another skill setHarder to debugIncreased web requests

JSON != Performance Language Layer InterOp

SummaryMicrosoft ASP.NET AJAX enables easy develpment of „Application“ that live in the Web 2.0AJAX still means server round-trips, so design carefullyIt‘s a cool tool

Thank you!

Outros RecursosPara Profissionais de TI

Beneficie de 40% de desconto.

Faça a sua Subscrição em

www.gettechnetplus.com e utilize o

promocode TLNW08

Software em versão completa para avaliação2 incidentes de suporte gratuito profissionalAcesso antecipado às versões betasoftware exclusivo: Capacity Planneractualizações de segurança e service packsformação gratuita ….e muito mais.

www.microsoft.com/portugal/technet/subscricoes

Outros RecursosPara Programadores

Software em versão completa para avaliaçãoSuporte técnico 24x7 para incidentesAcesso antecipado às versões betaMicrosoft OfficeSoftware Assuranceformação gratuita ….e muito mais.

www.microsoft.com/portugal/msdn/subscricoes

Outros RecursosCertificações

www.microsoft.com/learning

Até 30 Junho 08, beneficie de uma

segunda tentativa para fazer o seu

exame de certificação!

Questionário de Avaliação Passatempo!

Complete o questionário de avaliação e devolva-o no balcão da recepção…

…e habilite-se a ganhar 1 percurso de certificação por dia! Oferecido por:

…e habilite-se a ganhar 1 percurso de certificação MCTS por dia! Oferecido por:

…e habilite-se a ganhar 1 curso e exame por dia! Oferecido por:

Session Code Session Name

© 2008 Microsoft Corporation. Todos os direitos reservados.Esta apresentação destina-se apenas a fins informativos.A MICROSOFT NÃO FAZ GARANTIAS, EXPRESSAS OU IMPLÍCITAS NESTA APRESENTAÇÃO.