Javascript for .Net Developers
Upcoming SlideShare
Loading in...5
×
 

Javascript for .Net Developers

on

  • 46 views

Javacript looks like C#, smells a bit like C# but it isn’t C#. It is easy to expect things, and then spend hours debugging simple innocent looking code. In this talk, we’ll try and make some sense ...

Javacript looks like C#, smells a bit like C# but it isn’t C#. It is easy to expect things, and then spend hours debugging simple innocent looking code. In this talk, we’ll try and make some sense and bring order in this by taking C# terminology and paradigms into account

Statistics

Views

Total Views
46
Views on SlideShare
46
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • My name is Igor Gorelik. I am a senior developer for Readify. <br /> As you can see this presentation is about me (C#/.Net developer) and Javascript. <br /> But first of all, I have a confession to make: <br />
  • JS is not bad. Personal preferences. So, why do this presentation? <br /> If you want to be relevant – you need to know JS. I am going to share those aspects of JS I’ve found interesting/challenging while taking a part of a big Angular JS project. <br /> I hope you’ll find some of them interesting. But first of all – some clarification
  • I hope that tips and trick I am going to show you will make it easier to take on these frameworks. <br /> I haven’t work with knockout/node, but based on my AngularJS experience I can say that these frameworks are just bunch of APIs. But to make them powerful, their creators use all features pf JS language. And if you rely on your C# knowledge to understand code samples, it could make your life very hard
  • As I said before, relying on C# instincts in JS world is dangerous, but it is hard not to. Why??? (click) <br /> Let’s see couple of examples (next slide)
  • It looks like average C# function. And it’s true for many of JS function. If you implement some mathematical algorithm in JS, it will look very close to its C# version. <br /> So you loose concentration, and start seeing JS-specific problems <br /> Browser compatibility (different DOM implementation), IE6 etc
  • Better syntax, multiple browser support.. <br /> Looks a bit strange, but you still can understand what’s going on. Less JS specific problems, as jQuery takes care about browser compatibility (almost) <br /> But before we go any further, let’s see what is the conceptual between C# and JS
  • Chakra – from IE9, JIT compilation since IE10 <br /> V8 compile JS into native code and it doesn’t interpret byte code <br /> Spider monkey – FF, uses combination of interpreter and JIT <br />
  • Strongly typed vs loosely typed (vars can change type) <br /> Static vs dynamic (type coalescing) <br /> Classic inheritance vs prototype inheritance <br /> Class, constructors, methods -> functions <br />
  • In C# we often rely on compiler to stop us doing the wrong thing. <br /> In JS – it is 100% our responsibility
  • ==/!= Determines equality with coalescing (if necessary) <br /> ===/!== Similar to .Equal() Determines equality without coalescing
  • a.Length – max numeric property + 1 <br /> For(var i in a) – property enumeration <br /> Foreach – same as C#, <br /> Use moderniser for IE8- browsers
  • No function overload, parameters are optional, there is argumentsobject. If arg is not passed value is undefined <br /> <br />
  • Global object depends on context, On the web page – Object Window <br /> This can be changed using bind function
  • Context is still wrong
  • Context is still wrong
  • Context is still wrong
  • http://dotnetfiddle.net/ <br /> http://jsfiddle.net/

Javascript for .Net Developers Javascript for .Net Developers Presentation Transcript

  • With thanks to our sponsors
  • Adventures of C# developer in JavaScript world Igor Gorelik @rogik
  • Confession I don’t like JavaScript
  • Cool stuff we won’t talk about
  • So, JavaScript… It looks like C# It smells like C# But it is NOT C#
  • At the very beginning… function onLogin() { if (document.getElementById('username').text == '') { alert("Username is mandatory"); return; } if (document.getElementById('password').text == '') { alert("Password is mandatory"); return; } document.forms[0].submit(); }
  • jQuery comes to the rescue… Kind of… function onLogin() { if ($('#username').text() == '') { alert("Username is mandatory"); return; } if ($('#password').text() == '') { alert("Password is mandatory"); return; } $("#loginForm").submit(); }
  • Let’s compare… Runtime Environment C# JavaScript Chakra V8 SpiderMonkey
  • Let’s compare… Language C# JavaScript Compiled Interpreted Strongly Typed Loosely Typed Static Typing Dynamic Typing Classic Inheritance Prototype Inheritance Classes Functions Methods Functions etc
  • Type Coalescing C# JavaScript “test “ + “me” test me test me “test “ + 1 test 1 test 1 100 + “25” 10025 10025 “test “ + true test true “test “ + new DateTime(75,9,30,11,33,0) test Thu Oct 30 1975 11:33:00 GMT+1100 (AUS Eastern Daylight Time)
  • Operators Most of operators are identical, except ==/!=, ===/!== “hello” == “hello” 1 == 1 1== “1” 1=== “1” 1!== “1” 1=== 1.000000000000001 1=== 1.0000000000000001 false == ‘’
  • True/False – not as you know it… Falsy values are: • false • 0 (zero as a number) • “” (empty string) • null • undefined • NaN Truthy values examples: • true • “hello” • 25 • “0” (zero as a string) • f (function variable)
  • Object Notation var x = []; x['name'] = “DDD Melbourne"; console.log(x['name']); console.log(x.name);
  • Array all the things for (var i = 0; i < a.length; i++) { console.log(a[i]); } var a = [1, 2, 3]; a.length = 3 a[5] = 'abc'; a.length = 6 a.property = 'something'; a.length = 6 1, 2, 3, undefined, undefined, abc for (var i in a) { console.log(a[i]); } 1, 2, 3, abc, something a.forEach(function (i) { console.log(i); }); 1, 2, 3, abc
  • Functions – not as it looks like function f(arg1) { console.log("one"); } function f(arg1, arg2) { console.log("two"); } f(1); "two" function f(arg1) { console.log("one " + arguments.length); } function f(arg1, arg2) { console.log("two " + arguments.length); } f(1); "two 1"
  • What is this ? this is the current context function f() { return this; // returns global object } var myObject = { name: "me", func: function f() { return this; // returns myObject } }; this can be changed var f = myObject.func.bind(this); f(); // this == global object
  • this in action var myObject = { location: 'Sydney', moveMe: function () { var helpFunction = function () { this.location = 'Melbourne'; }; helpFunction(); console.log(this.location); } }; myObject.moveMe();
  • this in action var myObject = { myLocation: 'Sydney', moveMe: function() { var helpFunction = function () { this.myLocation = 'Melbourne'; }; helpFunction(); console.log(this.myLocation); } }; myObject.moveMe(); Sydney
  • this in action var myObject = { myLocation: 'Sydney', moveMe: function() { var that = this; var helpFunction = function () { this.myLocation = 'Melbourne'; }; that.helpFunction = helpFunction; that.helpFunction(); console.log(this.myLocation); } }; myObject.moveMe(); Melbourne
  • this in action var myObject = { myLocation: 'Sydney', moveMe: function() { var helpFunction = function () { this.myLocation = 'Melbourne'; }; helpFunction.apply(this); console.log(this.myLocation); } }; myObject.moveMe(); Melbourne
  • And couple of days ago on client site… var uiController = { initController: function() { $('#MyCheckboxId').change(function(e) { this.eventHandler(); }); }, eventHandler: function() { // something useful } } ERROR: event handler is not a function of this
  • And couple of days ago on client site… var uiController = { initController: function() { var that = this; $('#MyCheckboxId').change(function(e) { that.eventHandler(); }); }, eventHandler: function() { // something useful } }
  • Classes in JavaScript There are no classes in JavaScript Bad news Good news We can mimic them using functions
  • Show me the money code Samples
  • Unit Tests • Jasmin Test Framework (http://jasmine.github.io/2.0/introduction.html) • QUnit Test Framework (http://qunitjs.com/) • Chutzpah VS plugin
  • So… What’s next ? Know your tools Use them wisely Good luck
  • Questions time