When HTML first gets loaded into memory in the browser, it gets put into the Document Object Model or (DOM).
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’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.
Key ES6 (ECMAScript 6) Features
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.
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.
They have a way to destructure and work with objects and arrays which is very interesting.
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.
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 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.
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.
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.
You notice that they actually have the class keyword highlighted.
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.
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.
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 are a few issues you have to watch out for like the scope, the equality checks with the triple equals versus the double (= = =) vs (= =).