That’s not your var – JavaScript best practices for C# developers
György Balá[email protected]
Zoltán Dá[email protected]
2
A long time ago in a galaxy far, far away…
Appdev
Server side
dev
Web dev
?
3Note: this image is machine-translated from Hungarian!
http://html5jatekok.hu
Real World HTML5 and MVC – Lessons Learned
Tomorrow 15:45-16:45 in Room 2
5
Today…
Are we ready?they
6
Rich client applications
HTML markup CSS stylesJavaScript
code+ +
How to style and code against new HTML elements,if the browser does not even understand them?
html5shim / shiv / boilerplate Modernizr
7
Feature detection
// DON'T USE THIS: Detecting specific browsers („UA sniffing”)
if(navigator.userAgent.indexOf("MSIE") == -1) {
window.addEventListener("load", myFunc, false);
} else {
window.attachEvent("onload", myFunc);
}
// DO USE THIS: Detect feature
if(window.addEventListener) {
window.addEventListener("load", myFunc, false);
} else if(window.attachEvent) {
window.attachEvent("onload", myFunc);
}
9
Modernizr – http://modernizr.com
audio.src = Modernizr.audio.ogg ? 'background.ogg' :
Modernizr.audio.mp3 ? 'background.mp3' :
'background.m4a';
.no-boxshadow div.button { background:transparent url(btn.png) 0 0; }
.boxshadow div.button { box-shadow:inset 1px 1px 2px #ccc; }
JavaScript:
CSS:
10
Modernizr – http://modernizr.com
Modernizr.load({
test: Modernizr.geolocation,
yep : 'geo.js',
nope: 'geo-polyfill.js'
});
Resource loader:
„polyfill (n): a JavaScript shim that replicates the standard API for older browsers”
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
11
DEMO
Audio in all browsers
12
Structuring your code
DON’T make your variables and functions global!
DO USE namespaces!
var NS = NS || {};
NS.myFunc = function(){ … }
13
DEMO
Structural patterns
16
Script# by Nikhil Kothari
http://projects.nikhilk.net/ScriptSharp
Source files(.cs)
Referenced
assemblies
(.dll)
Script# compiler(ssc.exe)
C# compiler(csc.exe)
Generated assembly
(.dll)
Generated script
(.js)
Associated script
(.js)
Dev Machine/Build Process Deployed App
17
Code quality and consistency
Code Analysis(FxCop)
Source Analysis(StyleCop)
JSLint
JSHint
Warning! JSLint will hurt your feelings!
JSLint.VS2010
18
DEMO
JSLint
19
Ajax
jQuery:
$.ajax, $.load, $.post, $.get, $.getJSON, $.getScript
ASP.NET:
WebForms: PageMethod, WebMethod
MVC: Controller, ApiController (Web API)
20
Ajax issues
• Exception from the server
• Expired session
• Expired authentication cookie
• Redirects
• Browser connection limits
Our practice: wrappers on both ends
21
DEMO
Bullet-proof Ajax
22
HTML rendering on the client
• jQuery Templates beta, jQuery Data Link
beta
• JsRender pre-beta, JsViews pre-beta
• KnockoutJs
JSON HTMLI want my data-binding!
23
DEMO
Data-binding on the client
27
Fixing bugs
Are you creating bugs too? Or, it’s just me…?
Debug Trace Log
alert
console
log4javascript
HTML5 localStorage
28
DEMO
Logging on the client
29
Summary
You are a Windows developer too!
With a question
30
Thank you!
Questions?
György Balá[email protected]://gyorgybalassy.wordpress.com@gyorgybalassy
Zoltán Dá[email protected]
Download slides and demos: http://bit.ly/msbg2012
Don’t forget to submit your feedback and win a great Nokia smartphone and Kindle e-reader!
