![Page 1: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/1.jpg)
Introductie tot :- HTML 5- ASP.NET MVC- Cloud Computing –
Windows Azure
![Page 2: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/2.jpg)
Joeri PansaertsEmail : [email protected]
PureplexityBlog : blog.pureplexity.com
Twitter : twitter.com/pureplexityFacebook :
facebook.com/pureplexity
![Page 3: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/3.jpg)
Agenda :
Wat iedere desktop, web, mobile, ... programmeur zeker moet weten over HTML5
• Doelstellingen HTML5• Browser vergelijking• Het verschil in model tussen xhtml, html4 en html5• Database op de client• Oude browsers doen werken met html5• De nieuwe form types• Maak iphone, ipad, android, ... apps met html5
Een overzicht over ASP.NET MVC• Uitleg over het MVC model + bespreking van de model,
controller en de view binnen asp.net• Voordelen van ASP.NET MVC• URL Routing• Form validatie met ASP.NET MVC
![Page 4: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/4.jpg)
Wat is Cloud Computing? De zaken die je als ontwikkelaar zeker moet weten.
• De evolutie• Het klassiek IT capaciteitsprobleem tov de capaciteit in een cloud
model• Uit wat bestaat cloud computing?• Enkele softwarepakketten bespreken die nu in de Cloud draaien• Windows Azure : Platform as a service• De volledige azure architectuur bespreken (webroles, workerroles,
vmroles, tables, blobs, queues, ...)• De verschillende role modellen• Azure storage in de diepte bekijken• De werking van de queue bespreken• De werking van de Azure content delivery network bespreken• De azure AppFabric caching bespreken• SQL in de cloud• Waarom men in een cloud model de session van een asp.net site
moet in de database, table of caching steken.
Agenda :
![Page 5: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/5.jpg)
HTML5Wat iedere developer (desktop, web,
mobile, …) zeker moet weten vandaag!
![Page 6: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/6.jpg)
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), ...
HTML5 beschikbaar op ...
![Page 7: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/7.jpg)
1x programmeren, overal ter beschikking
stellen
cross platform
HTML5 Doelstelling
![Page 8: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/8.jpg)
Gratis HTML5 boek
http://diveintohtml5.org
![Page 9: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/9.jpg)
HTML5 Wanneer is het klaar ?http://ishtml5readyyet.com/
Volgens het W3C in 2014 defintief klaar
![Page 10: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/10.jpg)
HTML5 Test Drive
http://ie.microsoft.com/testdrive/
Internet Explorer 9 Firefox 4 beta
![Page 11: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/11.jpg)
A more beautiful web ...
Alles wat je ongeveer met HTML 5 kunt doen
http://ie.microsoft.com/testdrive/Views/SiteMap/Default.html
![Page 12: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/12.jpg)
HTML5 – Nieuwe HTML tags
De <div> tag heeft nu verchillende varianten
gekregen
![Page 13: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/13.jpg)
DEMOSymantic Markup
![Page 14: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/14.jpg)
Het verschil in model tussen vroeger en HTML 5 ...
![Page 15: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/15.jpg)
Server
ASP.NETbrowser
Old school Model
DB
Database
HTTP GET/POST
Dynamisch gegenereerde HTML
Gebruiker
![Page 16: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/16.jpg)
Server
ASP.NETbrowser
AJAX Model
DB
Database
HTTP GET/POST
XML Data
Gebruiker
JS WCF(json, xml, ...)
HTTP GET/POST
Dynamisch gegenereerde HTML
![Page 17: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/17.jpg)
DEMOOld School Ajax
![Page 18: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/18.jpg)
Server
ASP.NETbrowser
HTML5 Model
DB
Database
HTTP GET
XML Data
Gebruiker
JSWCF
(json, xml, ...)
HTTP GET
Dynamisch gegenereerde HTML
DB
Lokale JS Database
![Page 19: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/19.jpg)
HTML5 – Local Storage
![Page 20: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/20.jpg)
DEMOHTML5 Local Storage
![Page 21: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/21.jpg)
Wat met oude browsers en HTML5 ?
modernizrhttp://modernizr.com
![Page 22: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/22.jpg)
Detecteer ALTIJD features, geen browsers!!!
Modernizr toch HTML5 bij oude browsers
![Page 23: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/23.jpg)
DEMOModernizr + NuGet in VS2010
![Page 24: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/24.jpg)
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” />
![Page 25: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/25.jpg)
Nieuwe form input types
Waarom ?
![Page 26: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/26.jpg)
HTML5 + CSS3 + JS =Common Application
PlatformDesktops, Tablets,
Mobile, ...
![Page 27: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/27.jpg)
Server
App Engine
HTML5 Model (offline apps iPhone, iPad, WP7, Android, ...)
DB
Database
HTTP GET
XML Data
Device
JSWCF
(json, xml, ...)
DB
Lokale JS Database
Sync wanneer WIFI of 3Gbeschikbaar is
Eenmalige installatie
App Store
Apple
![Page 28: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/28.jpg)
DEMOiPhone website
![Page 29: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/29.jpg)
PhoneGab
Open source packager die HTML5 + javascript omzet
naar native code
(iOS, Android, RIM, Palm, Symbian)
![Page 30: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/30.jpg)
In de nabije toekomst ... “web workers”
De mogelijkheid om parallel meerdere script te runnen via Threading op de client.
![Page 31: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/31.jpg)
In de nabije toekomst ... “web sockets”
Full duplex communicatie over een enkele TCP socket (via poort 80)
![Page 32: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/32.jpg)
ASP.NET MVC
![Page 33: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/33.jpg)
Het design patternHet patroon heeft 3 belangrijke componenten (objecten)Het is een alternatief op asp.net formsHet is gebouwd bovenop asp.net formsMaakt gebruik van alle asp.net functionaliteitenSystem.Web.Mvc is de main assembly
Model
Controller
View
Business layer, DAL, …
Object dat dient voor de visualisatie
Object dat elk event opvangt dat veroorzaakt wordt door een gebruikersactie. Dit object raadpleegt telkens het model object en het retourneert telkens een view object
![Page 34: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/34.jpg)
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.
![Page 35: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/35.jpg)
De voordelen van ASP.NET MVC
Betere scheiding tussen interface en Business laagMaximale controle over de htmlComplexe routing scenario’s mogelijkBetere ondersteuning voor Test-Driven developmentWerkt beter tussen designer en developer
![Page 36: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/36.jpg)
Wat niet wordt gebruikt bij ASP.NET MVC
PostbacksView 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)
![Page 37: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/37.jpg)
URL Routing
Bij ASP.NET FORMS is elke url een fysiek bestand op de server. Bijvoorbeeld : http://www.mijndomein.be/default.aspx?id=4
![Page 38: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/38.jpg)
URL Routing
Bij ASP.NET MVC wordt de URL gerouted naar objecten. Bijvoorbeeld :http://www.mijndomein.be/Products/Overview/4 {controller} {action}
{id}
![Page 39: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/39.jpg)
URL Routing
De routes worden bepaald in de global.asax file
![Page 40: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/40.jpg)
ModelMVC - Model
- De objecten die de interactie doen met de Repository (database)
- De controller stuurt deze objecten door
- naar de View- Voorbeelden : DataSet,
DataReader, Linq to SQL, Entity Framework, ...
![Page 41: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/41.jpg)
ModelMVC - Model
Het model kan bijvoorbeeld ook gegeneert worden door Entity Framework
![Page 42: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/42.jpg)
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.
Controller
![Page 43: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/43.jpg)
MVC - Controller Controller
/en/Archive/page1Hier leg ik een beperking op. Deze
methode is enkel aanspreekbaar vanuit een GET request
![Page 44: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/44.jpg)
MVC - View View
- Dit zijn HTML bestanden- Zit altijd in de map
/Views/{controller}/{view}.aspx of /Views/{controller}/{view}.chtml- Elk view object is “strongly typed” (meestal
het viewmodel POCO object (die gestuurd wordt vanuit de controller)
![Page 45: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/45.jpg)
MVC - View View
/en/Archive/page1
Dus in de map : /Views/{controller}/{view}.aspx
![Page 46: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/46.jpg)
MVC - View View
Het object dat geretourneerd wordt door de controller
Op deze manier hebben we het model in de view
![Page 47: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/47.jpg)
MVC – HTML Helpers View
Helpers klassen die de URL routing, html controls, … automatisch genereren.Bv: Hyperlinks, CheckBox, RadioButton, ListBox, TextBox ,…
Helper Type Function Example of Use Explanation
Html.ActionLink Link to action <%= Html.ActionLink("Edit", "EditCategory", new { id = c.CategoryID})%>
Executes action EditCategory passing id as parameter
Html.BeginForm Marks beginning of a form points to action that will process form.
<% using (Html.BeginForm("InsertCategory", "Products")){ %>
From will be processed by InsertCategory action of ProductsController
Html.ValidationSummary
Summary of validation errors
<%=Html.ValidationSummary() %>
Shows error summary that ModelState contains
Html.ValidationMessage
Specifies validatoin error message
<%=Html.ValidationMessage("Description","*") %>
Shows * besinde invalid form field
Html.Hidden Embeds invisible information
<%= Html.Hidden(Category.CategoryIDKey, ViewData.Model.CategoryID) %>
Action can access CategoryID parameter
![Page 48: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/48.jpg)
MVC – HTML Helpers View
Voorbeeld, deze html helper genereert deze html :
<a href=“/en/Archive/3_mic-webcafe”>View more</a>
Tekst van de hyperlink
Action
Controller
Parameters
Html attributen
![Page 49: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/49.jpg)
MVC – Partial Views View
Render UserControl
Model
![Page 50: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/50.jpg)
MVC – Partial Views View
Model
Als we die UserControl WidgetUpcomingCafe.ascx openen zien we :
![Page 51: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/51.jpg)
MVC – Partial Views View
En dat produceert deze HTML :
![Page 52: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/52.jpg)
MVC – Partial Views View
En dat produceert deze HTML :
![Page 53: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/53.jpg)
ModelMVC – Form Validatie
Voeg DataAnnotations using statement toe
![Page 54: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/54.jpg)
ModelMVC – Form Validatie
Voeg DataAnnotations using statement toe
Maak via een attribute duidelijk aan de partial class dat dit object metadata heeft, en de metadata bevindt zich in een inner class
![Page 55: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/55.jpg)
MVC – Form Validatie ControllerWanneer de model Is Valid
…
![Page 56: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/56.jpg)
MVC – Form Validatie View
Met de helpersklasse Html.ValidationMessageFor() kun je de error op het scherm laten tonen.
![Page 57: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/57.jpg)
Cloud Computing
![Page 58: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/58.jpg)
INTERNET Mid ‘90s
Browsers, Email, eCommerce, Hosting, Wi-Fi, Web 2.0
CLIENT/SERVER Mid ‘80sDistributed Computing
PC & APPS Early ’80sWord Processor, SpreadsheetsDOS, GUI, Windows
MAINFRAME ’60s & ‘70s
Financial, MRPReservations
CLOUD Late 2000s & Future
Cloud Computing, Social NetworksProducts>Solutions>Services
De evolutie
![Page 59: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/59.jpg)
Wat is cloud computing?• Het aanbieden van een infrastructuur, een platform en software
(als een service) over het internet naar een wereldwijde
afzetmarkt.
• Het verhuizen van de niet-functionele IT activa naar een provider.
De verschillen met traditionele
hosting• De kostprijs wordt berekend op het principe “pay as you grow”
• Enorme schaalbaarheid
• De IT service is volledig beheerd door een provider
• De focus ligt op integratie van cloud-cloud toepassingen of cloud
traditionele IT toepassingen.
![Page 60: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/60.jpg)
Klassiek IT capaciteitsprobleem
TIJD
IT C
APA
CIT
EIT
Huidige Load
Toegewezencapaciteit
“Verlies“ van
capaciteit
“Te weinig“ capaciteit
Vaste kosten
VerwachteLoad
Gre
ns
![Page 61: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/61.jpg)
De capaciteit in een Cloud model
Huidige Load
Allocated IT capacities
Het verschil van de initiële
investering
Geen “te weinig capaciteit“
Minder belasting = minder capaciteit ter beschikking
stellenIT C
APA
CIT
EIT
VerwachteLoad
TIJD
Vermindering van de
“over-capaciteit“
![Page 62: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/62.jpg)
Dit is verleden tijd met het cloud model
![Page 63: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/63.jpg)
Enkele bedrijven die cloud computing aanbieden
AmazonGoogle Vmware RackspaceSalesforce.comMicrosoft
![Page 64: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/64.jpg)
The Microsoft Cloud
Meerdere Data Centers in de wereld
Quincy, WA Chicago, IL San Antonio, TX Dublin, Ireland Generation 4 DCs
Datacenter
CDN Point
![Page 65: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/65.jpg)
Infrastructure As A Service (hardware)Servers die beschikbaar zijn in de cloud
Platform As A Service (developer) Het beschikbaar stellen van een OS voor cloud-enabled applicaties Ondersteuning voor de hosting van applicatiesHet beschikbaar stellen van een service die de onderlinge communicatie regelt tussen verschillende systemen Relationele databases in de cloud
Software As A Service (eindgebruiker)Google AppsSalesforcesOffice 365SkypeFacebook
Cloud computing bestaat uit
PAAS
IAAS
SAAS
![Page 66: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/66.jpg)
PAAS
IAAS
SAAS
Dit even bekeken vanuit Microsoft perspectief
![Page 67: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/67.jpg)
PRODUCTIVITEIT
SAMENWERKING CRM DATABAS
E OSMANAGEMENT & SECURITYCOMMUNICATIE
Software As A Service
Traditionele software
![Page 68: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/68.jpg)
Voorbeeld van SAAS : Dynamics CRM Online
![Page 69: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/69.jpg)
Platform As A ServiceWindows Azure bekijken in de diepte
![Page 70: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/70.jpg)
Platform As A ServiceThe Windows Azure platform fits here
Traditionele IT
Opslag
Servers
Netwerk
O/S
Middleware
Virtualisatie
Data
Applicaties
Runtime
Door
u b
eheerd
IaaS
Opslag
Servers
Netwerk
O/S
Middleware
Virtualisatie
Data
Applicaties
Runtime
Beheerd
door p
rovid
er
Door
u b
eheerd
Door
u b
eheerd PaaS
Beheerd
door d
e p
rovid
er
Opslag
Servers
Netwerk
O/S
Middleware
Virtualisatie
Applicaties
Runtime
Data
SaaS
Beheerd
door d
e p
rovid
er
Opslag
Servers
Netwerk
O/S
Middleware
Virtualisatie
Applicaties
Runtime
Data
![Page 71: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/71.jpg)
Virtual Network
Servers (Compute)
Storage
Data Sync
Database Reporting
CachingService Bus
Access Control
![Page 72: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/72.jpg)
Virtual Network
Compute Storage
Data SyncDatabase Reporting
CachingService Bus Access Control
Vandaag behandelen we
![Page 73: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/73.jpg)
Ontwikkel met Visual Studio (of Eclipse)Draait op ASP.NET, classic ASP, Java, Ruby, Phyton en PHPSDK met Azure emulator
Azure Development
![Page 74: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/74.jpg)
Internet
Windows Azure Service
(ASPX, ASMX, WCF)
(ASPX, ASMX, WCF)
Web Role(ASPX, WCF)
Woker
Service
Worker
Role
StorageTables Blobs
Queues
NL B
De Azure architectuur
SQL Data
SQL
SQL
SQL
Network Load
Balancer
NL B
VM Role
Service
![Page 75: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/75.jpg)
• WebRole– Hosting van ASP.NET webpages of WCF Services.– Handeld HTTP/HTTPS requests af.– Heeft toegang tot de storage service– Remote Desktop
• WorkerRole– Task scheduler.– Is een oneindige lus (while true)– Hetzelfde als een batch job of Windows service.– Handelt taken af van de queue– Remote Desktop– Heeft toegang tot de storage service
Azure Hosted Services
![Page 76: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/76.jpg)
Azure VMRole
De mogelijkheid om je eigen WS2008R2 image up te loadenVolledige controle over de OS image.Installeer alles wat je wil op de image.Remote desktopSchaalbaarheid!De instanties zitten achter de loadbalancer dus 1 public IP per serviceGeen downtijd van de OS image bij een hardware failure
De klant maakt & onderhoud de OS imageBetaalingsmodel = zelfde als worker/web role
![Page 77: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/77.jpg)
De verschillende Role modellen
VM Size CPU Cores Geheugen Lokale service storage
Small 1 1.7 GB 250 GB
Medium 2 3.5 GB 500 GB
Large 4 7 GB 1000 GB
ExtraLarge 8 14 GB 2000 GB
![Page 78: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/78.jpg)
Azure Storage
Geen SQL data!!Onbeperkte storage4 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 typeQueues: Assynchrone communicatie naar de workerrole Drives: NTFS volume mounted to roles
Toegankelijk via HTTP/REST API !!
![Page 79: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/79.jpg)
Servicewebrole
Instance 1
Instance 2
Instance 3
workerrole
Instance 1
Instance 2
Instance 3
busy
free
busy
put message
De werking van de Queue
![Page 80: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/80.jpg)
webrole
Instance 1
Instance 2
Instance 3
workerrole
Instance 1
Instance 2
Instance 3
busy
free
busy
Get message
Eén (en enkel één) vrije instantie van de workerrole neemt de message
Service
De werking van de Queue
![Page 81: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/81.jpg)
Azure Content Delivery Network
Azure Datacenter
Service (webrole, workerrole)
Blob storage
user
CDN Node
requests blob
Is de blob cached hier ?
blob
![Page 82: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/82.jpg)
Azure Content Delivery Network
Azure Datacenter
Service (webrole, workerrole)
Blob storage
user
CDN Node
andere request
blob
![Page 83: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/83.jpg)
Azure AppFabric Caching
Worker Role Instance 1
WebRole Instance 2
On Premise app
Caching
Read/Write data Read/Write data Read/Write data
![Page 84: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/84.jpg)
SQL Azure
Relationele DB in de CloudGebasseerd op SQL 2008 R2Toegankelijk vanuit iedere ADO.NET clientSQL 2008 R2 Management Studio High-availabilityGeen configuratie is nodigDe bestaande T-SQL wordt gebruikt als taalVerschaal database up en down (tussen 1GB and 50GB)
![Page 85: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/85.jpg)
SQL AzureSQL Azure Server
Master DB
My DB(1 GB)
My DB(50 GB)
firewall
Azure Services(webrole,workerrole)
Anybody
internal restricted IP ranges
stored op 3 replicas stored op 3 replicas stored op 3 replicas
![Page 86: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/86.jpg)
Visual Studio en Azure
![Page 87: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/87.jpg)
Het “session” probleem
Webrole instantie 1
Webrole instantie 2
www.myurl.be
www.myurl.be
Session
Session
![Page 88: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/88.jpg)
Webrole instantie 1
Webrole instantie 2
www.myurl.be
www.myurl.be
Het “session” probleem
Session
Session
Session
- SQL Azure- Table Storage- Cache
![Page 89: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/89.jpg)
Start with Azure
Je hebt nodig : Visual Studio 2010 + SQL Server ExpressDownload
Windows Azure SDK Windows Azure Training KitVoorbeelden op code.msdn.com
![Page 90: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/90.jpg)
SQL Azure Database ManagerVia webinterface
Via SQL Management Studio 2008 R2
Geen uitgebreide support. Hopelijk komt die er wel in
de toekomst
![Page 91: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/91.jpg)
Management Portal
![Page 92: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/92.jpg)
De ontwikkelingscyclus
Local Machine
Staging (in de cloud)
Production (in de cloud)
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
testomgeving
![Page 93: HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge](https://reader033.vdocuments.site/reader033/viewer/2022061120/546c9536b4af9f752c8b5073/html5/thumbnails/93.jpg)
De Azure prijzenCompute
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$