Instructor Dan Wahlin
The target audience for this particular webinar is people with a C# background. You certainly could use any object‑oriented background, but the demos I’ll show will all be C#‑based.
You’ll see there are some similarities you’ll be able to carry over directly. From there, we’ll get into what are some of the key differences. There are a lot of key differences here. We’ll talk about some of those as we go through here.
The good news is it’s not nearly that bad. It’s actually pretty nice to work with once you know some of the key aspects of the language and how it works. We’ll talk about some of the highlights of that in the webinar today.
Nowadays, though, it’s very popular, obviously. There’s a lot of stuff you can do with it that’s pretty cool, that we’ll be talking about. It also plays a critical role in our Web applications. As an example, you might want to do some client‑side validation.
Obviously, it’s nice to give the client that type of instant feedback. You’ll of course have to validate on the server side, as well, but this will give that client instant feedback type of scenario.
You’re really moving a lot of the server‑side load down to the client. Nowadays, that’s a cool thing. I recently got a Galaxy Note 3. I have a quad‑core processor right on my phone. Why not let that phone do some more of the heavy lifting and go that route?
Let’s look at a quick demo here, of a server‑side app versus a client‑side app. The first demonstration we’re going to look at is a pure ASP .NET app with C# on the back end. It has normal postbacks.
Let me go ahead and open it. You’ll see it’s very basic, just has a drop‑down. As you switch the drop‑down, it’s going to load some customers. We’ll go load all the customers in British Columbia. No big deal, right?
If we go into the Chrome Developer Tools here, you can hit F12 or do command or control‑shift‑I. If I go in, we’re going to monitor the network requests. We can actually take a look at what is actually going back and forth over the wire.
Let’s go ahead. Let’s go to Alberta here. It looks like the size of that was 11.3K for this customer ASPX. Let’s go look at Arizona. I think there’s less in Arizona. No. There’s actually more, apparently. It’s 13K.
Let’s do one more. Let’s go Montana. Montana is about 13K, it looks like. You can see the size of the page actually coming back is fairly consistent, but of course, would depend on your data.
Here’s the same type of app, but this is 100‑percent client‑side. The server just serves up the initial HTML, and then, we make an API call, specifically Web API. This returns JSON data. It does the same thing, but let’s take a look at the size of the data that’s coming back now.
I’m going to click on this XHR, which will mean our XML HTTP request, in other words, AJAX calls. Let’s run off to British Columbia. It looks like that was 1.8K of data. Not bad.
Let’s go to Montana again. It looks like that was only 256 bytes. Not bad. You can imagine, if you’re designing your apps to run on a phone or a tablet or desktop, then this is a big deal.
Both languages use functions. I think any language out there uses a lot of functions. That’s very common. Finally, the conditional if statements or switch statements, or a for loop is practically identical in both languages. We’ll look at that in just a second.
Let’s go into a little demo where I have some C# code. I have a little class called “Similarities.cs.” What I’ve done is broken down different parts of this. We have some variables we’re going to talk about. We’re going to talk about some properties and some other features here.
The current version, that this.age = 0 would be a very similar definition to a property. It almost looks just like a field, if you will, but very, very similar there. You might wonder what the heck is this. It’s similar to C#. However, it changes context.
Basically, whoever calls into “this” is what “this” is. Whereas in C#, it always represents the actual object itself. A little bit different there, but very similar as far as what you can define.
Finally, arrays, loops, and conditionals are also very similar. Here, we have a little field names. Pretty standard C# code. A little bit contrived, but good for the demo.
We’re going to loop through. As we loop, if it equals zero, we’re going to add into the list up top, the list of string, first name. If it’s not zero, then, we’re going to add name, plus, whatever i is as we’re looping.
Now we talked about some of the key similarities and you can see some of the fundamental concepts like Methods, Loops, Conditionals, and Variables. They are very similar between languages. I don’t think if you do a lot of C# now, I don’t think you are going to struggle learning the syntax of java script. Where people tend to struggle is some of these differences that we are going to cover plus jump into the few of this here.
In fact, you always use “var,” as you’re defining your variables. Whereas, of course with C#, we’re used to strongly typed applications. Also, there’s absolutely no native support currently for name spaces or classes. That’s a little bit of a bummer, I will admit if you are coming in from the C# world, and we’re all used to building components if you will, classes that we can build into objects and re‑use those.
One of the biggest kind of “Sharks in the water,” I call it, is the quality comparisons. We’ll run some demos of some of the features here in a moment.
The primary types are pretty familiar with as C# developers. We have strings. We do have numbers. But if you’ll notice, numbers are not really broken down into small, double, float, long, short and that type of thing. It is just the number.
I mentioned undefined in null. You’ll notice address here, is not a signed value. If we actually to run this code right here, and we try to log the value of address, all it does is update the little bit of dev up here when I run this. It will show the output in just a moment.
But the address is undefined, it doesn’t have a value. It’s not null, it’s undefined. That’s also different compared to C# because we don’t have an undefined in that rule. Street however is null, it is a null pointer in memory. If I run this little page, not really impressive output. But you’ll see it’s true that quoted five equals five, if we use the double quotes.
Here’s the trick I want to show you. It’s false if we use the triple equals. And then room on the street as it’s coming out with the quadruple equals next for another null which is can’t…But that will be a little crazy. But this triple equals is what’s recommended.
I don’t like languages that curse my type to make them equal to each other. You want to stick with the triple equals in almost any app you do. It is little bit hard to remember that, if you are coming from C# world, but that’s a big deal.
Also, you’ll notice that address is not null, it’s actually returning that it’s undefined. That’s because it hasn’t been assigned a value yet, versus street, you can see is null that will be used to in C#. That would be one example of some of the differences.
Well, that’s going to be function scope, so we have global scope and function scope here. Then down here at the bottom, you’ll notice I’m doing a block. Just four loops standing on its own. I am also redefining “age” as zero. Now the question is, what’s that going to affect? Is it going to affect this one up here which is the function scope age? Is it going to affect the one that’s at the top, the global scope? Well, let’s run it and let’s see.
We should get a three or so message boxes. You will see the first time it ran, global age was 55, and that’s what we would expect that would be correct. Then, the internal one in the function, when it get done looping, it was five. I would expect that. But notice the last one, it should have written out 55. Instead, it wrote five.
Now I can come down here and actually move up that person, just like its regular class. That’s definitely unique compared to the C# type of approach because we are used to classes and you move up to the class.
Last one I will show you that’s a big difference is inheritance. Because we don’t have classes and inheritance like Java or C#, we have to use what’s built into the language, and it is called prototypal inheritance.
Now, let’s say that I have a child that needs to inherit the functionality from base and what we really want to do is, when the child is run, we call log. What will happen is, it will first look at the child and ask, “Do you have a log function?” If you do, it will call him. If you don’t, it will then walk up the hierarchy which we are going to create in the next line of code here and say “Do you have a log function?”
What we are going to do here is, we are going to have a child and we are going to assign to the child’s prototype, the new base now. Really, that’s going to make the prototype of the base object available here to our child.
After that, we are going to attack on our own little add method. What is interesting here is, down here in this code, when I call c.log after I move up the child, that’s going to look first in the child’s prototype and the local stuff and say “Do you have a log?” It’s not going to find it. What it is going to do is, it’s going to walk up the prototype chain until it finds a prototype in a parent that has the log and then it would find this guy and then, it would run the function.
Unlike the “add” that you see here, that actually would come in and just call the child’s add that’s on the child’s prototype itself. Inheritance is totally different. This is one of the current ways that you can enable prototypal inheritance, as we call it.
In ECMAScript 6 which will wrap up this webinar we are talking about and we’ll talk more about this and how that’s going to change everything.
That’s a quick example of the few of the key differences and certainly there will be more I can cover, but that will get you thinking about how C# matches up.