Introductie tot :- HTML 5- ASP.NET MVC- Cloud Computing –

Windows Azure

Joeri PansaertsEmail : joeri@pureplexity.com

PureplexityBlog : blog.pureplexity.com

Twitter : twitter.com/pureplexityFacebook :

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

 

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 :

HTML5Wat iedere developer (desktop, web,

mobile, …) zeker moet weten vandaag!

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

1x programmeren, overal ter beschikking

stellen

cross platform

HTML5 Doelstelling

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

Server

ASP.NETbrowser

Old school Model

DB

Database

HTTP GET/POST

Dynamisch gegenereerde HTML

Gebruiker

Server

ASP.NETbrowser

AJAX Model

DB

Database

HTTP GET/POST

XML Data

Gebruiker

JS WCF(json, xml, ...)

HTTP GET/POST

Dynamisch gegenereerde HTML

DEMOOld School Ajax

Server

ASP.NETbrowser

HTML5 Model

DB

Database

HTTP GET

XML Data

Gebruiker

JSWCF

(json, xml, ...)

HTTP GET

Dynamisch gegenereerde HTML

DB

Lokale JS Database

HTML5 – Local Storage

DEMOHTML5 Local Storage

Wat met oude browsers en HTML5 ?

modernizrhttp://modernizr.com

Detecteer ALTIJD features, geen browsers!!!

Modernizr toch HTML5 bij oude 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

PlatformDesktops, Tablets,

Mobile, ...

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

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

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.

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

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)

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

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

ModelMVC - Model

Het model kan bijvoorbeeld ook gegeneert worden door Entity Framework

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 Controller

/en/Archive/page1Hier leg ik een beperking op. Deze

methode is enkel aanspreekbaar vanuit een GET request

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)

MVC - View View

/en/Archive/page1

Dus in de map : /Views/{controller}/{view}.aspx

MVC - View View

Het object dat geretourneerd wordt door de controller

Op deze manier hebben we het model in de view

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

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

MVC – Partial Views View

Render UserControl

Model

MVC – Partial Views View

Model

Als we die UserControl WidgetUpcomingCafe.ascx openen zien we :

MVC – Partial Views View

En dat produceert deze HTML :

MVC – Partial Views View

En dat produceert deze HTML :

ModelMVC – Form Validatie

Voeg DataAnnotations using statement toe

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

MVC – Form Validatie ControllerWanneer de model Is Valid

…

MVC – Form Validatie View

Met de helpersklasse Html.ValidationMessageFor() kun je de error op het scherm laten tonen.

Cloud Computing

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

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

TIJD

IT C

APA

CIT

EIT

Huidige Load

Toegewezencapaciteit

“Verlies“ van

capaciteit

“Te weinig“ capaciteit

Vaste kosten

VerwachteLoad

Gre

ns

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“

Dit is verleden tijd met het cloud model

Enkele bedrijven die cloud computing aanbieden

AmazonGoogle Vmware RackspaceSalesforce.comMicrosoft

The Microsoft Cloud

Meerdere Data Centers in de wereld

Quincy, WA Chicago, IL San Antonio, TX Dublin, Ireland Generation 4 DCs

Datacenter

CDN Point

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

PAAS

IAAS

SAAS

Dit even bekeken vanuit Microsoft perspectief

PRODUCTIVITEIT

SAMENWERKING CRM DATABAS

E OSMANAGEMENT & SECURITYCOMMUNICATIE

Software As A Service

Traditionele software

Voorbeeld van SAAS : Dynamics CRM Online

Platform As A ServiceWindows Azure bekijken in de diepte

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

Virtual Network

Servers (Compute)

Storage

Data Sync

Database Reporting

CachingService Bus

Access Control

Virtual Network

Compute Storage

Data SyncDatabase Reporting

CachingService Bus Access Control

Vandaag behandelen we

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

Azure Development

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

• 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

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

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

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 !!

Servicewebrole

Instance 1

Instance 2

Instance 3

workerrole

Instance 1

Instance 2

Instance 3

busy

free

busy

put message

De werking van de Queue

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

Azure Content Delivery Network

Azure Datacenter

Service (webrole, workerrole)

Blob storage

user

CDN Node

requests blob

Is de blob cached hier ?

blob

Azure Content Delivery Network

Azure Datacenter

Service (webrole, workerrole)

Blob storage

user

CDN Node

andere request

blob

Azure AppFabric Caching

Worker Role Instance 1

WebRole Instance 2

On Premise app

Caching

Read/Write data Read/Write data Read/Write data

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)

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

Visual Studio en Azure

Het “session” probleem

Webrole instantie 1

Webrole instantie 2

www.myurl.be

www.myurl.be

Session

Session

Webrole instantie 1

Webrole instantie 2

www.myurl.be

www.myurl.be

Het “session” probleem

Session

Session

Session

- SQL Azure- Table Storage- Cache

Start with Azure

Je hebt nodig : Visual Studio 2010 + SQL Server ExpressDownload

Windows Azure SDK Windows Azure Training KitVoorbeelden op code.msdn.com

SQL Azure Database ManagerVia webinterface

Via SQL Management Studio 2008 R2

Geen uitgebreide support. Hopelijk komt die er wel in

de toekomst

Management Portal

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

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$