Deze presentatie werd gegeven bij de sessie die we gaven voor de 2de en 3de jaars studenten van het graduaat informatica aan het IVO te Brugge. In deze presentatie behandelden we 3 grote onderwerpen: HTML 5, ASP.NET MVC en Windows Azure.

2. ASP.NET MVC

5. Browser vergelijking

6. Het verschil in model tussen xhtml, html4 en html5

7. Database op de client

8. Oude browsers doen werken met html5

9. De nieuwe form types

11. Voordelen van ASP.NET MVC

12. URL Routing

14. Het klassiek IT capaciteitsprobleem tov de capaciteit in een cloud model

15. Uit wat bestaat cloud computing?

16. Enkele softwarepakketten bespreken die nu in de Cloud draaien

17. Windows Azure : Platform as a service

18. De volledige azure architectuur bespreken (webroles, workerroles, vmroles, tables, blobs, queues, ...)

19. De verschillende role modellen

20. Azure storage in de diepte bekijken

21. De werking van de queue bespreken

22. De werking van de Azure content delivery network bespreken

23. De azure AppFabric caching bespreken

24. SQL in de cloud

26. HTML5beschikbaar op ... Desktop : Windows, Mac, Linux Web : IE9, Chrome, FF, Opera, Safari, ... Mobile: iOS, Android, Blackberry 5+, Symbian 5, webOS, Windows Phone 7 (na de zomer van 2011), ...

27. HTML5 Doelstelling 1x programmeren, overal ter beschikking stellen cross platform

28. Gratis HTML5 boek http://diveintohtml5.org

29. HTML5 Wanneer is het klaar ? http://ishtml5readyyet.com/ Volgens het W3C in 2014 defintief klaar

30. HTML5 Test Drive http://ie.microsoft.com/testdrive/ Internet Explorer 9 Firefox 4 beta

31. A more beautiful web ... Alles wat je ongeveer met HTML 5 kunt doen http://ie.microsoft.com/testdrive/Views/SiteMap/Default.html

32. HTML5 – Nieuwe HTML tags De <div> tag heeft nu verchillende varianten gekregen

33. DEMOSymantic Markup

34. Het verschil in model tussen vroeger en HTML 5 ...

35. Old school Model Server Gebruiker browser HTTP GET/POST ASP.NET Dynamischgegenereerde HTML Database DB

36. AJAX Model Server Gebruiker HTTP GET/POST ASP.NET browser Dynamischgegenereerde HTML HTTP GET/POST WCF (json, xml, ...) JS XML Data Database DB

37. DEMOOld School Ajax

38. HTML5 Model Server Gebruiker HTTP GET ASP.NET browser Dynamischgegenereerde HTML HTTP GET WCF (json, xml, ...) JS XML Data Database Lokale JS Database DB DB

39. HTML5 – Local Storage

40. DEMOHTML5 Local Storage

41. Wat met oude browsers en HTML5 ? modernizr http://modernizr.com

42. Modernizr toch HTML5 bij oude browsers Detecteer ALTIJD features, geen browsers!!!

43. DEMOModernizr + NuGet in VS2010

44. Nieuwe form input types <input type=“text” /> <input type=“search” /> <input type=“tel” /> <input type=“url” /> <input type=“email” /> <input type=“datetime” /> <input type=“date” /> <input type=“month” /> <input type=“time” /> <input type=“datetime-local” /> <input type=“number” /> <input type=“range” /> <input type=“color” />

45. Nieuwe form input types Waarom ?

46. HTML5 + CSS3 + JS = Common Application Platform Desktops, Tablets, Mobile, ...

47. HTML5 Model (offline apps iPhone, iPad, WP7, Android, ...) Apple Device Eenmaligeinstallatie App Engine App Store HTTP GET WCF (json, xml, ...) JS XML Data Sync wanneer WIFI of 3G beschikbaar is Server Lokale JS Database Database DB DB

48. DEMOiPhone website

49. PhoneGab Open source packager die HTML5 + javascript omzet naar native code (iOS, Android, RIM, Palm, Symbian)

50. In de nabije toekomst ... “web workers” De mogelijkheid om parallel meerdere script te runnen via Threading op de client.

51. In de nabije toekomst ... “web sockets” Full duplex communicatie over een enkele TCP socket (via poort 80)

52. ASP.NET MVC

53. Het design pattern Het patroonheeft 3 belangrijkecomponenten (objecten) Het is eenalternatief op asp.net forms Het is gebouwdbovenop asp.net forms Maaktgebruik van alle asp.net functionaliteiten System.Web.Mvc is de main assembly Business layer, DAL, … Model View Controller Object datdientvoor de visualisatie Object dat elk event opvangtdatveroorzaaktwordt door eengebruikersactie. Dit object raadpleegttelkens het model object en het retourneerttelkenseen view object

54. Model – View - Controller Model : Dit zijn de objecten die de uitvoering van de applicatie voor hun rekening nemen (Dit kan het opslaan van gegevens in de DB zijn, maar kan ook een wiskundige optelsom zijn). Dit wordt soms ook de Business Layer genoemd. M.a.w. Alle logica die niets met de interface te maken heeft. Controller : Dit object verwerkt de actie van de gebruiker, stuurt de vraag van de gebruiker door naar de model, krijgt van het model een antwoord terug en stuurt dit antwoord door naar de view. View : Dit is het object dat enkel maar de User Interface weergeeft (html). Doorgaans wordt de view gemaakt door de gegevens dat hij krijgt van de Model.

55. De voordelen van ASP.NET MVC Betere scheiding tussen interface en Business laag Maximale controle over de html Complexe routing scenario’s mogelijk Betere ondersteuning voor Test-Driven development Werkt beter tussen designer en developer

56. Wat niet wordt gebruikt bij ASP.NET MVC Postbacks View States Events (on click events bv) Eigen <asp: ... runat=“server” /> controls Vaste aspx bestanden. De view wordt dynamisch at runtime opgebouwd (door de url routing – zie volgende slide)

57. URL Routing Bij ASP.NET FORMS is elke url een fysiek bestand op de server. Bijvoorbeeld : http://www.mijndomein.be/default.aspx?id=4

58. URL Routing Bij ASP.NET MVC wordt de URL gerouted naar objecten. Bijvoorbeeld : http://www.mijndomein.be/Products/Overview/4 {controller} {action} {id}

59. URL Routing De routes worden bepaald in de global.asax file

61. De controller stuurt deze objecten door

62. naar de View

64. Controller MVC - Controller - De klasse heeft altijd een Controller suffix - De {actions} zijn publieke methodes - Het implementeert de business logica (models) - De publieke methodes (de actions) retourneren altijd een View() om op deze manier model objecten naar de views te sturen. Het retourneren van het model naar de view wordt meestal met een nieuw POCO object (ook ViewModel object genaamd) geretourneerd.

65. Controller MVC - Controller /en/Archive/page1 Hier leg ik een beperking op. Deze methode is enkel aanspreekbaar vanuit een GET request

68. View MVC - View Op deze manier hebben we het model in de view Het object dat geretourneerd wordt door de controller

69. View MVC – HTML Helpers Helpers klassen die de URL routing, html controls, … automatischgenereren. Bv: Hyperlinks, CheckBox, RadioButton, ListBox, TextBox ,…

70. View MVC – HTML Helpers Voorbeeld, deze html helper genereertdeze html : <a href=“/en/Archive/3_mic-webcafe”>View more</a> Html attributen Controller Action Tekst van de hyperlink Parameters

71. View MVC – Partial Views Model Render UserControl

72. View MVC – Partial Views Als we die UserControl WidgetUpcomingCafe.ascx openenzien we : Model

73. View MVC – Partial Views En datproduceertdeze HTML :

74. View MVC – Partial Views En datproduceertdeze HTML :

75. Model MVC – Form Validatie VoegDataAnnotations using statement toe

76. Model MVC – Form Validatie VoegDataAnnotations using statement toe Maak via een attribute duidelijkaan de partial class datdit object metadata heeft, en de metadata bevindtzich in een inner class

77. Controller MVC – Form Validatie Wanneer de model Is Valid …

78. View MVC – Form Validatie Met de helpersklasseHtml.ValidationMessageFor() kun je de error op het schermlatentonen.

79. Cloud Computing

80. CLOUD Late 2000s & Future De evolutie Cloud Computing, Social Networks Products>Solutions>Services INTERNET Mid ‘90s Browsers, Email, eCommerce, Hosting, Wi-Fi, Web 2.0 CLIENT/SERVERMid ‘80s Distributed Computing PC & APPSEarly ’80s MAINFRAME ’60s & ‘70s Word Processor, Spreadsheets DOS, GUI, Windows Financial, MRP Reservations

83. Enorme schaalbaarheid

84. De IT service is volledig beheerd door een provider

86. De capaciteit in een Cloud model Verwachte Load Allocated IT capacities Geen “te weinig capaciteit“ IT CAPACITEIT Vermindering van de “over-capaciteit“ Minder belasting = minder capaciteit ter beschikking stellen Het verschil van de initiële investering Huidige Load TIJD

87. Dit is verleden tijd met het cloud model

88. Enkele bedrijven die cloud computing aanbieden Amazon Google Vmware Rackspace Salesforce.com Microsoft

89. The Microsoft Cloud Meerdere Data Centers in de wereld Quincy, WA Chicago, IL San Antonio, TX Dublin, Ireland Generation 4 DCs Datacenter CDN Point

90. Cloud computing bestaat uit Infrastructure As A Service (hardware) Servers die beschikbaarzijn in de cloud Platform As A Service (developer) Het beschikbaarstellen van een OS voor cloud-enabled applicaties Ondersteuningvoor de hosting van applicaties Het beschikbaarstellen van een service die de onderlingecommunicatieregelttussenverschillendesystemen Relationele databases in de cloud Software As A Service (eindgebruiker) Google Apps Salesforces Office 365 Skype Facebook SAAS IAAS PAAS

91. Dit even bekeken vanuit Microsoft perspectief SAAS IAAS PAAS

92. Software As A Service PRODUCTIVITEIT SAMENWERKING CRM DATABASE OS MANAGEMENT & SECURITY COMMUNICATIE Traditionele software

93. Voorbeeld van SAAS : Dynamics CRM Online

94. Platform As A ServiceWindows Azure bekijken in de diepte

95. Platform As A Service The Windows Azure platform fits here IaaS TraditioneleIT SaaS PaaS Door u beheerd Applicaties Applicaties Applicaties Applicaties Door u beheerd Data Data Data Data Beheerd door de provider Runtime Runtime Runtime Runtime Door u beheerd Middleware Middleware Middleware Middleware Beheerd door de provider O/S O/S O/S O/S Beheerd door provider Virtualisatie Virtualisatie Virtualisatie Virtualisatie Servers Servers Servers Servers Opslag Opslag Opslag Opslag Netwerk Netwerk Netwerk Netwerk

96. Servers (Compute) Virtual Network Storage Access Control Service Bus Caching Reporting Database Data Sync

97. Vandaag behandelen we Storage Compute Virtual Network Access Control Service Bus Caching Reporting Database Data Sync

98. Azure Development Ontwikkel met Visual Studio (of Eclipse) Draait op ASP.NET, classic ASP, Java, Ruby, Phyton en PHP SDK met Azure emulator

99. De Azure architectuur Network Load Balancer Windows Azure Service SQL Data Service NL B SQL Woker Service VM Role Worker Role Internet SQL Storage SQL Queues NL B (ASPX, ASMX, WCF) (ASPX, ASMX, WCF) Web Role (ASPX, WCF) Tables Blobs

101. Hosting van ASP.NET webpages of WCF Services.

102. HandeldHTTP/HTTPS requestsaf.

103. Heeft toegang tot de storage service

104. Remote Desktop

105. WorkerRole

106. Task scheduler.

107. Is een oneindige lus (while true)

108. Hetzelfdealseenbatch job of Windows service.

109. Handelt taken af van de queue

110. Remote Desktop

112. De verschillende Role modellen

113. Azure Storage Geen SQL data!! Onbeperkte storage 4 types Tables: geen fixed schema, geen relations (enkel entities) Blobs: grote binaire objecten (jpg’s, ...), mogelijkheid om metadata attributen op te slaan bij de binaire objecten, MIME type Queues: Assynchrone communicatie naar de workerrole Drives: NTFS volume mounted to roles Toegankelijk via HTTP/REST API !!

114. Service busy free webrole workerrole Instance 1 Instance 1 busy Instance 2 Instance 2 Instance 3 Instance 3 put message De werking van de Queue

115. De werking van de Queue Service busy free Get message webrole workerrole Instance 1 Instance 1 busy Instance 2 Instance 2 Instance 3 Instance 3 Eén (en enkel één) vrije instantie van de workerrole neemt de message

116. Azure Content Delivery Network user Azure Datacenter Service (webrole, workerrole) requestsblob Blob storage CDN Node Is de blob cached hier ? blob

117. Azure Content Delivery Network user Azure Datacenter Service (webrole, workerrole) andere request Blob storage CDN Node blob

118. Azure AppFabric Caching Worker Role Instance 1 WebRole Instance 2 On Premise app Read/Write data Read/Write data Read/Write data Caching

119. SQL Azure Relationele DB in de Cloud Gebasseerd op SQL 2008 R2 Toegankelijk vanuit iedere ADO.NET client SQL 2008 R2 Management Studio High-availability Geenconfiguratie is nodig De bestaande T-SQL wordtgebruiktalstaal Verschaal database up en down (tussen1GB and 50GB)

120. SQL Azure SQL Azure Server My DB (1 GB) My DB (50 GB) Master DB stored op 3 replicas stored op 3 replicas stored op 3 replicas firewall internal restricted IP ranges Azure Services (webrole,workerrole) Anybody

121. Visual Studio en Azure

122. Het “session” probleem Session www.myurl.be Webrole instantie 1 Webrole instantie 2 Session www.myurl.be

123. Het “session” probleem Session Session - SQL Azure - Table Storage - Cache www.myurl.be Webrole instantie 1 Webrole instantie 2 Session www.myurl.be

124. Start with Azure Je hebt nodig : Visual Studio 2010 + SQL Server Express Download Windows Azure SDK Windows Azure Training Kit Voorbeelden op code.msdn.com

125. SQL Azure Database Manager Via webinterface Via SQL Management Studio 2008 R2 Geen uitgebreide support. Hopelijk komt die er wel in de toekomst

126. Management Portal

127. De ontwikkelingscyclus 1. Start met de ontwikkeling in VS2010 2. Run/Test app in de Local Fabric met local SQL Server 3. Publish naar Azure portal in staging environment 5. Monitor logging en performance 6. Scale Local Machine Staging (in de cloud) testomgeving Production (in de cloud)

128. De Azure prijzen Compute Per service hour of 1 CPU = 0,12 U$ Storage Per GB/month =0,15 U$ Transactions Per 10K = 0,01 U$ SQL Azure 10 GB/maand = 99,99 U$ Access Control Transactions 10K = 0,01 U$ Service Bus Connections 1 connection/maand = 3,99 U$ Data Transfer egress Per GB = 0,15 U$ Data Transfer ingress Per GB = 0,10 U$