Real World HTML5 + ASP.NET MVC - Lessons Learned
•
1 like•1,593 views
ASP.NET + HTML5 + Azure Experiences. The session was held in at Ms Days on 29th March, 2012, Sofia, Bulgaria
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (16)
Similar to Real World HTML5 + ASP.NET MVC - Lessons Learned
Similar to Real World HTML5 + ASP.NET MVC - Lessons Learned (20)
Recently uploaded
Recently uploaded (20)
Real World HTML5 + ASP.NET MVC - Lessons Learned
- 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. 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. I HAD A DREAM…
- 8. TIME 25 days
- 9. TEAM
- 12. SOFTWARE DEVELOPMENT PROCESS buzzword driven development
- 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. DECISIONS test early and often
- 18. DECISIONS have a Plan B
- 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. PLAN
- 21. GRAPHICS images
- 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. ANIMATIONS var timer = window.setInterval(draw,50); function draw() { now = new Date().getTime(); deltat = now – prevtime; // compute x,y and draw prevtime = now; }
- 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. 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. 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. SKETCH BEFORE YOU DRILL
- 28. SKETCH BEFORE YOU DRILL • Easy to understand • Easy to spot the problems • Easy to describe what You want • Disposable • Enables fast redesign
- 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. DEMO Sitebuild
- 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. WE HAVE A QUESTION How to transform sitebuild to MVC code?
- 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
- 37. WE HAVE A QUESTION How to feed a template?
- 38. DEMO ViewModels
- 39. EXPERIENCE • Lots of data transformation code • No HTML or javascript problems • AJAX was extremly easy to integrate • Using the sitebuild was straightforward
- 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. EXPERIENCE table storage vs sql azure learn from scratch slower to develop works with EF management studio no database project deploy cheap easy
- 42. EXPERIENCE azure BLOB easy to use files have URLs no fine access control no web.config no rewrite rules case sensitive URLs
- 43. NO REWRITE RULES easy “iframe integration”
- 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;
- 46. EXPERIENCE Access Control Service heavyweight needs WIF in GAC works facebook API changes follows changes
- 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. 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
- 50. 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