WCF, JSON and AJAX for performance and manageability

1. Daniel Fisher
daniel.fisher@devcoach.de
Software Architect | CTO
devocach®
Michael Willers
michael.willers@devcoach.de
Software Architect | CTO
devocach®

2.  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!

3. Performance
Managability
Pitfalls
Summary

5. Development
Beiing Agile
Technical
Design enabling a fast execution of functionality
Code written to be executed with low memory and cpu
utilization
Non-Technical
User Experience
Responsiveness of an application

6. Un-necessary things
Multiple rendering of UI
Multiple transfer of data over the wire
Don‘t repeat yourself

7. HTTP
Ajax

8. XHTML (or HTML) and CSS
ECMAScript/JavaScript
XMLHttpRequest object/IFrame object
XML, JSON
Ajax is not a technology in itself, but a term
that refers to the use of a group of
technologies.

9. Most 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.

10. 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;
}
...

11. ...
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);
}

12. ...
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;
}
}
});
}

13. Works 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?

14. An framework for building rich, interactive
Web experiences and browser-applications
Microsoft AJAX Library
Cross-browser compatible client script framework
ASP.NET AJAX Extensions
Server controls enabling AJAX in ASP.NET
applications
ASP.NET AJAX Futures
Features of future AJAX Extension releases (Betas)
ASP.NET AJAX Control Toolkit
Rich set of server controls and client script
functionality

15. Client Server

16. Microsoft AJAX Library
IE, Firefox, Safari, …)
Browser Compatibility
Asynchronous Communications
Script Core Library
Base Class Library
XHTML/CSS
JSON Serializer WSProxiesXML-HTTP

17. 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();

18. ASP.NET AJAX clients can consume Web
services
ASMX
WCF
ASMX model extended to support JSON
endpoints
Server framework includes JSON serializer
Microsoft.Web.Script.Serialization.JavaScriptConverter
Also includes ASMX front-ends for ASP.NET 2.0
profile service and authentication service

19. <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>

20. {
"Person":
[
{
"id":"1234",
"FirstName":"John",
"LastName":"Doe",
"Address":"21 Jump ST",
"City":"Springfield",
"State":"GA",
"Zip":"55555"
}
]
}

21. Create a service reference
View the generated Proxy
Call the web service

22. Binding for AJAX
webHttpBinding (Serializer for JSON)
HTTP Verb Attributes & URI-Template
Enable REST-APIs
Factory-attribute
Enables configuration-less services
Configuration
Support webHttpBinding as additional endpoint

24. A 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 Highlighting
Intellisense
Compile Time Errors

25. // JavaScript w/o ASP.NET
var obj =
document.getElementById(
‘id_of_object‘);
// JavaScript with ASP.NET
var obj = $Get(‘id_of_object‘);

26. Case Study: vision4health

27. 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.

28. 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);
}

29. Case Study: AUTOonline

30. Browser integration
No History
No Bookmarks
Response-time concerns
Search engine optimization
JavaScript reliability and compatibility
Source code fully exposed to client
Another language, another skill set
Harder to debug
Increased web requests
JSON != Performance
Language Layer InterOp

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

33. Software em versão completa para avaliação
2 incidentes de suporte gratuito profissional
Acesso antecipado às versões beta
software exclusivo: Capacity Planner
actualizações de segurança e service packs
formação gratuita ….e muito mais.
www.microsoft.com/portugal/technet/subscricoes

34. Software em versão completa para avaliação
Suporte técnico 24x7 para incidentes
Acesso antecipado às versões beta
Microsoft Office
Software Assurance
formação gratuita ….e muito mais.
www.microsoft.com/portugal/msdn/subscricoes

35. www.microsoft.com/learning

36. 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:

37. © 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.