ECMAScript 6 (ES6) – The Future Look of JavaScript for C# Developers

This is an excerpt of a webinar by Dan Wahlin – JavaScript for C# Developers that was conducted at Interface Technical Training on September 14, 2014.

Watch the entire webinar at JavaScript for C# Developers webinar with Dan Wahlin

Dan Wahlin teaches Web Development and .NET Visual Studio classes at Interface Technical Training. Dan’s instructor-led training classes include JavaScript, AngularJS, jQuery, Node.js, HTML5, ASP.NET MVC, C#, and C# design patterns. They can be attended in Phoenix, AZ or online with Remote Live.

Webinar Transcription:

If you’re currently doing development work on the Server Side and doing a lot of C# every day. Maybe you’re doing just desktop apps and now you’re being asked to move into the web world. I’d love to say that learning JavaScript is going to solve all the world’s problems but, in fact, JavaScript is only one part of the picture.

I’ll mention quickly some of the other related technologies that you’ll also be using along with JavaScript if you’re going to be building web apps with it.

When HTML first gets loaded into memory in the browser, it gets put into the Document Object Model or (DOM).

Often times, we’ll be writing JavaScript to interact with the page for validation purposes. Maybe you want to handle the events of the user clicking a button or selecting a drop down etc..

Also, you’ll often manipulate CSS or CSS Classes. If you haven’t done much with CSS, this would be our styles in our web pages. Our colors, fonts, etc… JavaScript’s also used a lot of cases such as  when a user moves the mouse over a row on a grid an action is started. You want to change that color to green or something. That’s also going to require some knowledge of working with CSS and the DOM and things along those lines. Now, the good news is, although we can write what we call vanilla JavaScript. Which is just JavaScript supported by all the browsers.

You can use libraries out there like, KnockOutJS [http://knockoutjs.com/ ] which is a data binding library. jQuery [https://jquery.com/ ] is very, very popular for DOM manipulation, manipulating what’s in the web page. What it will do is give you a kind of solid support structure that will make things work better cross browser.

ECMAScript 6 (ES6) – The Future Look of C#-ish

We’ve covered some of the similarities between JavaScript and C#. We’ve covered several of the differences between JavaScript and C# and even some related technologies.

The good news is the direction of JavaScript is looking more and more like C# every day. ECMAScript 6 is coming.

There’s already browsers, Mozilla Firefox for instance is supporting several of the new features already ECMAScript 6 support in Mozilla. Chrome supports a few of them. Then there is even some other options you can do with this I talk about. Like Traceur which is a kind of a build process for JavaScript that I’ll mention.

The future actually looks pretty bright. There is a lot of cool stuff coming out that’s going to make JavaScript a lot better than what we currently have today. Although, with functions you can emulate classes, which you will see in this post.

We’re actually are going to have full support for classes which is really nice to have. Inheritance will also be greatly simplified and there is a numerous other features that are going to be available.

Here’s a link of a Gethub site Browser Support:

This will actually allow you to check which browsers are supporting this particular ES6 feature. You’re going to find that most of the browsers don’t support ES6 very well now because it’s in its early release lifecycle.

Here are some of the features of ECMAScript 6.

Modules:

We’re going to have support for modules. This will allow us to build more modular code like namespaces, but also the ability to load modules dynamically. Almost like adding a reference to an assembly in C#, but little bit different process.

Classes:

We’re going to have support for classes including inheritance like we’re used to in C#. It’s going to look much more like that. Now, under the covers we’re still going to have the prototypical inheritance I mentioned earlier, but this will be a really nice feature to have.

Block Scope:

Block scope with the let keyword will be provided. That’s going to be awesome, because if you come from C# you’re used to three levels of scope and it’s a little bit tricky when you start doing JavaScript.

Destructuring:

They have a way to destructure and work with objects and arrays which is very interesting.

Arrow Functions:

Arrow functions are actually lambdas. In C#, we’ve had lambdas for several years now (one of my favorite features actually.) We now have support for anonymous functions, a really compact syntax which is going to be pretty cool. It looks exactly like lambdas. In fact, we’ll show an example in this post.

Default Parameters:

You’re going to be able to have default parameter values. As a parameter is passed in, you want to give it a default value incase it’s not passed in. We can do that now in C# with optional parameters. We can now do that with ECMAScript 6 with what they call Default Parameters.

Generators:

Generators are related to the yield of C#. It relates to iterators and how we can actually iterate through a series of steps. This gets a little more advanced, but you can do some pretty cool stuff with that.

More…:

Then there is a whole bunch more. If you want to see all the features, visit:  http://kangax.github.io/compat-table/es6/.

This is mainly geared to show you the browsers that support it and that don’t, but there’s a lot of great stuff that’s coming out in ECMAScript 6.

Here’s a quick demo of some of the ECMAScript 6 features.

I’ll start in section 4. Let’s start with something pretty simple, that if you do lambdas you’ll be familiar with.

You’ll see in Microsoft Visual Studio as I show this a lot of red lines are going to display.

That’s just because it doesn’t quite support without some plugging anyway, the ECMAScript 6 syntax in a JavaScript file. You’ll notice that we have this, myLogger, and we have this parameter, a lambda and then what to do.

Now when my logger is called, we can pass the parameter which is just like in C# that will be passed in as the message here. Then we’re going to write that out to the console. That would be an example of an arrow function that you can work with.

That’s going to be a great feature that will really clean up JavaScript code over what we have today.

Classes:

I mentioned that we have support for classes. Here is an example of ECMAScript 6 class for JavaScript.

You notice that they actually have the class keyword highlighted.

There is a way to emulate this with JavaScript patterns out there like the Revealing Module Pattern or the Revealing Prototype Pattern.

Now we’re going to have full support for classes, you’ll notice there are constructors here.

Functions are much more compact.

You’ll see that we don’t even have to put the function keyword. We can just put the name of the function very nice.

Then moving on down here I have a logger that extends which is their way of doing inheritance, the base log.

Then I can even call into the Base Class. Super it’s actually very analogous to Java, but it’d be like base in C#.

We’re going to pass whatever log name is up into the base class. Then when we call right line we’re actually going to call the base classes’ log which is the one right up here.

This will really clean up the code and make it much easier to work with.

Finally, this one’s a very simple feature and it’s a big deal.

Earlier I demonstrated that if we have a stand‑alone loop, and if we had like age defined, depending on how it’s defined and where it’s defined, if it’s in just a block. We don’t have block level scope, so you could step on global variables that are in like a class accidentally. That’s a source of bugs for sure.

You’ll see the inclusion of the let keyword.

Now if I try to ride it out and run this, we’ll actually get an error.

It’s going to say that (i) is out of scope, and that’s because it was defined at the block level scope. That’s what the let keyword is going to do.

There is many other features I could show you, but I’m actually going to run this right now.

It’s going to work, and this will work in any browser actually and I’ll tell why in a moment.

I am going to run off to the little debugging console here.

You’ll see that we have testing out the arrow function.

(i) is out of scope. We called the logger with the ES6 class that I showed in the base class, and that’s all working. You might ask the question. What is this magic? How is this working? The answer is, it wouldn’t work by default, but there are some different libraries out there. One is called Traceur.

I actually have a little tool I’m running, and I’ve already run it to generate some code. This is called GULP. [http://gulpjs.com/] We’re not going to have time to get into this one, but it’s a JavaScript based task tool and you can run different built tasks.

What I am doing is every JavaScript file in the folder I just showed earlier that’s an ES6 JavaScript file.

I am compiling those using this Traceur. I mentioned JavaScript doesn’t have a compiler. This is kind of a reverse compiler.

What Traceur will do is let you write modern code, and then it reverse-engineers it back into ECMAScript 5. Which is what today’s browsers support type of code.

In scripts, you’ll see I have a compiled folder. With arrowFunctions.js script, my logger.js and my scopeAndlet.js.

You’ll see this is what actually looks like to make it work cross browser.

The cool thing is this will work cross browser. I just included one little Traceur script in my web page, and I’m able to start writing modern ECMAScript 6 with classes and all of that code, but have it work in the older browsers.

This is something that’s still early. I do know of some companies that are going this route or a lot of companies are doing. If they want this but don’t want to use this kind of reverse compilers, they’ll use something like Typescript [http://www.typescriptlang.org/]. A lot of cool stuff you can do there.

Summary:

• Many C# concepts carry over to JavaScript
• By using JavaScript you can push more functionality to the client
• JavaScript isn’t strongly-typed like C#
• Be careful to type issues and equality checks in JavaScript

Many of the same concepts you can see carry over. There are as I mentioned earlier a few sharks in the water, you have to watch out for though.

There’s a lot of functionality that you can push down to the client, and really give that user more of a desktop‑like experience is the way I like to word it. JavaScript is not strongly typed as you saw. There’s a very limited set of types we talked about.

There are a few issues you have to watch out for like the scope, the equality checks with the triple equals versus the double (= = =) vs (= =).

The post ECMAScript 6 (ES6) – The Future Look of JavaScript for C# Developers appeared first on Interface Technical Training.