Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Real World HTML5 + ASP.NET MVC - Lessons Learned

1,468 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
  • Be the first to comment

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

×