HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 4,695 views

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: ...

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.

Statistics

Views

Total Views
4,695
Views on SlideShare
3,330
Embed Views
1,365

Actions

Likes
1
Downloads
26
Comments
0

3 Embeds 1,365

http://www.techgig.com 1160
http://blog.pureplexity.com 204
http://localhost 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • Introductie tot :
    • HTML 5
    • ASP.NET MVC
    • Cloud Computing – Windows Azure
  • Joeri Pansaerts
    Email : joeri@pureplexity.com
    Pureplexity
    Blog : blog.pureplexity.com
    Twitter : twitter.com/pureplexity
    Facebook : facebook.com/pureplexity
  • 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
  • Agenda :
     
    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.
  • HTML5
    Watiederedeveloper (desktop, web, mobile, …)zekermoetwetenvandaag!
  • 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), ...
  • HTML5 Doelstelling
    1x programmeren, overal ter beschikking stellen
    cross platform
  • Gratis HTML5 boek
    http://diveintohtml5.org
  • HTML5 Wanneer is het klaar ?
    http://ishtml5readyyet.com/
    Volgens het W3C in 2014 defintief klaar
  • HTML5 Test Drive
    http://ie.microsoft.com/testdrive/
    Internet Explorer 9
    Firefox 4 beta
  • A more beautiful web ...
    Alles wat je ongeveer met HTML 5 kunt doen
    http://ie.microsoft.com/testdrive/Views/SiteMap/Default.html
  • HTML5 – Nieuwe HTML tags
    De <div> tag heeft nu verchillende varianten gekregen
  • DEMOSymantic Markup
  • Het verschil in model tussen
    vroeger en HTML 5 ...
  • Old school Model
    Server
    Gebruiker
    browser
    HTTP GET/POST
    ASP.NET
    Dynamischgegenereerde HTML
    Database
    DB
  • AJAX Model
    Server
    Gebruiker
    HTTP GET/POST
    ASP.NET
    browser
    Dynamischgegenereerde HTML
    HTTP GET/POST
    WCF
    (json, xml, ...)
    JS
    XML Data
    Database
    DB
  • DEMOOld School Ajax
  • 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
  • HTML5 – Local Storage
  • DEMOHTML5 Local Storage
  • Wat met oude browsers en HTML5 ?
    modernizr
    http://modernizr.com
  • Modernizr toch HTML5 bij oude browsers
    Detecteer ALTIJD features, geen browsers!!!
  • DEMOModernizr + NuGet in VS2010
  • 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” />
  • Nieuwe form input types
    Waarom ?
  • HTML5 + CSS3 + JS =
    Common Application Platform
    Desktops, Tablets, Mobile, ...
  • 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
  • DEMOiPhone website
  • PhoneGab
    Open source packager die HTML5 + javascript omzet naar native code
    (iOS, Android, RIM, Palm, Symbian)
  • In de nabije toekomst ... “web workers”
    De mogelijkheid om parallel meerdere script te runnen via Threading op de client.
  • In de nabije toekomst ... “web sockets”
    Full duplex communicatie over een enkele TCP socket (via poort 80)
  • ASP.NET MVC
  • 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
  • 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.
  • 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
  • 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)
  • URL Routing
    Bij ASP.NET FORMS is elke url een fysiek bestand op de server. Bijvoorbeeld : http://www.mijndomein.be/default.aspx?id=4
  • URL Routing
    Bij ASP.NET MVC wordt de URL gerouted naar objecten. Bijvoorbeeld :
    http://www.mijndomein.be/Products/Overview/4
    {controller} {action} {id}
  • URL Routing
    De routes worden bepaald in de global.asax file
  • Model
    MVC - 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, ...
  • Model
    MVC - Model
    Het model kan bijvoorbeeld ook gegeneert worden door Entity Framework
  • 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.
  • Controller
    MVC - Controller
    /en/Archive/page1
    Hier leg ik een beperking op. Deze methode is enkel aanspreekbaar vanuit een GET request
  • View
    MVC - 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)
  • View
    MVC - View
    Dus in de map : /Views/{controller}/{view}.aspx
    /en/Archive/page1
  • View
    MVC - View
    Op deze manier hebben we het model in de view
    Het object dat geretourneerd wordt door de controller
  • View
    MVC – HTML Helpers
    Helpers klassen die de URL routing, html controls, … automatischgenereren.
    Bv: Hyperlinks, CheckBox, RadioButton, ListBox, TextBox ,…
  • 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
  • View
    MVC – Partial Views
    Model
    Render UserControl
  • View
    MVC – Partial Views
    Als we die UserControl WidgetUpcomingCafe.ascx openenzien we :
    Model
  • View
    MVC – Partial Views
    En datproduceertdeze HTML :
  • View
    MVC – Partial Views
    En datproduceertdeze HTML :
  • Model
    MVC – Form Validatie
    VoegDataAnnotations using statement toe
  • 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
  • Controller
    MVC – Form Validatie
    Wanneer de model Is Valid …
  • View
    MVC – Form Validatie
    Met de helpersklasseHtml.ValidationMessageFor() kun je de error op het schermlatentonen.
  • Cloud Computing
  • 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
  • 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.
  • Klassiek IT capaciteitsprobleem
    Toegewezen
    capaciteit
    Verwachte
    Load
    “Te weinig“ capaciteit
    “Verlies“ van capaciteit
    Vaste kosten
    IT CAPACITEIT
    Huidige Load
    Grens
    TIJD
  • 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
  • Dit is verleden tijd met het cloud model
  • Enkele bedrijven die cloud computing aanbieden
    Amazon
    Google
    Vmware
    Rackspace
    Salesforce.com
    Microsoft
  • The Microsoft Cloud
    Meerdere Data Centers in de wereld
    Quincy, WA
    Chicago, IL
    San Antonio, TX
    Dublin, Ireland
    Generation 4 DCs
    Datacenter
    CDN Point
  • 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
  • Dit even bekeken vanuit Microsoft perspectief
    SAAS
    IAAS
    PAAS
  • Software As A Service
    PRODUCTIVITEIT
    SAMENWERKING
    CRM
    DATABASE
    OS
    MANAGEMENT & SECURITY
    COMMUNICATIE
    Traditionele software
  • Voorbeeld van SAAS : Dynamics CRM Online
  • Platform As A ServiceWindows Azure bekijken in de diepte
  • 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
  • Servers (Compute)
    Virtual Network
    Storage
    Access Control
    Service Bus
    Caching
    Reporting
    Database
    Data Sync
  • Vandaag behandelen we
    Storage
    Compute
    Virtual Network
    Access Control
    Service Bus
    Caching
    Reporting
    Database
    Data Sync
  • Azure Development
    Ontwikkel met Visual Studio (of Eclipse)
    Draait op ASP.NET, classic ASP, Java, Ruby, Phyton en PHP
    SDK met Azure emulator
  • 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
  • Azure Hosted Services
    • WebRole
    • Hosting van ASP.NET webpages of WCF Services.
    • HandeldHTTP/HTTPS requestsaf.
    • Heeft toegang tot de storage service
    • Remote Desktop
    • WorkerRole
    • Task scheduler.
    • Is een oneindige lus (while true)
    • Hetzelfdealseenbatch job of Windows service.
    • Handelt taken af van de queue
    • Remote Desktop
    • Heeft toegang tot de storage service
  • Azure VMRole
    De mogelijkheidom je eigen WS2008R2 image up teloaden
    Volledigecontrole over de OS image.
    Installeeralleswat je wil op de image.
    Remote desktop
    Schaalbaarheid!
    De instanties zitten achter de loadbalancer dus 1public IP per service
    Geendowntijd van de OS image bijeenhardware failure
    De klantmaakt & onderhoud de OS image
    Betaalingsmodel = zelfde als worker/web role
  • De verschillende Role modellen
  • 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 !!
  • 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
  • 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
  • Azure Content Delivery Network
    user
    Azure Datacenter
    Service
    (webrole, workerrole)
    requestsblob
    Blob storage
    CDN Node
    Is de blob cached hier ?
    blob
  • Azure Content Delivery Network
    user
    Azure Datacenter
    Service
    (webrole, workerrole)
    andere request
    Blob storage
    CDN Node
    blob
  • Azure AppFabric Caching
    Worker Role Instance 1
    WebRole Instance 2
    On Premise app
    Read/Write data
    Read/Write data
    Read/Write data
    Caching
  • 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)
  • 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
  • Visual Studio en Azure
  • Het “session” probleem
    Session
    www.myurl.be
    Webrole instantie 1
    Webrole instantie 2
    Session
    www.myurl.be
  • Het “session” probleem
    Session
    Session
    - SQL Azure
    - Table Storage
    - Cache
    www.myurl.be
    Webrole instantie 1
    Webrole instantie 2
    Session
    www.myurl.be
  • 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
  • SQL Azure Database Manager
    Via webinterface
    Via SQL Management Studio 2008 R2
    Geen uitgebreide support. Hopelijk komt die er wel in de toekomst
  • Management Portal
  • 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)
  • 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$