Upload
brasen
View
32
Download
0
Embed Size (px)
DESCRIPTION
Moderni web-kehitys ASP.NETillä. Jouni Heikniemi Offbeat Solutions 18.1.2012. Agenda. ASP.NET-kehittäjät, webin osaajat. Kenelle?. Modernien web-tekniikoiden eri osa-alueiden palvelintoteutusta. Sisältö?. Niksejä, linkkejä, y leiskäsitys toteutustavoista. Mitä jää käteen?. ASP.NET. - PowerPoint PPT Presentation
Citation preview
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! [email protected]/hardcoded
@jouniheikniemi