REAL WORLD HTML5 & MVC
LESSONS LEARNED
Zoltán Dávid
david.zoltan@aut.bme.hu
György Balássy
balassy@aut.bme.hu
AGENDA
The story
HTML5 games
Don’t write, sketch
HTML5 sitebuild
A good server-side for a good sitebuild
Cloud – a place t...
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 t...
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 t...
PLAN
GRAPHICS
images
GRAPHICS
<canvas id="game" width="600" height="480">
canvas not supported…
</canvas>
var canvas = document.getElementById(...
ANIMATIONS
var timer = window.setInterval(draw,50);
function draw() {
now = new Date().getTime();
deltat = now – prevtime;...
SOUND
<audio id="main_theme">
<source src="bg_theme.mp3">
<source src="bg_theme.ogg">
</audio>
var music = document.getEle...
LARGE JS APPLICATIONS
• Feature detection
• Polyfills
• Structuring code
• Code quality
• Bullet-proof Ajax
• Debugging
Th...
AGENDA
The story
HTML5 games
Don’t write, sketch
HTML5 sitebuild
A good server-side for a good sitebuild
Cloud – a place t...
SKETCH BEFORE YOU DRILL
SKETCH BEFORE YOU DRILL
• Easy to understand
• Easy to spot the
problems
• Easy to describe what
You want
• Disposable
• E...
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 t...
DEMO
Sitebuild
AGENDA
The story
We are no game developers
Don’t write, sketch
Viable HTML5 sitebuild
A good server-side for a good sitebu...
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 ...
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
• Usi...
AGENDA
The story
HTML5 games
Don’t write, sketch
HTML5 sitebuild
A good server-side for a good sitebuild
Cloud – a place t...
EXPERIENCE
table storage
vs
sql azure
learn from
scratch
slower to
develop
works with EF
management
studio
no database
pro...
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...
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.m...
AGENDA
The story
HTML5 games
Don’t write, sketch
HTML5 sitebuild
A good server-side for a good sitebuild
Cloud – a place t...
THANK YOU!
Questions?
György Balássy
balassy@aut.bme.hu
http://gyorgybalassy.wordpress.com
@gyorgybalassy
Zoltán Dávid
dav...
HTTP://HTML5JATEKOK.HU
Real World HTML5 + ASP.NET MVC - Lessons Learned
Upcoming SlideShare
Loading in …5
×

Real World HTML5 + ASP.NET MVC - Lessons Learned

1,321 views
1,174 views

Published on

ASP.NET + HTML5 + Azure Experiences.

The session was held in at Ms Days on 29th March, 2012, Sofia, Bulgaria

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

No Downloads
Views
Total views
1,321
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Real World HTML5 + ASP.NET MVC - Lessons Learned

  1. 1. REAL WORLD HTML5 & MVC LESSONS LEARNED Zoltán Dávid david.zoltan@aut.bme.hu György Balássy balassy@aut.bme.hu
  2. 2. 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
  3. 3. I HAD A DREAM…
  4. 4. GOALS 3 games
  5. 5. GOALS a website
  6. 6. GOALS a tutorial
  7. 7. CLIENT TECNOLOGIES html5 + javascript
  8. 8. TIME 25 days
  9. 9. TEAM
  10. 10. DEMO html5jatekok.hu
  11. 11. MINI GAME WEBSITE
  12. 12. SOFTWARE DEVELOPMENT PROCESS buzzword driven development
  13. 13. CORE TECHNOLOGIES
  14. 14. CORE TECHNOLOGIES
  15. 15. THE WHOLE TECHNOLOGY PICTURE
  16. 16. 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
  17. 17. DECISIONS test early and often
  18. 18. DECISIONS have a Plan B
  19. 19. 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
  20. 20. PLAN
  21. 21. GRAPHICS images
  22. 22. 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);
  23. 23. ANIMATIONS var timer = window.setInterval(draw,50); function draw() { now = new Date().getTime(); deltat = now – prevtime; // compute x,y and draw prevtime = now; }
  24. 24. 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();
  25. 25. 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
  26. 26. 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
  27. 27. SKETCH BEFORE YOU DRILL
  28. 28. SKETCH BEFORE YOU DRILL • Easy to understand • Easy to spot the problems • Easy to describe what You want • Disposable • Enables fast redesign
  29. 29. DEMO Visually Communicate
  30. 30. 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
  31. 31. DEMO Sitebuild
  32. 32. 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
  33. 33. WE HAVE A QUESTION How to transform sitebuild to MVC code?
  34. 34. UNDERSTANDING MVC
  35. 35. 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
  36. 36. DEMO Views are templates
  37. 37. WE HAVE A QUESTION How to feed a template?
  38. 38. DEMO ViewModels
  39. 39. EXPERIENCE • Lots of data transformation code • No HTML or javascript problems • AJAX was extremly easy to integrate • Using the sitebuild was straightforward
  40. 40. 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
  41. 41. EXPERIENCE table storage vs sql azure learn from scratch slower to develop works with EF management studio no database project deploy cheap easy
  42. 42. EXPERIENCE azure BLOB easy to use files have URLs no fine access control no web.config no rewrite rules case sensitive URLs
  43. 43. NO REWRITE RULES easy “iframe integration”
  44. 44. 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;
  45. 45. DEMO Uploading to BLOB
  46. 46. EXPERIENCE Access Control Service heavyweight needs WIF in GAC works facebook API changes follows changes
  47. 47. 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>
  48. 48. 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
  49. 49. THANK YOU! Questions? György Balássy balassy@aut.bme.hu http://gyorgybalassy.wordpress.com @gyorgybalassy Zoltán Dávid david.zoltan@aut.bme.hu slides and demos: http://bit.ly/msbg2012
  50. 50. HTTP://HTML5JATEKOK.HU

×