Web 2.0 mit ASP.NET 2.0

Daniel Fisher(lennybacon)

newtelligence AG

Michael Willers

newtelligence AG

Was ist Web 2.0

„Web 2.0 is a marketing slogan“Russell Shaw (ZDNet)

2

Was ist Web 2.0

„Web 2.0, a phrase coined by O'Reilly Media in 2004, refers to a supposed second-generation of Internet-based services — such as social networking sites, wikis, communication tools, and folksonomies — that let people collaborate and share information online in previously unavailable ways.“

Wikipedia

3

2.0 ohne Web?

4

Was ist Web 2.0?

5

Technologiespektrum

6

7 Tennets of Web 2.0• The Web As Platform• Architecture of participation• Information as the Core Capability, Not Software• End of Discrete Software Releases• Rich User Experiences• Fundamentally Federated Software Systems• Lightweight Programming Models

7

Architecture of Participation• Die aktive Teilnahme von „Usern“ am

Geschehen...• Wikis• Flickr• Blogs, Kommentare & Abonnements• Foren• Chats

8

Architecture of Participation

• „User“ als Co-Developer sehen• Feedback• Contributions

9

Information as core capability

• Nie vergessen: Wir arbeiten vielleicht nicht direkt mit Menschen. Aber Menschen arbeiten direkt mit unser Arbeit.

10

Information as core capability

• Daten und Funktionalität anbieten – nicht eine einschränkende Softwarelösung• Vielleicht will jemand unsere Daten mit

anderen Daten verknüpfen und eine neue Anwendung entsteht

11

End of Discrete Software Releases

• Geschäftsprozesse sind sich in einer Umgebung entwickelnde, wachsende und veränderbare Abläufe

• Software sollte ebenbürtig lebendig sein• Software als Dienstleistung, nicht als

Produkt• Kostengünstige skalierbarkeit

12

End of Discrete Software Releases

• Formaler Prozess:• Unit Tests• Integration Tests• ...

• „Beta“ als Teil des Development lifecycle• User partizipieren als Tester• User haben „Einfluss“

13

Rich User Expiriencemultiple devices

• Computer• Mobile

• PDA• Phone

• Home Electronics• Media Center• TV• ...

14

Rich User Expirience User Interfaces

• XHTML, CSS & Javascript• Flash• Windows Presentation Foundation

(WPF)

15

Rich User Expirience User Interfaces

• Animation• Drag‘n‘Drop• ...

• Gefühlte Geschwindigkeit

• „...und Bunt muss es sein ...“

16

Fundamentally Federated Software Systems

Clients: Mashups• Fasst Informationen zusammen und

kombiniert sie – wie ein Portal• Modularität und Wiederverwendung

von backend Funtionalität und Daten

• Das LEGO-Prinzip

17

Fundamentally Federated Software Systems

Kommunikation• Kommunikationsmuster

• Mensch zu Mensch• Mensch zu Computer• Computer zu Mensch• Computer zu Computer

18

Fundamentally Federated Software Systems

Kommunikation• Cross-Browser-Kompatibilität• Ist ein Client eines Web Services

nicht auch ein device?• Und wenn ein anderer Client auf einer

anderen plattform implementiert wird?

• Interoperabilität

19

Fundamentally Federated Software Systems

Backend: Datenhaltung• Kontrollierte offerierung von Daten

ohne kontrolle über deren Nutzung• Syndication• Wiederverwendbarkeit

20

Klassische Topologie

21

Mashup Topologie

22

Anforderungen and Backend• Policy-negotiated behavior

• Backend definiert Kommunikation

• Explicitnes of boundaries• Anfrage liefert kopie einer Datenmenge!

• Autonomy• Kapselung von Datenzugriffs- und Geschäfts-

Logik

• Contract/Schema Exchange• Backend definiert Funktionalität

23

SOA und Web 2.0?

• Unterschied: Sozialer und collaborativer Anspruch• Aber sozialen und collaborative

Ansprüche darf eine SO-Anwendung auch haben!

24

Kommunikation ist der Schlüssel

• Aber wie gestaltet man Kommunikation interoperabel und genügt den Geschwindigkeitsansprüchen der „User“?

25

Problemanalyse

• Wie funktioniert Kommunikation?• Und in der realen Welt?

• Priorisiert geordnet und Asynchron• „Anti-Request-Reply“

• Mit HTTP?

26

Asynchron – Wo?

27

Asynchrone Kommunikation

• Präsentationsschicht• Programmschicht• Infrastrukturschicht

28

Asynchrone Präsentationsschicht

• Nach dem initialen Request/Response und dem anzeigen der Seite wird bei jedem „Klick“ ein Request/Response ausgeführt.

• Im „Hintergrund“Daten übertragen.• Nur Daten übertragen die benötigt werden.

• Keine Navigation, Grafiken oder Markup – Daten.

30

ASP.NET ClientSideCallbacks

ASP.NET ClientSideCallbacks<html xmlns="http://www.w3.org/1999/xhtml"><head id="Head" runat="server“><script type="text/ecmascript">function ReceiveServerData(rValue){ document.getElementById('Results').innerHTML = rValue; }</script></head><body> <form id="form1" runat="server“> <asp:ListBox ID="ListBox1" Runat="server“> <asp:ListItem Text="Cheese" Value="Cheese" /> </asp:ListBox><br />

Items in stock: <div id="Results" runat="server“ />

</form></body>

ASP.NET ClientSideCallbackspublic partial class _Default : Page, ICallbackEventHandler{ protected string returnValue; protected void Page_Load(object sender, EventArgs e) { string cb = Page.ClientScript.GetCallbackEventReference( this, "arg", “ReceiveServerData", ""); ListBox1.Attributes["onchange"] = cb.Replace(

"arg", "this.options[this.selectedIndex].text"); } public void RaiseCallbackEvent(string eventArgument){ returnValue = "10"; } public string GetCallbackResult(){ return returnValue; }

}

RemoteScripting vs. AJAX• RemoteScripting

• Ein Java Applet/ActiveX Control leitet clientseitige Anfragen an den Server

• Nachteil: Java/ActiveX benötigt• Vorteil: Broadcast möglich

• AJAX• Javascript: Events und XmlHttpRequests

• Vorteil: NUR Scriptingfähigkeit des Browsers• Nachteil:

• Keine „Events“ vom Server• Ugly Code...

AJAXvar 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• Funktioniert nur mit „Ugly Hacks“

• Oder nur mit einem Browser-Typ• Javascript ist nicht typisiert• ...

• Codieren wie Ende der 90er?

Welcome to WEB 0.5?

Lightweight Programming Models Atlas

• Eine Serverseitiges Framework für AJAX• Plattform und Browser-Kompatibel• Objektorientierte Serverseitige API• Declaratives model

• Steuerelemente

• Toolunterstützung für Designer und Entwickler

• Kostenlos, Supported, Einfach zu benutzen

37

ASP.NET Atlas

Lightweight Programming Models Atlas Code

<atlas:ScriptManager ID="sm1" runat="server" EnablePartialRendering="true" /><atlas:UpdatePanel ID="up1" runat="server"> <ContentTemplate> <asp:Button ID=“B" Text="GetData" runat="server" OnClick=“B_Click" /> <br /> <asp:Label ID="Message" runat="server" /> </ContentTemplate></atlas:UpdatePanel>public partial class _Default : System.Web.UI.Page { protected void B_Click(object sender, EventArgs e) { Message.Text = "Button1 was clicked"; }}

Asynchrone Programmschicht

• .NET • Threads• Timer• IAsyncResult design pattern & Delegate Invocation• AsyncCallbacks & Event-based Asynchronous

Pattern

• ASP.NET• ASP.NET Async Pages• ASP.NET Async Tasks

39

40

Async Pages & Tasks mit ASP.NET

Asynchrone System-Architekturen

• Synchron

• Asynchron

Entkoppelung durch MessageQueing

ASP.NET und MessageQueing

• Anfrage in RequestQueue schreiben• Warten auf Antwort in

ResponseQueueusing (MessageQueue responseQueue = new MessageQueue(queuePath)){ responseQueue.MessageReadPropertyFilter.CorrelationId = true;  Message objMessage = responseQueue.ReceiveByCorrelationId( correlationId, new TimeSpan(0, 0, 0, timeOut), MessageQueueTransactionType.None);}

WCF und MSMQ• Windows Communication Foundation (WCF) sieht

MSMQ einfach als Transport-Kannal wie TCP oder HTTP.• WCF ermöglicht es erst zum Deployment konfigurativ

den Transport zu wählen.

43

44

<?xml version="1.0" encoding="utf-8" ?><configuration> <system.serviceModel> <services> <service name="FullfilmentServiceAgent"> <endpoint address="net.msmq://localhost/private/Fullfilment" binding="netMsmqBinding" contract="IFullfilmentService" /> </service> </services> </system.serviceModel></configuration>

45

MSMQ