Embed Size (px)
DESCRIPTION
You can be a classic ASP.NET developer with many years of experience with server side C# development, however if you create a modern web application, it is very likely that you will have to write JavaScript code. JavaScript itself is not a complicated language, but when you are used to your favorite coding and debugging tools, this weakly typed language has some special surprises for you. For example because object orientation, and scopes mean totally different things in C# and JavaScript, first you have to learn how to organize your code in this world. Then when your code runs, you have to find and correct your errors in it, but the debugging experience is quite different, if your code runs partly in a browser and partly on the server. You can think of logging which usually helps, but accessing the log after the web page has been destroyed raises further questions. Maybe you already know how to send some raw data to the client in an Ajax response, but how can you data-bind on the client? Join us in this session to learn some tips and tricks to answer these questions using HTML5 and some very handy tools, which can boost your productivity. We will tell you what we have learned in real world projects and show you our proven practices.
Citation preview
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!
