Real World HTML5 + ASP.NET MVC - Lessons Learned

REAL WORLD HTML5 & MVC LESSONS LEARNED

Zoltán Dávid

[email protected] György Balássy

[email protected]

AGENDA

The story

HTML5 games

Don’t write, sketch

HTML5 sitebuild

A good server-side for a good sitebuild

Cloud – a place to put your stuff

Conclusions & What we learned

I HAD A DREAM…

GOALS

3 games

GOALS

a website

GOALS

a tutorial

CLIENT TECNOLOGIES

html5

+

javascript

TIME

25 days

TEAM

DEMO

html5jatekok.hu

MINI GAME WEBSITE

SOFTWARE DEVELOPMENT

PROCESS

buzzword driven development

CORE TECHNOLOGIES

CORE TECHNOLOGIES

THE WHOLE TECHNOLOGY

PICTURE

Many project experiences

• Web Development

• ASP.NET WebFroms

• MS SQL

• Entity Framework

• Visual Studio

From the ivory tower

• ASP.NET MVC

• Razor Syntax

• Azure

• HTML5 sitebuild

• Game development

• Javascript Application

development

DECISIONS

test early and often

DECISIONS

have a Plan B

AGENDA

The story

HTML5 games

Don’t write, sketch

HTML5 sitebuild

A good server-side for a good sitebuild

Cloud – a place to put your stuff

Conclusions & What we learned

PLAN

GRAPHICS

images

GRAPHICS

<canvas id="game" width="600" height="480">

canvas not supported…

</canvas>

var canvas = document.getElementById('game');

var context = canvas.getContext('2d');

var pipe= new Image();

pipe.src = 'pipe.png';

context.drawImage(pipe,x,y);

ANIMATIONS

var timer = window.setInterval(draw,50);

function draw() {

now = new Date().getTime();

deltat = now – prevtime;

// compute x,y and draw

prevtime = now;

}

SOUND

<audio id="main_theme">

<source src="bg_theme.mp3">

<source src="bg_theme.ogg">

</audio>

var music = document.getElementById(‘bg_theme');

music.volume = 0.2;

music.loop = true;

music.play();

LARGE JS APPLICATIONS

• Feature detection

• Polyfills

• Structuring code

• Code quality

• Bullet-proof Ajax

• Debugging

That’s not your var

JavaScript best practices

for C# developers

Download from:

http://bit.ly/msbg2012

AGENDA

The story

HTML5 games

Don’t write, sketch

HTML5 sitebuild

A good server-side for a good sitebuild

Cloud – a place to put your stuff

Conclusions & What we learned

SKETCH BEFORE YOU DRILL

SKETCH BEFORE YOU DRILL

• Easy to understand

• Easy to spot the

problems

• Easy to describe what

You want

• Disposable

• Enables fast redesign

DEMO

Visually Communicate

AGENDA

The story

HTML5 games

Don’t write, sketch

HTML5 sitebuild

A good server-side for a good sitebuild

Cloud – a place to put your stuff

Conclusions & What we learned

DEMO

Sitebuild

AGENDA

The story

We are no game developers

Don’t write, sketch

Viable HTML5 sitebuild

A good server-side for a good sitebuild

Cloud – a place to put your stuff

Conclusions & What we learned

WE HAVE A QUESTION

How to transform sitebuild to MVC code?

UNDERSTANDING MVC

WebForms

• Url maps to file (.aspx)

• File has Controls

• You parameterize

Controls

• Controls render HTML

MVC

• Url maps to C# Method of

a Class

• You choose an HTML

rendering template

• You collect data for the

template

• You feed the template

with the data

Routing Action

Controller

View

Model

UNDERSTANDING MVC

DEMO

Views are templates

WE HAVE A QUESTION

How to feed a template?

DEMO

ViewModels

EXPERIENCE

• Lots of data transformation code

• No HTML or javascript problems

• AJAX was extremly easy to integrate

• Using the sitebuild was straightforward

AGENDA

The story

HTML5 games

Don’t write, sketch

HTML5 sitebuild

A good server-side for a good sitebuild

Cloud – a place to put your stuff

Conclusions & What we learned

EXPERIENCE

table storage

vs

sql azure

learn from

scratch

slower to

develop

works with EF

management

studio

no database

project

deploy

cheap

easy

EXPERIENCE

azure BLOB easy to use

files have

URLs

no fine

access

control

no

web.config

no rewrite

rules

case

sensitive

URLs

NO REWRITE RULES

easy “iframe integration”

CASE SENSITIVE URLS

• windows developers not used to it

• problem for

• javascript games

• developed on windows box

shot[1] = new Audio('sound/shot.mp3');

shot[1].volume = 0.3;

shot[2] = new Audio('sound/shot.mp3');

shot[2].volume = 0.3;

DEMO

Uploading to BLOB

EXPERIENCE

Access Control

Service

heavyweight needs WIF

in GAC

works

facebook API

changes

follows

changes

INSTALLING WIF IN AZURE VM

Install.cmd

@echo off

sc config wuauserv start= demand

wusa.exe "%~dp0Windows6.0-KB974405-x64.msu" /quiet /norestart

sc config wuauserv start= disabled

exit /b 0

ServiceDefinition.csdef

<Startup>

<Task commandLine="Install.cmd“

executionContext="elevated“

taskType="simple" />

</Startup>

AGENDA

The story

HTML5 games

Don’t write, sketch

HTML5 sitebuild

A good server-side for a good sitebuild

Cloud – a place to put your stuff

Conclusions & What we learned

THANK YOU!

Questions?

György Balássy

[email protected]

http://gyorgybalassy.wordpress.com

@gyorgybalassy

Zoltán Dávid

[email protected]

slides and demos:

http://bit.ly/msbg2012

HTTP://HTML5JATEKOK.HU