Moderni web-kehitys ASP.NETillä

Jouni Heikniemi

Offbeat Solutions

18.1.2012

MODERNI WEB-KEHITYS ASP.NETILLÄ

AGENDA

ASP.NET-kehittäjät, webin osaajat

Kenelle?

Modernien web-tekniikoideneri osa-alueiden palvelintoteutusta

Sisältö?

Niksejä, linkkejä,yleiskäsitys toteutustavoista

Mitä jää käteen?

ASP.NET

<asp:HyperLink ID="hyperLinkBack" runat="server"/>

<asp:GridView id="MyGridView" DataSourceID="MyDataSource1" Runat="Server"/>

<asp:SqlDataSource ID="MyDataSource1" runat="server" ConnectionString="Server=YourServer;uid=YourUID;pwd=YourPWD;database=YourDB" ProviderName="System.Data.SqlClient" SelectCommand="SELECT ID, Name FROM Customer"></asp:SqlDataSource>

<asp:GridView id="MyGridView"DataSourceID="MyDataSource1"AllowSorting="True"AllowPaging="True"Runat="Server"/>

<input type="submit" nam

e="ctl00$body$ctl00$navi

gation$ctl00$buttonFormS

ubmit"

value="Hae" id="ctl00_

body_ctl00_navigation_ct

l00_buttonFormSubmit" />

<input type="hidden" nam

e="__VIEWSTATE" id="__VI

EWSTATE"

value="/wEPZCgpWFN5c3R

lbS5H...” />

<a href="javascript:__do

PostBack('ctl00$body$ctl

00$main$ctl00$listAnnou

ncements$repeaterPagi

ng$ctl06$linkButtonPage'

,'')" ... </a>

ASP.NET

2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012

1.0 1.1 2.0 3.5 4.0 4.5

ASP.NET

2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012

1.0 1.1 2.0 3.5 4.0 4.5

ASP.NET MVC

1.0 2.0 3.0 4.0

ASP.NET MVC

• Perussiisti toteutus Model-View-Controller –mallista

• Erittäin hyvin laajennettavissa

• Lähdekoodi saatavilla

HTML5, CSS3

Öö, se HTML:hän menee sinne clientille?Mitä siellä serverillä nyt oikein tarvitaan?

MODERNIZR• JavaScript-kirjasto

• Saatavilla NuGetilla

• ... Tai www.modernizr.com

• Mahdollistaa HTML5- ja CSS3-ominaisuuksien tuen tunnistamisen tehokkaasti

• Sekä CSS:ssä että JavaScriptissä

• Mahdollistaa puuttuvien ominaisuuksien korvaamisen muilla ratkaisuilla

DATANKÄSITTELY

DEMO: JSON-RAJAPINTA

DEMO: ODATA

ODATA• REST-pohjainen tietolähde, jossa monipuolinen kyselykieli

• www.odata.org

• Serveripää

• .NET-ympäristössä WCF Data Services

• Helpoiten edmx:stä tai omista olioista

• Muille alustoille omia implementaatioitaan

• Client-pää

• JavaScriptissä helposti ihan vain JSONilla

• SDK:t saatavilla useimmille merkittäville alustoille

WEBSOCKETIT

REAALIAIKAINEN KOMMUNIKOINTI

PERINTEINEN POLLAUSTEKNIIKKA

Selain tekee pyynnönaina määrätyin väliajoin

Selain

Palvelin

Latenssi!

”LONG POLLING”

Selain

Palvelin

Palvelin vastaa pyyntöönvasta kun dataa on tullut.Selain tekee heti uuden pyynnön.

WEBSOCKETS

Palvelin

Selain

GET /ws HTTP/1.1 Upgrade: websocket Connection: Upgrade

HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade

WEBSOCKETS

Palvelin

Selain

WEBSOCKETS – STANDARDOINNIN TILA

Palvelin

Selain

RFC 6455

W3C API

WEBSOCKETS - SELAINTUKI

caniuse.com

+ Flash 10!

WEBSOCKETIT MICROSOFT-ALUSTALLA

IIS 8

Windows 8

WCF 4.5 ASP.NET 4.5

IE 10 tai muu hyvin uusi selain

Oma rajapinta Oma rajapinta

... VAI VIELÄ VÄHÄN KORKEAMMALLA TASOLLA?

IIS 8

Windows 8

WCF 4.5 ASP.NET 4.5

IE 10 tai muu hyvin uusi selain vanhempikin käy

Oma rajapinta Oma rajapintaSignalR

SignalR / JS

WebSocketsWebSockets /long polling

WEBSOCKETS-YHTEENVETO• Uusi, standardi kommunikaatiotapa webin yli

• Nopea

• Käyttää http/https-yhteyksiä

• Ei tietoliikenteellisesti täysin ongelmaton, mutta pieksee perussocketit 6-0

• Microsoftin palvelinpäässä kolme toteutusarkkitehtuuria:

• WCF (matalamman tai korkeamman tason)

• ASP.NET (matalamman tai korkeamman tason)

• SignalR (kaikkein korkeimman tason)

WEBIN UUSI AIKA?

Microsoft on avautunut. Avaudu nyt sinäkin.

OPETTELE...

• JavaScript-ohjelmointi

• DOM

• jQuery

• Tiedon välittäminen (JSON, OData)

• HTTP

• Avoimen lähdekoodin projektien käyttö: GitHub, CodePlex, NuGet ym.

KIITOS! jouni@offbeat.fiwww.heikniemi.net/hardcoded

@jouniheikniemi