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

4,929 views
4,830 views

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,929
On SlideShare
0
From Embeds
0
Number of Embeds
1,365
Actions
Shares
0
Downloads
29
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. Introductie tot :<br /><ul><li>HTML 5
  2. 2. ASP.NET MVC
  3. 3. Cloud Computing – Windows Azure</li></li></ul><li>Joeri Pansaerts<br />Email : joeri@pureplexity.com<br />Pureplexity<br />Blog : blog.pureplexity.com<br />Twitter : twitter.com/pureplexity<br />Facebook : facebook.com/pureplexity<br />
  4. 4. Agenda :<br /> <br />Wat iedere desktop, web, mobile, ... programmeur zeker moet weten over HTML5<br /><ul><li>Doelstellingen HTML5
  5. 5. Browser vergelijking
  6. 6. Het verschil in model tussen xhtml, html4 en html5
  7. 7. Database op de client
  8. 8. Oude browsers doen werken met html5
  9. 9. De nieuwe form types
  10. 10. Maak iphone, ipad, android, ... apps met html5</li></ul> <br />Een overzicht over ASP.NET MVC<br /><ul><li>Uitleg over het MVC model + bespreking van de model, controller en de view binnen asp.net
  11. 11. Voordelen van ASP.NET MVC
  12. 12. URL Routing
  13. 13. Form validatie met ASP.NET MVC</li></li></ul><li>Agenda :<br /> <br />Wat is Cloud Computing? De zaken die je als ontwikkelaar zeker moet weten.<br /><ul><li>De evolutie
  14. 14. Het klassiek IT capaciteitsprobleem tov de capaciteit in een cloud model
  15. 15. Uit wat bestaat cloud computing?
  16. 16. Enkele softwarepakketten bespreken die nu in de Cloud draaien
  17. 17. Windows Azure : Platform as a service
  18. 18. De volledige azure architectuur bespreken (webroles, workerroles, vmroles, tables, blobs, queues, ...)
  19. 19. De verschillende role modellen
  20. 20. Azure storage in de diepte bekijken
  21. 21. De werking van de queue bespreken
  22. 22. De werking van de Azure content delivery network bespreken
  23. 23. De azure AppFabric caching bespreken
  24. 24. SQL in de cloud
  25. 25. Waarom men in een cloud model de session van een asp.net site moet in de database, table of caching steken.</li></li></ul><li>HTML5<br />Watiederedeveloper (desktop, web, mobile, …)zekermoetwetenvandaag!<br />
  26. 26. HTML5beschikbaar op ...<br />Desktop : Windows, Mac, Linux<br />Web : IE9, Chrome, FF, Opera, Safari, ...<br />Mobile: iOS, Android, Blackberry 5+, Symbian 5, webOS, Windows Phone 7 (na de zomer van 2011), ...<br />
  27. 27. HTML5 Doelstelling<br />1x programmeren, overal ter beschikking stellen<br /> cross platform<br />
  28. 28. Gratis HTML5 boek<br />http://diveintohtml5.org<br />
  29. 29. HTML5 Wanneer is het klaar ?<br />http://ishtml5readyyet.com/<br />Volgens het W3C in 2014 defintief klaar<br />
  30. 30. HTML5 Test Drive<br />http://ie.microsoft.com/testdrive/<br />Internet Explorer 9<br />Firefox 4 beta<br />
  31. 31. A more beautiful web ...<br />Alles wat je ongeveer met HTML 5 kunt doen<br />http://ie.microsoft.com/testdrive/Views/SiteMap/Default.html<br />
  32. 32. HTML5 – Nieuwe HTML tags<br />De <div> tag heeft nu verchillende varianten gekregen<br />
  33. 33. DEMOSymantic Markup<br />
  34. 34. Het verschil in model tussen <br />vroeger en HTML 5 ...<br />
  35. 35. Old school Model<br />Server<br />Gebruiker<br />browser<br />HTTP GET/POST<br />ASP.NET<br />Dynamischgegenereerde HTML<br />Database<br />DB<br />
  36. 36. AJAX Model<br />Server<br />Gebruiker<br />HTTP GET/POST<br />ASP.NET<br />browser<br />Dynamischgegenereerde HTML<br />HTTP GET/POST<br />WCF<br />(json, xml, ...)<br />JS<br />XML Data<br />Database<br />DB<br />
  37. 37. DEMOOld School Ajax<br />
  38. 38. HTML5 Model<br />Server<br />Gebruiker<br />HTTP GET<br />ASP.NET<br />browser<br />Dynamischgegenereerde HTML<br />HTTP GET<br />WCF<br />(json, xml, ...)<br />JS<br />XML Data<br />Database<br />Lokale JS Database<br />DB<br />DB<br />
  39. 39. HTML5 – Local Storage<br />
  40. 40. DEMOHTML5 Local Storage<br />
  41. 41. Wat met oude browsers en HTML5 ?<br />modernizr<br />http://modernizr.com<br />
  42. 42. Modernizr toch HTML5 bij oude browsers<br />Detecteer ALTIJD features, geen browsers!!!<br />
  43. 43. DEMOModernizr + NuGet in VS2010<br />
  44. 44. Nieuwe form input types<br /><input type=“text” /><br /><input type=“search” /><br /><input type=“tel” /><br /><input type=“url” /><br /><input type=“email” /><br /><input type=“datetime” /><br /><input type=“date” /><br /><input type=“month” /><br /><input type=“time” /><br /><input type=“datetime-local” /><br /><input type=“number” /><br /><input type=“range” /><br /><input type=“color” /><br />
  45. 45. Nieuwe form input types<br />Waarom ?<br />
  46. 46. HTML5 + CSS3 + JS =<br />Common Application Platform<br />Desktops, Tablets, Mobile, ...<br />
  47. 47. HTML5 Model (offline apps iPhone, iPad, WP7, Android, ...)<br />Apple<br />Device<br />Eenmaligeinstallatie<br />App Engine<br />App Store<br />HTTP GET<br />WCF<br />(json, xml, ...)<br />JS<br />XML Data<br />Sync wanneer WIFI of 3G<br />beschikbaar is<br />Server<br />Lokale JS Database<br />Database<br />DB<br />DB<br />
  48. 48. DEMOiPhone website<br />
  49. 49. PhoneGab<br />Open source packager die HTML5 + javascript omzet naar native code<br />(iOS, Android, RIM, Palm, Symbian)<br />
  50. 50. In de nabije toekomst ... “web workers”<br />De mogelijkheid om parallel meerdere script te runnen via Threading op de client.<br />
  51. 51. In de nabije toekomst ... “web sockets”<br />Full duplex communicatie over een enkele TCP socket (via poort 80)<br />
  52. 52. ASP.NET MVC<br />
  53. 53. Het design pattern<br />Het patroonheeft 3 belangrijkecomponenten (objecten)<br />Het is eenalternatief op asp.net forms<br />Het is gebouwdbovenop asp.net forms<br />Maaktgebruik van alle asp.net functionaliteiten<br />System.Web.Mvc is de main assembly<br />Business layer, DAL, …<br />Model<br />View<br />Controller<br />Object datdientvoor de visualisatie<br />Object dat elk event opvangtdatveroorzaaktwordt door eengebruikersactie. Dit object raadpleegttelkens het model object en het retourneerttelkenseen view object<br />
  54. 54. Model – View - Controller<br />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.<br />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.<br />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. <br />
  55. 55. De voordelen van ASP.NET MVC<br />Betere scheiding tussen interface en Business laag<br />Maximale controle over de html<br />Complexe routing scenario’s mogelijk<br />Betere ondersteuning voor Test-Driven development<br />Werkt beter tussen designer en developer<br />
  56. 56. Wat niet wordt gebruikt bij ASP.NET MVC<br />Postbacks<br />View States<br />Events (on click events bv)<br />Eigen <asp: ... runat=“server” /> controls<br />Vaste aspx bestanden. De view wordt dynamisch at runtime opgebouwd (door de url routing – zie volgende slide)<br />
  57. 57. URL Routing<br />Bij ASP.NET FORMS is elke url een fysiek bestand op de server. Bijvoorbeeld : http://www.mijndomein.be/default.aspx?id=4<br />
  58. 58. URL Routing<br />Bij ASP.NET MVC wordt de URL gerouted naar objecten. Bijvoorbeeld :<br />http://www.mijndomein.be/Products/Overview/4<br />{controller} {action} {id}<br />
  59. 59. URL Routing<br />De routes worden bepaald in de global.asax file<br />
  60. 60. Model<br />MVC - Model<br /><ul><li>De objecten die de interactie doen met de Repository (database)
  61. 61. De controller stuurt deze objecten door
  62. 62. naar de View
  63. 63. Voorbeelden : DataSet, DataReader, Linq to SQL, Entity Framework, ...</li></li></ul><li>Model<br />MVC - Model<br />Het model kan bijvoorbeeld ook gegeneert worden door Entity Framework<br />
  64. 64. Controller<br />MVC - Controller<br />- De klasse heeft altijd een Controller suffix<br />- De {actions} zijn publieke methodes<br />- Het implementeert de business logica (models)<br />- 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.<br />
  65. 65. Controller<br />MVC - Controller<br />/en/Archive/page1<br />Hier leg ik een beperking op. Deze methode is enkel aanspreekbaar vanuit een GET request<br />
  66. 66. View<br />MVC - View<br /><ul><li>Dit zijn HTML bestanden
  67. 67. Zit altijd in de map /Views/{controller}/{view}.aspx</li></ul> of /Views/{controller}/{view}.chtml<br /><ul><li>Elk view object is “strongly typed” (meestal het viewmodel POCO object (die gestuurd wordt vanuit de controller)</li></li></ul><li>View<br />MVC - View<br />Dus in de map : /Views/{controller}/{view}.aspx<br />/en/Archive/page1<br />
  68. 68. View<br />MVC - View<br />Op deze manier hebben we het model in de view<br />Het object dat geretourneerd wordt door de controller<br />
  69. 69. View<br />MVC – HTML Helpers<br />Helpers klassen die de URL routing, html controls, … automatischgenereren.<br />Bv: Hyperlinks, CheckBox, RadioButton, ListBox, TextBox ,…<br />
  70. 70. View<br />MVC – HTML Helpers<br />Voorbeeld, deze html helper genereertdeze html :<br /><a href=“/en/Archive/3_mic-webcafe”>View more</a><br />Html attributen<br />Controller<br />Action<br />Tekst van de hyperlink<br />Parameters<br />
  71. 71. View<br />MVC – Partial Views<br />Model<br />Render UserControl<br />
  72. 72. View<br />MVC – Partial Views<br />Als we die UserControl WidgetUpcomingCafe.ascx openenzien we :<br />Model<br />
  73. 73. View<br />MVC – Partial Views<br />En datproduceertdeze HTML :<br />
  74. 74. View<br />MVC – Partial Views<br />En datproduceertdeze HTML :<br />
  75. 75. Model<br />MVC – Form Validatie<br />VoegDataAnnotations using statement toe<br />
  76. 76. Model<br />MVC – Form Validatie<br />VoegDataAnnotations using statement toe<br />Maak via een attribute duidelijkaan de partial class datdit object metadata heeft, en de metadata bevindtzich in een inner class<br />
  77. 77. Controller<br />MVC – Form Validatie<br />Wanneer de model Is Valid …<br />
  78. 78. View<br />MVC – Form Validatie<br />Met de helpersklasseHtml.ValidationMessageFor() kun je de error op het schermlatentonen.<br />
  79. 79. Cloud Computing<br />
  80. 80. CLOUD Late 2000s & Future<br />De evolutie<br />Cloud Computing, Social Networks<br />Products>Solutions>Services<br />INTERNET Mid ‘90s<br />Browsers, Email, eCommerce, <br />Hosting, Wi-Fi, Web 2.0<br />CLIENT/SERVERMid ‘80s<br />Distributed Computing<br />PC & APPSEarly ’80s<br />MAINFRAME ’60s & ‘70s<br />Word Processor, Spreadsheets<br />DOS, GUI, Windows<br />Financial, MRP<br />Reservations<br />
  81. 81. Wat is cloud computing?<br /><ul><li>Het aanbieden van een infrastructuur, een platform en software (als een service) over het internet naar een wereldwijde afzetmarkt.
  82. 82. Het verhuizen van de niet-functionele IT activa naar een provider. </li></ul>De verschillen met traditionele hosting<br /><ul><li>De kostprijs wordt berekend op het principe “pay as you grow”
  83. 83. Enorme schaalbaarheid
  84. 84. De IT service is volledig beheerd door een provider
  85. 85. De focus ligt op integratie van cloud-cloud toepassingen of cloud traditionele IT toepassingen. </li></li></ul><li>Klassiek IT capaciteitsprobleem<br />Toegewezen<br />capaciteit<br />Verwachte<br />Load<br />“Te weinig“ capaciteit<br />“Verlies“ van capaciteit<br />Vaste kosten<br />IT CAPACITEIT<br />Huidige Load<br />Grens<br />TIJD<br />
  86. 86. De capaciteit in een Cloud model<br />Verwachte<br />Load<br />Allocated IT capacities<br />Geen “te weinig capaciteit“<br />IT CAPACITEIT<br />Vermindering van de “over-capaciteit“<br />Minder belasting = minder capaciteit ter beschikking stellen<br />Het verschil van de initiële investering<br />Huidige Load<br />TIJD<br />
  87. 87. Dit is verleden tijd met het cloud model<br />
  88. 88. Enkele bedrijven die cloud computing aanbieden<br />Amazon<br />Google <br />Vmware <br />Rackspace<br />Salesforce.com<br />Microsoft<br />
  89. 89. The Microsoft Cloud<br />Meerdere Data Centers in de wereld<br />Quincy, WA<br />Chicago, IL<br />San Antonio, TX<br />Dublin, Ireland<br />Generation 4 DCs<br />Datacenter<br />CDN Point<br />
  90. 90. Cloud computing bestaat uit<br />Infrastructure As A Service (hardware)<br />Servers die beschikbaarzijn in de cloud<br />Platform As A Service (developer) <br />Het beschikbaarstellen van een OS voor cloud-enabled applicaties<br />Ondersteuningvoor de hosting van applicaties<br />Het beschikbaarstellen van een service die de onderlingecommunicatieregelttussenverschillendesystemen<br />Relationele databases in de cloud<br />Software As A Service (eindgebruiker)<br />Google Apps<br />Salesforces<br />Office 365<br />Skype<br />Facebook<br />SAAS<br />IAAS<br />PAAS<br />
  91. 91. Dit even bekeken vanuit Microsoft perspectief<br />SAAS<br />IAAS<br />PAAS<br />
  92. 92. Software As A Service<br />PRODUCTIVITEIT<br />SAMENWERKING<br />CRM<br />DATABASE<br />OS<br />MANAGEMENT & SECURITY<br />COMMUNICATIE<br />Traditionele software<br />
  93. 93. Voorbeeld van SAAS : Dynamics CRM Online<br />
  94. 94. Platform As A ServiceWindows Azure bekijken in de diepte<br />
  95. 95. Platform As A Service<br />The Windows Azure platform fits here<br />IaaS<br />TraditioneleIT<br />SaaS<br />PaaS<br />Door u beheerd<br />Applicaties<br />Applicaties<br />Applicaties<br />Applicaties<br />Door u beheerd<br />Data<br />Data<br />Data<br />Data<br />Beheerd door de provider<br />Runtime<br />Runtime<br />Runtime<br />Runtime<br />Door u beheerd<br />Middleware<br />Middleware<br />Middleware<br />Middleware<br />Beheerd door de provider<br />O/S<br />O/S<br />O/S<br />O/S<br />Beheerd door provider<br />Virtualisatie<br />Virtualisatie<br />Virtualisatie<br />Virtualisatie<br />Servers<br />Servers<br />Servers<br />Servers<br />Opslag<br />Opslag<br />Opslag<br />Opslag<br />Netwerk<br />Netwerk<br />Netwerk<br />Netwerk<br />
  96. 96. Servers (Compute)<br />Virtual Network<br />Storage<br />Access Control<br />Service Bus<br />Caching<br />Reporting<br />Database<br />Data Sync<br />
  97. 97. Vandaag behandelen we<br />Storage<br />Compute<br />Virtual Network<br />Access Control<br />Service Bus<br />Caching<br />Reporting<br />Database<br />Data Sync<br />
  98. 98. Azure Development<br />Ontwikkel met Visual Studio (of Eclipse)<br />Draait op ASP.NET, classic ASP, Java, Ruby, Phyton en PHP<br />SDK met Azure emulator<br />
  99. 99. De Azure architectuur<br />Network Load Balancer<br />Windows Azure Service<br />SQL Data<br />Service<br />NL B<br />SQL<br />Woker Service<br />VM <br />Role<br />Worker <br />Role<br />Internet<br />SQL<br />Storage<br />SQL<br />Queues<br />NL B<br />(ASPX, ASMX, WCF)<br />(ASPX, ASMX, WCF)<br />Web Role<br />(ASPX, WCF)<br />Tables<br />Blobs<br />
  100. 100. Azure Hosted Services<br /><ul><li>WebRole
  101. 101. Hosting van ASP.NET webpages of WCF Services.
  102. 102. HandeldHTTP/HTTPS requestsaf.
  103. 103. Heeft toegang tot de storage service
  104. 104. Remote Desktop
  105. 105. WorkerRole
  106. 106. Task scheduler.
  107. 107. Is een oneindige lus (while true)
  108. 108. Hetzelfdealseenbatch job of Windows service.
  109. 109. Handelt taken af van de queue
  110. 110. Remote Desktop
  111. 111. Heeft toegang tot de storage service</li></li></ul><li>Azure VMRole<br />De mogelijkheidom je eigen WS2008R2 image up teloaden<br />Volledigecontrole over de OS image.<br />Installeeralleswat je wil op de image.<br />Remote desktop<br />Schaalbaarheid!<br />De instanties zitten achter de loadbalancer dus 1public IP per service<br />Geendowntijd van de OS image bijeenhardware failure<br />De klantmaakt & onderhoud de OS image<br />Betaalingsmodel = zelfde als worker/web role<br />
  112. 112. De verschillende Role modellen<br />
  113. 113. Azure Storage<br />Geen SQL data!!<br />Onbeperkte storage<br />4 types<br />Tables: geen fixed schema, geen relations (enkel entities)<br />Blobs: grote binaire objecten (jpg’s, ...), mogelijkheid om metadata attributen op te slaan bij de binaire objecten, MIME type<br />Queues: Assynchrone communicatie naar de workerrole <br />Drives: NTFS volume mounted to roles<br />Toegankelijk via HTTP/REST API !!<br />
  114. 114. Service<br />busy<br />free<br />webrole<br />workerrole<br />Instance 1<br />Instance 1<br />busy<br />Instance 2<br />Instance 2<br />Instance 3<br />Instance 3<br />put message<br />De werking van de Queue<br />
  115. 115. De werking van de Queue<br />Service<br />busy<br />free<br />Get message<br />webrole<br />workerrole<br />Instance 1<br />Instance 1<br />busy<br />Instance 2<br />Instance 2<br />Instance 3<br />Instance 3<br />Eén (en enkel één) vrije instantie van de workerrole neemt de message<br />
  116. 116. Azure Content Delivery Network<br />user<br />Azure Datacenter<br />Service <br />(webrole, workerrole)<br />requestsblob<br />Blob storage<br />CDN Node<br />Is de blob cached hier ?<br />blob<br />
  117. 117. Azure Content Delivery Network<br />user<br />Azure Datacenter<br />Service <br />(webrole, workerrole)<br />andere request<br />Blob storage<br />CDN Node<br />blob<br />
  118. 118. Azure AppFabric Caching<br />Worker Role Instance 1<br />WebRole Instance 2<br />On Premise app<br />Read/Write data<br />Read/Write data<br />Read/Write data<br />Caching<br />
  119. 119. SQL Azure<br />Relationele DB in de Cloud<br />Gebasseerd op SQL 2008 R2<br />Toegankelijk vanuit iedere ADO.NET client<br />SQL 2008 R2 Management Studio <br />High-availability<br />Geenconfiguratie is nodig<br />De bestaande T-SQL wordtgebruiktalstaal<br />Verschaal database up en down (tussen1GB and 50GB)<br />
  120. 120. SQL Azure<br />SQL Azure Server<br />My DB<br />(1 GB)<br />My DB<br />(50 GB)<br />Master DB<br />stored op 3 replicas<br />stored op 3 replicas<br />stored op 3 replicas<br />firewall<br />internal<br />restricted IP ranges<br />Azure Services<br />(webrole,workerrole)<br />Anybody<br />
  121. 121. Visual Studio en Azure<br />
  122. 122. Het “session” probleem<br />Session<br />www.myurl.be<br />Webrole instantie 1<br />Webrole instantie 2<br />Session<br />www.myurl.be<br />
  123. 123. Het “session” probleem<br />Session<br />Session<br />- SQL Azure<br />- Table Storage<br />- Cache<br />www.myurl.be<br />Webrole instantie 1<br />Webrole instantie 2<br />Session<br />www.myurl.be<br />
  124. 124. Start with Azure<br />Je hebt nodig : Visual Studio 2010 + SQL Server Express<br />Download<br />Windows Azure SDK <br />Windows Azure Training Kit<br />Voorbeelden op code.msdn.com<br />
  125. 125. SQL Azure Database Manager<br />Via webinterface<br />Via SQL Management Studio 2008 R2<br />Geen uitgebreide support. Hopelijk komt die er wel in de toekomst<br />
  126. 126. Management Portal<br />
  127. 127. De ontwikkelingscyclus<br />1. Start met de ontwikkeling in VS2010<br />2. Run/Test app in de Local Fabric met local SQL Server<br />3. Publish naar Azure portal in staging environment<br />5. Monitor logging en performance<br />6. Scale <br />Local Machine<br />Staging (in de cloud)<br />testomgeving<br />Production (in de cloud)<br />
  128. 128. De Azure prijzen<br />Compute<br />Per service hour of 1 CPU = 0,12 U$<br />Storage<br />Per GB/month =0,15 U$<br />Transactions<br />Per 10K = 0,01 U$ <br />SQL Azure<br />10 GB/maand = 99,99 U$<br />Access Control Transactions<br />10K = 0,01 U$<br />Service Bus Connections<br />1 connection/maand = 3,99 U$<br />Data Transfer egress<br />Per GB = 0,15 U$<br />Data Transfer ingress<br />Per GB = 0,10 U$<br />

×