HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge

1. Introductie tot :HTML 5

2. ASP.NET MVC

3. Cloud Computing – Windows AzureJoeri PansaertsEmail : [email protected] : blog.pureplexity.comTwitter : twitter.com/pureplexityFacebook : facebook.com/pureplexity

4. Agenda : Wat iedere desktop, web, mobile, ... programmeur zeker moet weten over HTML5Doelstellingen HTML5

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

10. Maak iphone, ipad, android, ... apps met html5 Een overzicht over ASP.NET MVCUitleg over het MVC model + bespreking van de model, controller en de view binnen asp.net

11. Voordelen van ASP.NET MVC

12. URL Routing

13. Form validatie met ASP.NET MVCAgenda : Wat is Cloud Computing? De zaken die je als ontwikkelaar zeker moet weten.De evolutie

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

25. Waarom men in een cloud model de session van een asp.net site moet in de database, table of caching steken.HTML5Watiederedeveloper (desktop, web, mobile, …)zekermoetwetenvandaag!

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

27. HTML5 Doelstelling1x programmeren, overal ter beschikking stellen cross platform

28. Gratis HTML5 boekhttp://diveintohtml5.org

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

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

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

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

33. DEMOSymantic Markup

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

35. Old school ModelServerGebruikerbrowserHTTP GET/POSTASP.NETDynamischgegenereerde HTMLDatabaseDB

36. AJAX ModelServerGebruikerHTTP GET/POSTASP.NETbrowserDynamischgegenereerde HTMLHTTP GET/POSTWCF(json, xml, ...)JSXML DataDatabaseDB

37. DEMOOld School Ajax

38. HTML5 ModelServerGebruikerHTTP GETASP.NETbrowserDynamischgegenereerde HTMLHTTP GETWCF(json, xml, ...)JSXML DataDatabaseLokale JS DatabaseDBDB

39. HTML5 – Local Storage

40. DEMOHTML5 Local Storage

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

42. Modernizr toch HTML5 bij oude browsersDetecteer 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 typesWaarom ?

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

47. HTML5 Model (offline apps iPhone, iPad, WP7, Android, ...)AppleDeviceEenmaligeinstallatieApp EngineApp StoreHTTP GETWCF(json, xml, ...)JSXML DataSync wanneer WIFI of 3Gbeschikbaar isServerLokale JS DatabaseDatabaseDBDB

48. DEMOiPhone website

49. PhoneGabOpen 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 patternHet patroonheeft 3 belangrijkecomponenten (objecten)Het is eenalternatief op asp.net formsHet is gebouwdbovenop asp.net formsMaaktgebruik van alle asp.net functionaliteitenSystem.Web.Mvc is de main assemblyBusiness layer, DAL, …ModelViewControllerObject datdientvoor de visualisatieObject dat elk event opvangtdatveroorzaaktwordt door eengebruikersactie. Dit object raadpleegttelkens het model object en het retourneerttelkenseen view object

54. Model – View - ControllerModel : 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 MVCBetere scheiding tussen interface en Business laagMaximale controle over de htmlComplexe routing scenario’s mogelijkBetere ondersteuning voor Test-Driven developmentWerkt beter tussen designer en developer

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

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

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

59. URL RoutingDe routes worden bepaald in de global.asax file

60. ModelMVC - ModelDe objecten die de interactie doen met de Repository (database)

61. De controller stuurt deze objecten door

62. naar de View

63. Voorbeelden : DataSet, DataReader, Linq to SQL, Entity Framework, ...ModelMVC - ModelHet model kan bijvoorbeeld ook gegeneert worden door Entity Framework

64. ControllerMVC - 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. ControllerMVC - Controller/en/Archive/page1Hier leg ik een beperking op. Deze methode is enkel aanspreekbaar vanuit een GET request

66. ViewMVC - ViewDit zijn HTML bestanden

67. Zit altijd in de map /Views/{controller}/{view}.aspx of /Views/{controller}/{view}.chtmlElk view object is “strongly typed” (meestal het viewmodel POCO object (die gestuurd wordt vanuit de controller)ViewMVC - ViewDus in de map : /Views/{controller}/{view}.aspx/en/Archive/page1

68. ViewMVC - ViewOp deze manier hebben we het model in de viewHet object dat geretourneerd wordt door de controller

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

70. ViewMVC – HTML HelpersVoorbeeld, deze html helper genereertdeze html :<a href=“/en/Archive/3_mic-webcafe”>View more</a>Html attributenControllerActionTekst van de hyperlinkParameters

71. ViewMVC – Partial ViewsModelRender UserControl

72. ViewMVC – Partial ViewsAls we die UserControl WidgetUpcomingCafe.ascx openenzien we :Model

73. ViewMVC – Partial ViewsEn datproduceertdeze HTML :

74. ViewMVC – Partial ViewsEn datproduceertdeze HTML :

75. ModelMVC – Form ValidatieVoegDataAnnotations using statement toe

76. ModelMVC – Form ValidatieVoegDataAnnotations using statement toeMaak via een attribute duidelijkaan de partial class datdit object metadata heeft, en de metadata bevindtzich in een inner class

77. ControllerMVC – Form ValidatieWanneer de model Is Valid …

78. ViewMVC – Form ValidatieMet de helpersklasseHtml.ValidationMessageFor() kun je de error op het schermlatentonen.

79. Cloud Computing

80. CLOUD Late 2000s & FutureDe evolutieCloud Computing, Social NetworksProducts>Solutions>ServicesINTERNET Mid ‘90sBrowsers, Email, eCommerce, Hosting, Wi-Fi, Web 2.0CLIENT/SERVERMid ‘80sDistributed ComputingPC & APPSEarly ’80sMAINFRAME ’60s & ‘70sWord Processor, SpreadsheetsDOS, GUI, WindowsFinancial, MRPReservations

81. Wat is cloud computing?Het aanbieden van een infrastructuur, een platform en software (als een service) over het internet naar een wereldwijde afzetmarkt.

82. Het verhuizen van de niet-functionele IT activa naar een provider. De verschillen met traditionele hostingDe kostprijs wordt berekend op het principe “pay as you grow”

83. Enorme schaalbaarheid

84. De IT service is volledig beheerd door een provider

85. De focus ligt op integratie van cloud-cloud toepassingen of cloud traditionele IT toepassingen. Klassiek IT capaciteitsprobleemToegewezencapaciteitVerwachteLoad“Te weinig“ capaciteit“Verlies“ van capaciteitVaste kostenIT CAPACITEITHuidige LoadGrensTIJD

86. De capaciteit in een Cloud modelVerwachteLoadAllocated IT capacitiesGeen “te weinig capaciteit“IT CAPACITEITVermindering van de “over-capaciteit“Minder belasting = minder capaciteit ter beschikking stellenHet verschil van de initiële investeringHuidige LoadTIJD

87. Dit is verleden tijd met het cloud model

88. Enkele bedrijven die cloud computing aanbiedenAmazonGoogle Vmware RackspaceSalesforce.comMicrosoft

89. The Microsoft CloudMeerdere Data Centers in de wereldQuincy, WAChicago, ILSan Antonio, TXDublin, IrelandGeneration 4 DCsDatacenterCDN Point

90. Cloud computing bestaat uitInfrastructure As A Service (hardware)Servers die beschikbaarzijn in de cloudPlatform As A Service (developer) Het beschikbaarstellen van een OS voor cloud-enabled applicatiesOndersteuningvoor de hosting van applicatiesHet beschikbaarstellen van een service die de onderlingecommunicatieregelttussenverschillendesystemenRelationele databases in de cloudSoftware As A Service (eindgebruiker)Google AppsSalesforcesOffice 365SkypeFacebookSAASIAASPAAS

91. Dit even bekeken vanuit Microsoft perspectiefSAASIAASPAAS

92. Software As A ServicePRODUCTIVITEITSAMENWERKINGCRMDATABASEOSMANAGEMENT & SECURITYCOMMUNICATIETraditionele software

93. Voorbeeld van SAAS : Dynamics CRM Online

94. Platform As A ServiceWindows Azure bekijken in de diepte

95. Platform As A ServiceThe Windows Azure platform fits hereIaaSTraditioneleITSaaSPaaSDoor u beheerdApplicatiesApplicatiesApplicatiesApplicatiesDoor u beheerdDataDataDataDataBeheerd door de providerRuntimeRuntimeRuntimeRuntimeDoor u beheerdMiddlewareMiddlewareMiddlewareMiddlewareBeheerd door de providerO/SO/SO/SO/SBeheerd door providerVirtualisatieVirtualisatieVirtualisatieVirtualisatieServersServersServersServersOpslagOpslagOpslagOpslagNetwerkNetwerkNetwerkNetwerk

96. Servers (Compute)Virtual NetworkStorageAccess ControlService BusCachingReportingDatabaseData Sync

97. Vandaag behandelen weStorageComputeVirtual NetworkAccess ControlService BusCachingReportingDatabaseData Sync

98. Azure DevelopmentOntwikkel met Visual Studio (of Eclipse)Draait op ASP.NET, classic ASP, Java, Ruby, Phyton en PHPSDK met Azure emulator

99. De Azure architectuurNetwork Load BalancerWindows Azure ServiceSQL DataServiceNL BSQLWoker ServiceVM RoleWorker RoleInternetSQLStorageSQLQueuesNL B(ASPX, ASMX, WCF)(ASPX, ASMX, WCF)Web Role(ASPX, WCF)TablesBlobs

100. Azure Hosted ServicesWebRole

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

111. Heeft toegang tot de storage serviceAzure VMRoleDe mogelijkheidom je eigen WS2008R2 image up teloadenVolledigecontrole over de OS image.Installeeralleswat je wil op de image.Remote desktopSchaalbaarheid!De instanties zitten achter de loadbalancer dus 1public IP per serviceGeendowntijd van de OS image bijeenhardware failureDe klantmaakt & onderhoud de OS imageBetaalingsmodel = zelfde als worker/web role

112. De verschillende Role modellen

113. Azure StorageGeen SQL data!!Onbeperkte storage4 typesTables: 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 typeQueues: Assynchrone communicatie naar de workerrole Drives: NTFS volume mounted to rolesToegankelijk via HTTP/REST API !!

114. ServicebusyfreewebroleworkerroleInstance 1Instance 1busyInstance 2Instance 2Instance 3Instance 3put messageDe werking van de Queue

115. De werking van de QueueServicebusyfreeGet messagewebroleworkerroleInstance 1Instance 1busyInstance 2Instance 2Instance 3Instance 3Eén (en enkel één) vrije instantie van de workerrole neemt de message

116. Azure Content Delivery NetworkuserAzure DatacenterService (webrole, workerrole)requestsblobBlob storageCDN NodeIs de blob cached hier ?blob

117. Azure Content Delivery NetworkuserAzure DatacenterService (webrole, workerrole)andere requestBlob storageCDN Nodeblob

118. Azure AppFabric CachingWorker Role Instance 1WebRole Instance 2On Premise appRead/Write dataRead/Write dataRead/Write dataCaching

119. SQL AzureRelationele DB in de CloudGebasseerd op SQL 2008 R2Toegankelijk vanuit iedere ADO.NET clientSQL 2008 R2 Management Studio High-availabilityGeenconfiguratie is nodigDe bestaande T-SQL wordtgebruiktalstaalVerschaal database up en down (tussen1GB and 50GB)

120. SQL AzureSQL Azure ServerMy DB(1 GB)My DB(50 GB)Master DBstored op 3 replicasstored op 3 replicasstored op 3 replicasfirewallinternalrestricted IP rangesAzure Services(webrole,workerrole)Anybody

121. Visual Studio en Azure

122. Het “session” probleemSessionwww.myurl.beWebrole instantie 1Webrole instantie 2Sessionwww.myurl.be

123. Het “session” probleemSessionSession- SQL Azure- Table Storage- Cachewww.myurl.beWebrole instantie 1Webrole instantie 2Sessionwww.myurl.be

124. Start with AzureJe hebt nodig : Visual Studio 2010 + SQL Server ExpressDownloadWindows Azure SDK Windows Azure Training KitVoorbeelden op code.msdn.com

125. SQL Azure Database ManagerVia webinterfaceVia SQL Management Studio 2008 R2Geen uitgebreide support. Hopelijk komt die er wel in de toekomst

126. Management Portal

127. De ontwikkelingscyclus1. Start met de ontwikkeling in VS20102. Run/Test app in de Local Fabric met local SQL Server3. Publish naar Azure portal in staging environment5. Monitor logging en performance6. Scale Local MachineStaging (in de cloud)testomgevingProduction (in de cloud)

128. De Azure prijzenComputePer service hour of 1 CPU = 0,12 U$StoragePer GB/month =0,15 U$TransactionsPer 10K = 0,01 U$ SQL Azure10 GB/maand = 99,99 U$Access Control Transactions10K = 0,01 U$Service Bus Connections1 connection/maand = 3,99 U$Data Transfer egressPer GB = 0,15 U$Data Transfer ingressPer GB = 0,10 U$

HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge

Recommended

More Related Content

Viewers also liked (10)

Similar to HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge (20)

HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge