real world html5 + asp.net mvc - lessons learned
DESCRIPTION
ASP.NET + HTML5 + Azure Experiences. The session was held in at Ms Days on 29th March, 2012, Sofia, BulgariaTRANSCRIPT
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
http://gyorgybalassy.wordpress.com
@gyorgybalassy
Zoltán Dávid
slides and demos:
http://bit.ly/msbg2012
HTTP://HTML5JATEKOK.HU