Developer Visual Studio / ASP.NET – Interface Technical Training https://www.interfacett.com Fri, 23 Jun 2017 23:40:06 +0000 en-US hourly 1 ECMAScript 6 (ES6) – The Future Look of JavaScript for C# Developers https://www.interfacett.com/blogs/ecmascript-6-es6-the-future-look-of-javascript-for-c-developers/ https://www.interfacett.com/blogs/ecmascript-6-es6-the-future-look-of-javascript-for-c-developers/#respond Thu, 21 May 2015 23:08:14 +0000 http://www.interfacett.com/blogs/?p=?p=20621 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 … Continue reading ECMAScript 6 (ES6) – The Future Look of JavaScript for C# Developers

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

]]>
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.

JavaScript Webinar link image of Dan Wahlin at Interface Technical Training

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.

JavaScript – Related Technologies

HTML

DOM Interaction

CSS Manipulation

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.

Key ES6 (ECMAScript 6) Features

Modules

Classes

Block Scope

Destructuring

Arrow Functions

Default Parameters

Generators

More…

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/.

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

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.

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

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.

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

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

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

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.

005-Visual-Studio-JavaScript-lamnda-ES6-ECMAScript-6

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.

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

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.

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

Functions are much more compact.

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

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.

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

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.

010l-function-JavaScript-lamnda-ES6-ECMAScript-6

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.

011-function-JavaScript-lamnda-ES6-ECMAScript-6

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.

012-function-JavaScript-lamnda-ES6-ECMAScript-6

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.

014-function-JavaScript-lamnda-ES6-ECMAScript-6

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

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

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

016-browser-function-JavaScript-lamnda-ES6-ECMAScript-6

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

017-browser-function-JavaScript-lamnda-ES6-ECMAScript-6

(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.

Traceur JavaScript Lamnda

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.

019-tracer-JavaScript-lamnda-ES6-ECMAScript-6

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.

020-tracer-JavaScript-lamnda-ES6-ECMAScript-6

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.

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

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.

]]>
https://www.interfacett.com/blogs/ecmascript-6-es6-the-future-look-of-javascript-for-c-developers/feed/ 0
JavaScript for C# Developers – Differences between JavaScript Dynamic Syntax and C# https://www.interfacett.com/blogs/javascript-for-c-developers-the-difference-between-javascript-dynamic-syntax-and-c/ https://www.interfacett.com/blogs/javascript-for-c-developers-the-difference-between-javascript-dynamic-syntax-and-c/#comments Thu, 14 May 2015 21:00:24 +0000 http://www.interfacett.com/blogs/?p=?p=20533 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. You can watch the entire webinar at JavaScript for C# Developers webinar Dan Wahlin teaches Web Development and .NET Visual Studio classes at Interface Technical Dan’s instructor-led training includes … Continue reading JavaScript for C# Developers – Differences between JavaScript Dynamic Syntax and C#

The post JavaScript for C# Developers – Differences between JavaScript Dynamic Syntax and C# appeared first on Interface Technical Training.

]]>
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.

JavaScript Webinar link image of Dan Wahlin at Interface Technical Training

You can watch the entire webinar at JavaScript for C# Developers webinar

Dan Wahlin teaches Web Development and .NET Visual Studio classes at Interface Technical

Dan’s instructor-led training includes JavaScript, AngularJS, jQuery, Node.js, HTML5, ASP.NET MVC, C#, and C# design patterns. Dan’s classes can be attended in Phoenix, AZ or online with Remote Live.


Webinar Transcription:

Now we talked about some of the key similarities of C# and JavaScript Key concepts of C# and JavaScript Syntax and you can see some of the fundamental concepts like Methods, Loops, Conditionals, and Variables. They are very similar between languages. If you currently work in C#, you are not going to struggle learning the syntax of JavaScript.

In this post, I’ll demonstrate some differences in JavaScript and C# where people tend to struggle.

Key Defenses between JavaScript and C#

  • JavaScript is a dynamic language!
  • Variables are not strongly-typed
  • No native support for namespaces and classes (until ES6)
  • Only 2 levels of variable scope (until ES6)
  • Equality comparisons can be tricky
  • Functions are objects by default

First, JavaScript is a totally dynamic language. There is no compiler which is a little bit of a bummer if you’re used to getting the error notifications as you compile. You have to go and do what I did earlier Key concepts of C# and JavaScript Syntax and go into Chrome Developer Tools or IE Developer Tools, to figure out any JavaScript errors.

Another way that it JavaScript differs from C# is with JavaScript, you don’t have the same types of system. In fact, you don’t have types like int, float or double. You do have the concept of them, but you don’t have the same exact data types.

In fact, you always use “var,” as you’re defining your variables. Whereas with C#, we’re used to strongly typed applications. Also, there’s absolutely no native support currently for Namespaces 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. JavaScript doesn’t need it, we have that through ECMAScript 5, which is the current version that most browsers support. But ECMAScript 6, which we’ll demonstrate in another post, does support that concept of reusable code. There are a lot of cool things you can do with ECMAScript 6.

There is only two levels of Variable Scope in JavaScript unlike three levels in C#. In C#, we’re used to the Class Level, and then we have the Method Level, then we have the Block Level. In JavaScript, by default, we have only two levels. (Until ECMAScript 6 is released)

You have variables that are global and you have function level. But if you define something like in the loop or if statement block, that is not actually a scoped definition. We can actually step on another definition that is outside of that to watch out in the JavaScript.

One of the biggest kind of “Sharks in the water,” is the Equality Comparisons. We’ll show some demos of the features later.

With C# you can use the double equals ( = = ) and it just automatically compares if they are equal or not. You’ll see in JavaScript that it gets a little tricky, and there’s something else that I am going to show you here that you can use. I’ll actually recommend you use when you are writing JavaScript.

Finally functions in the C#, don’t stand on their by themselves. Functions are always in classes or structures or something in C#. Well in JavaScript, functions can totally stand on their own. They’re actually objects. We will be talking about that as well.

JavaScript Data Types

Primary Types Composite Types Special Types
Sting Object Null
Number Array Undefined
Boolean

Let’s look and the data types, I mentioned that with JavaScript, we don’t have the different data types, or at least the robust nature of the data types we have in C#.

What we have is Primary, Composite and some Special Types.

Primary Types

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. Primary types can have decimals, they can be whole numbers, that really just depends.

Boolean’s; We do have the ability to numerically evaluate a Boolean in JavaScript, unlike C# where true is true and false is false and there is no numeric equivalent per se.

Composite Types

In JavaScript, zero (0) is a false, a one (1) is true like several other developer languages. We also have object which is the base granddaddy of them all at the top of the hierarchy, very similar to C# in that regard.

We have Arrays, we showed list in a previous post Key concepts of C# and JavaScript Syntax.

Special Types

In Special Types we also have null, which everybody is used too in the C#. But we have this other one, it is called Undefined which we’ll look at later in this post.

Instead of just checking that something is Null, you’ll often check if it is null or is it Undefined. I will show you some short cut ways that we can actually do that.

Demo Image Learn JavaScript for C# Developers

In this demo we’ll look at a few of these key language differences in C# and how they manifest themselves in JavaScript.

First half, we start with Equality.

Equality in Visual Studio key language Differences Learn JavaScript for C# Developers

In C#, If I was to say, “Hey, does 5 equal 5 in this example?” You would probably say, “Of course not.” Well, in JavaScript it depends. With JavaScript, if I were to code like this:

Equality example in JavaScript Learn JavaScript for C# Developers

If age equals other age, with the normal double equals that we are used to for quality in C#. That actually will evaluate to true. That is a little bit shocking at first, if you’re brand new to JavaScript.

Well, that is not how it should be, at least in C#. But JavaScript will do some coercion. It will actually try to convert so that the data types can be compared. Technically 5 in quotes ‘ ‘  is equal to 5 here.

Equality Code Example language Differences Learn JavaScript for C# Developers

One other difference to point out is, if you’ll notice I used the single quotes ‘  ‘  like a character in C#.

In JavaScript, I can just as easily have done this with single or I could use double quotes “”.

Equality double quotes “” example code Learn JavaScript for C# Developers

Either way, it works. A lot of people (including myself) like the single quotes in JavaScript. That’s a pretty big jump if you are doing C# for the last five to ten years and are making the switch.

I mentioned undefined or null. You’ll notice address is not a signed value. If we actually to run this code right and we try to log the value of address, all it does is update the little bit of div at the top.

Equality Output div code language Differences Learn JavaScript for C# Developers

When I run this. It will show the output but the address is undefined, it doesn’t have a value.

Equality address undefined code example Learn JavaScript for C# Developers

It’s not null, it’s undefined.

Learn JavaScript for C# Developers

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. I’ll run this little page.

C# Code view Differences Learn JavaScript for C# Developers

It’s not really impressive output, but you’ll see it’s true that quoted ‘5’ == 5

Equality Double = = and Triple equals === example Learn JavaScript for C# Developers

If we use the double quotes.

Here’s the trick I want to show you. It’s false if we use the triple equals ( = = = ).

Equality Triple Equal Example === Learn JavaScript for C# Developers

I don’t like languages that coheres 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.

Undefined Value Example - Learn JavaScript for C# Developers

That’s because it hasn’t been assigned a value yet, vs street, you can see is null that will be used to in C#. That would be one example of some of the differences.

 

Scope

You” notice I have a variable in JavaScript called “age”.

Scope Example Code in Visual Studio - Learn JavaScript for C# Developers

If we do an Alert, the alert is like a message box that pops up. It is going to show it is 55. But notice in this loop, I am defining a new “age” and using that “age” to actually loop through and then riding out age.

Loopfunction JavaScript code example - Learn JavaScript for C# Developers

Well, that’s going to be function scope, so we have global scope and function scope here.

Global Scope vs Functional Scope - Learn JavaScript for C# Developers

Then down here at the bottom, you’ll notice I’m doing a block.

LoopBack Function Block example code - Learn JavaScript for C# Developers

Just four loops standing on its own. I am also redefining “age” as 0.

Now the question is what’s that going to affect? Is it going to affect the top Global Scope age? Or is it going to affect the Function Scope?

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.

Showing Alert in Browser - Learn JavaScript for C# Developers

That’s what we would expect that would be correct. We’ll click “ok” and then, the internal one in the function, when it gets done looping, it was 5.

Showing Alert in Browser 2 - Learn JavaScript for C# Developers

I would expect that. But notice the last one, it should have written out 55. Instead, it wrote 5.

Scope in JavaScript Browser - Learn JavaScript for C# Developers

The reason is we over-load the value by doing “Var age” because there is no block level scope in JavaScript.

Var Age Example code - Learn JavaScript for C# Developers

Now, you’re going to see that it’s going to change in ECMAScript 6. There’s a new keyword they are going to introduce called, “Let,” and that will make the age scope only to the block.

Let LoopFunction Example - Learn JavaScript for C# Developers

ECMAScript 6 will help with some of the problems with the scoping. But, that’s not quite ready for prime-time yet. That’s another difference that you’ll need to know about is the scoping in JavaScript.

Another big difference in Functions can totally stand on their own in the JavaScript world. Whereas in C#, you have to put your methods inside of your Class.

C# code example of loopFunction - Learn JavaScript for C# Developers

Well functions in JavaScript are actually objects. This little function definition for a person, you can think of that as like a class. Normally, add under that class, a property called name and assign it to Jane Doe.

Now I can move up that person, just like its regular class.

Create Instance of Object - Learn JavaScript for C# Developers

That’s definitely unique compared to the C# type of approach because we are used to classes and you move up to the class.

Because we don’t have classes in JavaScript, you can substitute this function approach because functions are objects. There is a lot of interesting things you can do. This would just write out Jane Doe, if we are to run this one.

Inheritance

The last and big difference between C# and JavaScript 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.

JavaScript Supports Prototypal Inheritance - Learn JavaScript for C# Developers

There is a prototype property that every object can hear it from the base object in JavaScript. You’ll notice in this case, we have an object called base.

Learn JavaScript for C# Developers

It is a blueprint, it is like our class, if you will. Then off base, I am going to go to the prototype, that’s inherited from an object in JavaScript. I am going to add a log function that just does an alert when it’s run.

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 and say “Do you have a log function?”

What we are going to do is to a have a child and we are going to assign to the child’s prototype, the new base.

New Base Code Example - Learn JavaScript for C# Developers

Really, that’s going to make the prototype of the base object available here to our child.

Function Alert Add code example - Learn JavaScript for C# Developers

After that, we are going to attach our own little add method. What is interesting here is, down 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?”

Find New Log code- Learn JavaScript for C# Developers

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 in this example above, 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. ECMAScript 6 will be changing 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.

The post JavaScript for C# Developers – Differences between JavaScript Dynamic Syntax and C# appeared first on Interface Technical Training.

]]>
https://www.interfacett.com/blogs/javascript-for-c-developers-the-difference-between-javascript-dynamic-syntax-and-c/feed/ 3
JavaScript for C# Developers – Key concepts of C# and JavaScript Syntax https://www.interfacett.com/blogs/javascript-for-c-developers-key-concepts-of-c-and-javascript-syntax/ https://www.interfacett.com/blogs/javascript-for-c-developers-key-concepts-of-c-and-javascript-syntax/#comments Fri, 08 May 2015 21:19:46 +0000 http://www.interfacett.com/blogs/?p=?p=20454 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. You can watch the entire webinar at JavaScript for C# Developers webinar Dan Wahlin teaches Web Development and .NET Visual Studio classes at Interface Technical Dan’s instructor-led training includes … Continue reading JavaScript for C# Developers – Key concepts of C# and JavaScript Syntax

The post JavaScript for C# Developers – Key concepts of C# and JavaScript Syntax appeared first on Interface Technical Training.

]]>
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.

JavaScript Webinar link image of Dan Wahlin at Interface Technical Training

You can watch the entire webinar at JavaScript for C# Developers webinar

Dan Wahlin teaches Web Development and .NET Visual Studio classes at Interface Technical

Dan’s instructor-led training includes JavaScript, AngularJS, jQuery, Node.js, HTML5, ASP.NET MVC, C#, and C# design patterns. Dan’s classes can be attended in Phoenix, AZ or online with Remote Live.

Webinar Transcription:

What we’re going to do is go through some of the key concepts and knowledge that you can actually carry over from the C# world to JavaScript. The target audience for this particular post 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. If you’re trying to move more into JavaScript, you’ll actually benefit from this as well, but everything’s going to be .NET‑based.

In this post, we’ll look into Why you need to start learning JavaScript and we’ll compare C# and JavaScript Syntax.

In future posts, we’ll address the following:

We’re going to start off with why would you want to learn JavaScript in the first place. If you live on the server side, or you’re building desktop applications, or something along those lines, then, why take the time to learn this?

The answer there is “There are a lot of good reasons to do it, such as single‑page applications or validation, and much more that we’re going to talk about.”

Why you need to learn JavaScript

If you’ve been writing C# code for a while and then look at JavaScript like this:

Junkyard Mess Dan Wahlin Learning JavaScript Webinar

It looks like one big mess and is not the most pleasant language that you want to dive into. JavaScript feels really messy at first glance.

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.

With JavaScript, there are a few bumps along the way and I’ll point a few of them out later. JavaScript is actually very easy to get started with and you can do some really powerful things with it.

Why learn JavaScript in the first place? Really, it all boils down to if you’re building web applications and you want to do more on the client, then, this is a great way to go. JavaScript is the programming language of the Web. That’s not going to change anytime soon, whether you like it or don’t like it.

Client-side presentation images of why you need to learn JavaScript

I started with JavaScript when it was actually called “LiveScript” back in the early ’90s. As I kept working with JavaScript, a lot of people were thinking I’m crazy, because I liked this language. I’ve actually always liked JavaScript in general.

Today, JavaScript it’s very popular and there’s a lot you can do with it JavaScript also plays a critical role in our Web applications. As an example, you might want to do some client‑side validation.

Validate User Input on client-side learning Javascript for C#

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 the client an instant feedback scenario.

Provide Client Sorting Filtering Paging learn JavaScript webinar

You might also want to do some filtering of data, paging and sorting on the Client-Side so it feels like a desktop application – JavaScript would enable this.

One of the big downfalls, I think, of the traditional Web applications is that every time you blink, it feels like, you’re doing a full‑page postback.

Eliminate full page postbacks with Ajax Learning JavaScript for C# Developers Webinar

With JavaScript, we can leverage AJAX and make asynchronous calls so that we can make more desktop‑like look and feel. It’s pretty snappy, you get the data very quickly. We’ll show an example later where it’s good on bandwidth and HTTP requests.

Build Single Page Applications SPA Learning JavaScript for C# Developers Webinar

I mentioned Single‑Page Applications (SPA), these are very popular today. Frameworks like AngularJS, or Ember.js, or Backbone, these are all JavaScript frameworks, or libraries that you can use to do some powerful processing.

Today, we’re really moving a lot of data from the server‑side load down to the client side. I recently got a Galaxy Note 3 with a quad‑core processor right on my phone. Why not let the phone do more of the heavy lifting and go that route?

Leverage Rich Libraries Frameworks Learning JavaScript for C# Developers Webinar

There’s a lot more you can do, as well you can leverage libraries. I mentioned jQuery which is another one that’s very popular. A lot of different things are JavaScript‑based. There’s much more we can talk about, but let’s do a demo of Server-side vs Client-side.

Demo intro slide Learning JavaScript for C# Developers Webinar

I’ll do a quick demo 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.

Postbacks in Visual Studio Learning JavaScript for C# Developers Webinar

We’ll open it and you can see it’s very basic, just has a drop‑down.

Standard full page postback Learning JavaScript for C# Developers Webinar

As you switch the drop‑down, it’s going to load some customers.

Brunswick Standard full page postback Learning JavaScript for C# Developers Webinar

We’ll go load all the customers in British Columbia. No big deal, right?

British Columbia full page postback Learning JavaScript for C# Developers Webinar

JavaScript can really help us out here in some scenarios, especially, if you have a lot of data. The problem is having to bring back this entire table, which is a lot of data, actually, depending on the size of your record.

We’ll look at it using Chrome Developer Tools, you can hit F12 or do command or control‑shift‑I.

Network Request Monitor Learning JavaScript for C# Developers Webinar

If 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.

Network Full Page Postback Learning JavaScript for C# Developers Webinar

We’ll select Alberta from the dropdown.

Alberta postback size Alberta-postback-size

It looks like the size of that was 11.3K for this customer ASPX. Let’s go look at Arizona, there’s more in Arizona it’s 13K.

Arizona size Learning JavaScript for C# Developers Webinar

Let’s do one more. Montana is about 13K.

Montana Size Standard Full page postback Learning JavaScript for C# Developers Webinar

You can see the size of the page actually coming back is fairly consistent but it depends on your data.

Now, let’s do the same app, but this particular app is using some JavaScript that you can see here.

JavaScript API Dataservice Learning JavaScript for C# Developers Webinar

This is using a little library called “KnockoutJS” to do data binding. It’s going to look the same, but let’s look at the actual data that’s sent back and forth.

KnockouJS data binding Learning JavaScript for C# Developers Webinar

Here’s the same type of app, but this is 100‑percent client‑side.

HTML API JSON data Learning JavaScript for C# Developers Webinar

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 XHR, which will mean our XML HTTP request, in other words, AJAX calls.

XHR Ajax calls in JacaScript Learning JavaScript for C# Developers Webinar

Let’s run British Columbia.

It looks like that was 1.8K of data. Not bad.

JavaScript and Ajax British Columbia dropdown list Learning JavaScript for C# Developers Webinar

Let’s go to Montana again.

It looks like that was only 256 bytes. Not bad.

Montanna dropdown list Ajax Learning JavaScript for C# Developers Webinar

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.

Now, by leveraging AJAX, I’m able just to send the raw data that you can see here.

Raw data Ajax Learning JavaScript for C# Developers Webinar

Instead of having to send all the table tags and the TRs and the TDs back over to the client. That’s a quick look at one reason that you might consider JavaScript as you’re building your applications.

Similarities between JavaScript and C#

Now that you’ve seen the reason to learn JavaScript, let’s actually look at some the similarities between C# and JavaScript and how they relate.

Similarities Between JavaScript and C# Learning JavaScript for C# Developers Webinar

The good news is there are a lot of concepts that actually carry over if you already know C#. One of the things when you first learn C# or Java, or whatever your language is, is how to use the squiggly brackets {} and semicolons ;  They also exist in JavaScript as well.

Both languages have some very close concepts that you can transfer over almost directly. For instance, they both support objects. You can actually create a new instance of an object in C# and in JavaScript and work with it. You’re going to see a little later today that the way you do the objects is certainly different, but very similar concept there.

Variables are very similar in both JavaScript and C#. In fact, if you use the var keyword for dynamic inferred typing in C#, then, you can also use the var keyword in JavaScript. Very similar yet very different though on the data types, which we’ll show as well.

Both languages use functions. I think any language out there uses a lot of functions. That’s very common.

Finally, the conditional “if” statements, “switch” statements and “for loop” statements are practically identical in both languages. We’ll display those as well.

Demo image Comparing C# and JavaScript Syntax Learning JavaScript for C# Developers Webinar

In this demo I have some C# code in a class called “Similarities.cs.”

SimilaritiesCS in Microsoft Visaul Studio Learning JavaScript for C# Developers Webinar

I’ve broken down different parts of this. Variables.

Variable Visual Studio C# Learning JavaScript for C# Developers Webinar

We’re going to talk about some properties and some other features.

Let’s start with the one that’s open. In C#, we’re all used to doing something like prop tab tab to get a property definition. It looks like this.

Variables GetSet Microsoft Visual Studio Learning JavaScript for C# Developers Webinar

You have a Get and a Set.

With the current version of JavaScript…keep in mind there is a new version that’ll be coming out, but it’s not widely supported yet, in browsers.

The current version, that this.age = 0 would be a very similar definition to a property.

Variables JavaScript Syntax Variables-JavaScript-Syntax

It almost looks like a field it’s very similar.

You might wonder what the heck is this? It’s similar to C# however it changes context.

One thing to watch for in JavaScript, is that normally if you create a new Similarities here…we’ll call it “S”…and then you say, “S.age,” then, this would represent the Similarities, but the keyword “this” can change context.

Basically, whoever calls into “this” is what “this” is. Whereas in C#, it always represents the actual object itself. A little bit different but very similar as far as what you can define.

Let’s go to a simple variable.

Simple Variable Syntax Learning JavaScript for C# Developers Webinar

You’ll notice that we have a string, “Fred,” and then, we have a list of string called “names.” This is what it would look like in JavaScript.

Note that I could have just as easily, if it was in a function, put var. Of course, as a field, you don’t do that, in C#, but you’ll notice that it’s almost identical. You’ll see though that the typing is going to be quite a bit different with JavaScript, as we’ll talk about in a moment.

Arrays can actually be defined in different ways, in JavaScript, but arrays are similar in that you can add items into a collection, like a list of string. The way they work though is actually quite a bit different which we’ll look at as well.

Methods.

Methods Syntax Microsoft Visual Studio Learning JavaScript for C# Developers Webinar

We don’t officially call them “methods” in JavaScript. We call them “functions,” but it really doesn’t matter. A lot of people do say “It’s a method.” Basically, it’s a function that does something.

Here we have a C# method, called “GetName,” that returns a string.

C# GetName Syntax Learning JavaScript for C# Developers Webinar

This is the equivalent in JavaScript.

JavaScript Syntax Function GetName Learning JavaScript for C# Developers Webinar

You’ll notice it’s almost identical, aside from needing to input the “function” keyword.

You’ll note that there’s no return type. JavaScript doesn’t specify the type that’s returned from functions. That is a little bit different yet very similar and easy to get started with.

Arrays – Loops – Conditionals

Finally, Arrays, Loops, and Conditionals are also very similar. Here, we have a little field names.

034-Arrays-Loops-Conditionals-Syntax-learn-javascript

Pretty standard C# code, a bit contrived, but good for the demo.

We’re going to loop through. As we loop, if it equals zero (0), we’re going to add into the list up top, the list of string, first name. If it’s not zero (0), then, we’re going to add name, plus, whatever it is as we’re looping.

Let’s look at the JavaScript version. Again, very similar to C#.

Arrays Loops Conditionals JavaScript Version Learning JavaScript for C# Developers Webinar

We use the function. Notice that the for loop is identical, because we can use var in C# if we want, for type inference. The if is identical. As we move down, everything looks pretty good.

One of the big aspects we’ll talk about in the next section is that the conditionals in JavaScript are a little bit strange. This is the shark in the water that you’ve got to watch out for. We’ll address tge conditionals in the next post.

 

The post JavaScript for C# Developers – Key concepts of C# and JavaScript Syntax appeared first on Interface Technical Training.

]]>
https://www.interfacett.com/blogs/javascript-for-c-developers-key-concepts-of-c-and-javascript-syntax/feed/ 3
Video – JavaScript for C# Developers With Dan Wahlin https://www.interfacett.com/blogs/lunchtime-webinar-javascript-c-developers-dan-wahlin-sept-24-2014-1200psdmst/ https://www.interfacett.com/blogs/lunchtime-webinar-javascript-c-developers-dan-wahlin-sept-24-2014-1200psdmst/#respond Wed, 17 Sep 2014 17:26:35 +0000 http://www.interfacett.com/blogs/?p=?p=19160 Watch the complete video webinar   Is JavaScript worth taking the time to learn if I’m a server-side .NET developer? How much of C# carries over to JavaScript? In this Webinar Dan Wahlin will answer these questions and more while also discussing similarities between the languages, key differences, and the future of JavaScript (ES6). If … Continue reading Video – JavaScript for C# Developers With Dan Wahlin

The post Video – JavaScript for C# Developers With Dan Wahlin appeared first on Interface Technical Training.

]]>
JavaScript-Webinar-banner

Watch the complete video webinar

 


Is JavaScript worth taking the time to learn if I’m a server-side .NET developer? How much of C# carries over to JavaScript? In this Webinar Dan Wahlin will answer these questions and more while also discussing similarities between the languages, key differences, and the future of JavaScript (ES6). If you’ve been wanting to push more of your application’s functionality to the client by using JavaScript then this webinar will provide solid look at how you can get started.


Dan Wahlin teaches Web Development and .NET Visual Studio classes at Interface Technical Training. Dan’s instructor-led training includes JavaScript, AngularJS, jQuery, Node.js, HTML5, C#5 and Visual Studio 2012. Dan’s classes can be attended in Phoenix, AZ or online with Remote Live™.Dan Wahlin is the founder of Wahlin Consulting which specializes in Web technologies such as JavaScript, AngularJS, HTML5, Node.js, C#, ASP.NET MVC, Web API and SharePoint. He speaks at conferences and user groups around the world and has written several books on Web technologies. He has also published several courses covering a range of technologies including the new AngularJS JumpStart course. Dan blogs at weblogs.asp.net/dwahlin, runs the Web Weekly newsletter (a great way to stay up on the latest technologies), and writes columns for various technical magazines.

dan-wahlin-image

The post Video – JavaScript for C# Developers With Dan Wahlin appeared first on Interface Technical Training.

]]>
https://www.interfacett.com/blogs/lunchtime-webinar-javascript-c-developers-dan-wahlin-sept-24-2014-1200psdmst/feed/ 0
The Value of Adding AngularJS to your Development Stack – with Dan Wahlin https://www.interfacett.com/blogs/value-adding-angularjs-development-stack-dan-wahlin/ https://www.interfacett.com/blogs/value-adding-angularjs-development-stack-dan-wahlin/#respond Fri, 12 Sep 2014 17:51:33 +0000 http://www.interfacett.com/blogs/?p=?p=19125 AngularJS is one the hottest JavaScript group frameworks available today. Is it worth adding it to your development stack? That’s what we’re going to address in this video. AngularJS is one the hottest JavaScript group frameworks available today. Is it worth adding it to your development stack? That’s what we’re going to address in this … Continue reading The Value of Adding AngularJS to your Development Stack – with Dan Wahlin

The post The Value of Adding AngularJS to your Development Stack – with Dan Wahlin appeared first on Interface Technical Training.

]]>
AngularJS is one the hottest JavaScript group frameworks available today. Is it worth adding it to your development stack? That’s what we’re going to address in this video.


AngularJS is one the hottest JavaScript group frameworks available today. Is it worth adding it to your development stack? That’s what we’re going to address in this video.

What’s so compelling about AngularJS anyway? First, it’s a client-side JavaScript framework with one core script. You won’t have to integrate a ton of third‑party scripts into your applications and then worry about whether or not those scripts are going to be compatible in the future. AngularJS is supported by a full‑time team at Google and has over 800 individual open-source contributors as well.

With AngularJS you can send and retrieve data from RESTful services, minimize code significantly by using data binding, provide a way to organize code and allow teams to work together more efficiently, switch between application screens quickly without reloading the entire page, create unit tests to ensure your code is working properly, validate data submitted by users, and, well, I could go on and on. It has a lot of great features baked into the framework.

For me, the power of AngularJS is that you can create snappy, single-page applications very quickly and they perform like they were built for the desktop. The code is flexible. It’s easy to deploy, update, and reuse. A great side benefit is the any app can be used on multiple devices.

Let’s talk about three key scenarios where AngularJS can be leveraged in the real world. Also discuss the AngularJS End-to-End SPA Development class at Interface Technical Training and how it can help you learn this powerful framework quickly and efficiently and at a professional level.

The scenarios that we’ll discuss include how to maximize productivity, write less code, and make your code more powerful and easier to maintain. How to migrate from existing technologies and allow apps to run on multiple devices and finally, how you can leverage AngularJS features to replace desktop applications with cross‑device web applications.

Let’s jump right into scenario one.

I was recently teaching a small team from a large global electronics manufacturer who is building an enterprise‑scale lab that was going to be used by a lot of people throughout the company. They had previously done most of their web development using jQuery and needed more of a framework for the new application.

JQuery is arguably the most popular client-side JavaScript library in existence and for good reason. I’ve used it for many years and I love it. I love what it does as far as making AJAX calls, manipulating the DOM, handling events, and of course you can animate objects.

For all its strengths it does have a few weaknesses. For example, if you have a form with 10 controls in it, say eight text boxes and two dropdowns, then with jQuery you’re looking at writing a minimum of 20 lines of code just to get data in and out of the controls. What if the IDs are CSS class name changes on your controls? You end up having to modify your JavaScript code to accommodate the name changes. That’s a little bit challenging.

I call this a control oriented approach since your code relies heavily on the IDs defined on the controls. You’re always interacting with the controls to get data into and out of them. With AngularJS you can take advantage of a newer and more modern development technique, I like to call the data oriented approach.

Using the data binding functionality built into Angular you can wire up property values to controls and when the property values change the controls change. Likewise, if the controls change, the property values change. It’s quite magical actually. Once the data binding is in place you can modify the styles of controls, change their visibility, change their values, and do much more by changing property values.

By using the data oriented approach you don’t care about the ID or the CSS class on the control any longer. In fact in many situations you won’t need to give your controls an ID. Imagine how much code you can cut from your web applications. To top it off jQuery plays nicely with AngularJS in case you want to leverage specific jQuery features.

I know many companies have used Adobe Flex and Microsoft Silverlight so that they can have a 100 percent control over the application, but still have the ability to deploy it through a browser. It’s no secret that both Flex and Silverlight are getting less emphasis nowadays, especially since they don’t run on all devices.

What’s the alternative? If you’re thinking about migrating from Adobe Flex or Microsoft Silverlight then AngularJS is a natural transition. You’ll actually be pleasantly surprised at how many concepts carryover such as data binding, a declarative syntax, animations, and much more.

Once you understand the core features provided by AngularJS you’ll be extremely productive in no time at all. Now keep in mind there are other alternatives out there such as Ember.js, Backbone, Durandal, et cetera. The good news is that many of the same concepts carryover. For me personally, I like AngularJS for all the reasons I’ve mentioned up to this point.

For the final scenario, I worked with an international financial company who has a large desktop application installed base. They want to simplify the process of deploying their apps due to the number of devices being used in the organization, especially since the desktop apps won’t run on all these devices.

Traditional applications weren’t a good fit for the web since every user action caused the entire page to reload. With AngularJS, however, you can build snappy single-page applications to feel much more like desktop applications, but they have the added benefit of being able to run on tablets, phones, and other devices that employees may be using.

Here’s the actual app that you’ll be building in the AngularJS End‑to‑End course at Interface Technical Training. You’ll actually put together all the pieces yourself. For instance, you’ll incorporate RESTful services and database interactions, AJAX calls from AngularJS to those services, and learn about all the great functionality provided by AngularJS on the client-side such as data binding, validation, factories and services, custom directives, controllers, scope and more.

The app that you’re building in class will perform much like a desktop application, but it’s going to be able to run on any device. The AngularJS End‑to‑End development course will provide you with all the skills needed to build single page applications, enhance productivity and code reuse, and provide that desktop‑like feel with a web deployment model.

You’ll be able to ask all the questions you want throughout class to ensure that you take away the best practices used by some of the biggest companies in the world as they build AngularJS applications.

There you have it, three real‑world examples where AngularJS can be used to streamline the development of web applications and a summary of interfaces in End‑to‑End class. You’ll actually build an app from start to finish and learn to leverage the power of AngularJS at a professional level.

Now, the course can be attended here in Phoenix, AZ or online using our amazing RemoteLive™ technology. Check out the course outline for more details and I hope to see you soon in class.

Dan Wahlin
Web Development Instructor
Interface Technical Training

The post The Value of Adding AngularJS to your Development Stack – with Dan Wahlin appeared first on Interface Technical Training.

]]>
https://www.interfacett.com/blogs/value-adding-angularjs-development-stack-dan-wahlin/feed/ 0
Interface is excited to announce a whole new way to look at Developer training. https://www.interfacett.com/blogs/interface-is-excited-to-announce-a-whole-new-way-to-look-at-developer-training/ https://www.interfacett.com/blogs/interface-is-excited-to-announce-a-whole-new-way-to-look-at-developer-training/#respond Mon, 14 Apr 2014 16:38:30 +0000 http://www.interfacett.com/blogs/?p=?p=17285   The world that developers live in has been morphing over time. Changing technologies are a given, but changing jobs roles are often overlooked.   Introducing the new Developer program at Interface.  Web Developer focused on the server side? Check out our Open Server courses. WEB240: HTML, XHTML & CSS In-Depth Web Development Training Learn … Continue reading Interface is excited to announce a whole new way to look at Developer training.

The post Interface is excited to announce a whole new way to look at Developer training. appeared first on Interface Technical Training.

]]>
 

The world that developers live in has been morphing over time. Changing technologies are a given, but changing jobs roles are often overlooked.

 

Introducing the new Developer program at Interface. 


Web Developer focused on the server side? Check out our Open Server courses.

WEB240: HTML, XHTML & CSS In-Depth Web Development Training
Learn how to code web sites from the ground up using the best practices and web standards. This course includes many hands on labs which emphasize real world scenarios and challenges confronting web designers every day.

JS275: JavaScript Programming
The Web has changed a lot over the years as user interfaces have moved from displaying static data to more dynamic and flexible data. At the center of this change is JavaScript – one of the most popular scripting languages around.

HTML500: HTML5 and CSS3 Web Development
This new version of HTML provides developers with additional client-side power to enable them to build applications capable of running on desktops, laptops, tablets and mobile devices. Get up-to-speed on this amazing new version of the HTML language and its evolving importance in cutting-edge coding.

NODE300: Node.js/MEAN End-to-End Web Development
Node.js is one of the most revolutionary frameworks to come out in quite a while! Its asynchronous nature and flexibility makes it relevant for building everything from Web applications to client tools and you’ll find it being used in a variety of ways.


Find yourself developing on the client side? We have you covered with our Open Client classes.

WEB240: HTML, XHTML & CSS In-Depth Web Development Training
Learn how to code web sites from the ground up using the best practices and web standards. This course includes many hands on labs which emphasize real world scenarios and challenges confronting web designers every day.

JS275: JavaScript Programming
The Web has changed a lot over the years as user interfaces have moved from displaying static data to more dynamic and flexible data. At the center of this change is JavaScript – one of the most popular scripting languages around.

JS500: JavaScript and SPA Programming with jQuery, Knockout, AngularJS, Node.js and Grunt
Get up to speed on the latest JavaScript, data binding and SPA technologies. This course features a hands-on learning experience with expert instructor Dan Wahlin. Learn how to use Knockout, AgularJS, Node.js and Grunt to build dynamic Web applications.

JQRY300: Mastering jQuery
Learn how to use the jQuery scripting environment to boost productivity in Web Applications. You will learn how to use jQuery Plugins, create custom plugins, utilize client-side templates with Handlebars, mobile jQuery fundamentals and much more.

ANGJS300: AngularJS End-to-End SPA Development
The AngularJS End-to-End Application Development course provides a hands-on look at working with the AngularJS framework. Learn how to use the key features of AngularJS in single Page Application Features, define controllers, build re-useable data services with Factories and Services, build Custom Filters and HTTP interceptors in AngluarJS.

HTML500: HTML5 and CSS3 Web Development
This new version of HTML provides developers with additional client-side power to enable them to build applications capable of running on desktops, laptops, tablets and mobile devices. Get up-to-speed on this amazing new version of the HTML language and its evolving importance in cutting-edge coding.


If you are a Microsoft Web Developer we have built a course library that will train you on the fundamentals and the advanced topics to keep you on top of your career.

CS214: C#5 Programming with Visual Studio 2012
The C# Programming with Visual Studio course provides developers with the skills and knowledge they’ll need to succeed by providing an in-depth and hands-on analysis of different parts of the C# language. (MOC 20483)

CS314: Advanced C#5 Programming with Visual Studio 2012
Develop applications utilizing the latest .NET Framework and learn the core features of C#5 and Visual Studio 2012 technologies. Enhance your C# programming skills with this new advanced developer course.

CS410: C# Design and Application Patterns
Learn how to apply best practices to your C# development and .NET applications. This hand-on course uses real-life analogies that give developers the practical experience needed to succeed in their daily professions.

ASPMVC5: Microsoft ASP.NET MVC 5 Web Developer Training
Leap into ASP.NET MVC 5 using Visual Studio 2013. You will learn how to build web applications with the latest version of the Microsoft ASP.NET MVC 5 framework taught by author and instructor Stephen Walther. (MOC 20486)

JS275: JavaScript Programming
The Web has changed a lot over the years as user interfaces have moved from displaying static data to more dynamic and flexible data. At the center of this change is JavaScript – one of the most popular scripting languages around.

JQRY300: Mastering jQuery
This new version of HTML provides developers with additional client-side power to enable them to build applications capable of running on desktops, laptops, tablets and mobile devices. Get up-to-speed on this amazing new version of the HTML language and its evolving importance in cutting-edge coding.

HTML500: HTML5 and CSS3 Web Development
Learn how to apply best practices to your C# development and .NET applications. This hand-on course uses real-life analogies that give developers the practical experience needed to succeed in their daily professions.

DEV500: Building an HTML5 End-to-End Web Application with ASP.NET MVC 4, EF Code First and jQuery
Learn how to build HTML5 Web Applications End-to-End using Visual Studio 2012, ASP.NET, MVC4, Entity Framework Code First and jQuery in this 5-day advance Developer course taught by Microsoft MVP Dan Wahlin.


If you are a Microsoft Desktop/Device Developer we have kept our suite of C# courses.

CS214: C#5 Programming with Visual Studio 2012
The C# Programming with Visual Studio course provides developers with the skills and knowledge they’ll need to succeed by providing an in-depth and hands-on analysis of different parts of the C# language. (MOC 20483)

CS314: Advanced C#5 Programming with Visual Studio 2012
Develop applications utilizing the latest .NET Framework and learn the core features of C#5 and Visual Studio 2012 technologies. Enhance your C# programming skills with this new advanced developer course.

CS410: C# Design and Application Patterns
Learn how to apply best practices to your C# development and .NET applications. This hand-on course uses real-life analogies that give developers the practical experience needed to succeed in their daily professions.


For all the technologies we teach, please see our complete course schedule.

Classes at Interface can be attended from anywhere online with RemoteLive

If you need further assistance to sort it all out, our friendly representatives are always ready help. Give them a call at 602-266-8585 or email at info@interfacett.com

 

The post Interface is excited to announce a whole new way to look at Developer training. appeared first on Interface Technical Training.

]]>
https://www.interfacett.com/blogs/interface-is-excited-to-announce-a-whole-new-way-to-look-at-developer-training/feed/ 0
Video – Getting Started with Java Programming https://www.interfacett.com/blogs/video-getting-started-with-java-programming/ https://www.interfacett.com/blogs/video-getting-started-with-java-programming/#respond Wed, 26 Feb 2014 18:25:35 +0000 http://www.interfacett.com/blogs/?p=?p=16906 Video – Getting Started in Java Programming with Judy Lipinski In this Interface Video Blog, Java instructor Judy Lipinski discusses what developers will need to know before getting started developing with Java. Judy says that Java programming is a great programming language for beginners to learn. Java teaches students how to understand Object Oriented concepts. … Continue reading Video – Getting Started with Java Programming

The post Video – Getting Started with Java Programming appeared first on Interface Technical Training.

]]>
Video – Getting Started in Java Programming with Judy Lipinski


In this Interface Video Blog, Java instructor Judy Lipinski discusses what developers will need to know before getting started developing with Java.

Judy says that Java programming is a great programming language for beginners to learn. Java teaches students how to understand Object Oriented concepts. There is a great deal of flexibility with Java. For example, it can be designed on a Mac or PC and then deployed to a Linux Server without the need to change any of the Java code.

What’s the difference between Java and JavaScript?

JavaScript exists within the browser while Java is the Object Oriented language that can be uses in many environments such as desktop applications and on the sever side where we can connect to web services using Java. The programming of Java is similar to JavaScript but the syntax is different.

In this video, Judy also discusses topics relating to Java including:

Java Security vulnerabilities.

How Java is being used for Android App development and different areas of client side and enterprise applications using Java Servlets. Java has been around for a while and is one of the early tools that allow different environments to communicate. Java is open source so you’re not locked in to using only one vendor.

You can get started in Java simply using a text editor but tools that simplify the process are Eclipse, IntellijIDEA and NetBeans. These tools are free and once someone learns one tool, it’s rather simple to use the other options.

Judy also discusses what the numerous acronyms associated with Java include JDK, SDK, JRE and JVM mean. How similar or different is Java from C# programming and what the Java Enterprise Edition (Java EE) is.

Finally, Judy discuses what students should already know before attending Java training?

Judy Lipinski teaches JAVA200: Java Programming – An In-Depth Introduction at Interface Technical Training in Phoenix, AZ. This class can be attended from anyher online with RemoteLive™.

The post Video – Getting Started with Java Programming appeared first on Interface Technical Training.

]]>
https://www.interfacett.com/blogs/video-getting-started-with-java-programming/feed/ 0
Video – The Fundamentals of C# Generics by Dan Wahlin https://www.interfacett.com/blogs/video-c-generics-fundamentals-by-dan-wahlin/ https://www.interfacett.com/blogs/video-c-generics-fundamentals-by-dan-wahlin/#comments Wed, 14 Aug 2013 16:11:56 +0000 http://www.interfacett.com/blogs/?p=?p=14681 In previous posts, we looked at getting started with C# Interfaces and understanding Polymorphic behaviors. In this post, we’ll look at using C# Generics and Custom Generics in your applications. Video transcription  Dan Wahlin: An important feature of the C# language is Generics. Generics are not necessarily new. They have actually been out since C# 2. They … Continue reading Video – The Fundamentals of C# Generics by Dan Wahlin

The post Video – The Fundamentals of C# Generics by Dan Wahlin appeared first on Interface Technical Training.

]]>

In previous posts, we looked at getting started with C# Interfaces and understanding Polymorphic behaviors. In this post, we’ll look at using C# Generics and Custom Generics in your applications.

Video transcription

 Dan Wahlin:

An important feature of the C# language is Generics. Generics are not necessarily new. They have actually been out since C# 2. They provide a way to make it a lot easier to work with code, but also to make your code more efficient, and definitely catch errors up front as you’re writing the code.

In this particular demonstration, I’m going to walk through some just fundamentals of what C# Generics are and how you can use them in applications.

To start, I have a little bit of code here already ready to go. You can see that I have a car class,

Add Class to # Generics Fundamentals by Dan Wahlin

This car class has an ID, and it has a make property. Now, we can certainly add others, such as make, model, year, things like that. But we’re just going to go with two simple ones.

[0:48] What I have here in my program is, we’re going to new up our car. Then I’m going to use, this is a special type of initializer, called an object initializer.

002-object0initializer--C#-Generics-Fundamentals-by-Dan-Wahlin

This is going to assign the properties for ID and make, and then we’re going to use these.

[1:04] One way I could put these two Cars into a collection, is to actually use an Array. The problem with Arrays in C# is they’re fixed length. If you want to keep adding to that, you’d have to make new Arrays, and then copy back and forth between them. It’s a little bit problematic.

What I’m going to do instead is use a Generic. You’ll notice that we’ve already included System.Collections.Generic.

System.Collection.Generics # Generics Fundamentals by Dan Wahlin

This is the default namespace for Generics in C#. If you’re new to them, this is one that’s actually added for you in the projects.

[1:36] What I’m going to do is create a List of Car like this:

List. # Generics Fundamentals by Dan Wahlin

We can definitely use the var then select a List of Car, like this.

varC in Visual Studio # Generics Fundamentals by Dan Wahlin

Or, I’m actually a pretty big fan of the var, which basically lets the compiler figure out the data type on the fly. We’ll say Cars is new List of Car. That’s how I think of the Generic marker brackets <>.

006-varC#-Generics-Fundamentals-by-Dan-Wahlin

[2:06] What a Generic is? It is a code template. What’s going to happen here is I want to create a List but a specific type. I could always create a List of Object. We could use the old ArrayList as an example. The problem with that is, when you add it, it gets what’s called “boxed”. Then, when you pull it out, you have to cast it from an Object or convert it back to a Car.

By doing a Generic, I get a strongly‑typed way to add it. In fact, you’ll see here, if I just do a new List and then say Cars., notice when I do add here that we can only add a Car.

Add list in Visual Studio. # Generics Fundamentals by Dan Wahlin

[2:40] If I try to add an INT or a STRING or a BOOL or an Engine, or something else, it’s not going to work properly. That’s as it should be. That catches us as we compile, and it makes it so we don’t add stuff we shouldn’t be adding.

What I’m going to do is I’m going to use a little default Array, or Collection Initializer, you’ll hear it called. I’m going to create a List of Car and then do a { and end } and a semicolon (;)

008-C#-Generics-Fundamentals-by-Dan-Wahlin

[3:06] In here, I can actually just put my Cars and just list them. I could call Cars.Add > Cars.Add > Cars.Add etc… But this provides an easy way, since I already have the Cars, to add them into the Array.

We’ll do: Car1, Car2. Just to prove this works, let’s go ahead and do a quick foreach then tab tab, get a code snippet going.

Using Foreach in Visual Studio. C# Generics Fundamentals by Dan Wahlin

We’ll say foreach Car in Cars. Let’s write out Car.Make. We should get Ford and Toyota written out.

Foreach var C# Generics Fundamentals by Dan Wahlin

Let’s go ahead and run it. You can see that indeed it works.

Running foreach. C# Generics Fundamentals by Dan Wahlin

We get Ford and Toyota, and we’re ready to go.

[3:50] That’s one aspect of Generics. I’d argue that’s the aspect that you’ll probably use the most, just simply creating custom collections of a specific type. I prefer to go with List in many scenarios, where I just have a set of objects, and I want to add them into an Array structure, then we can use the List to do that.

Another aspect of Arrays is that you can actually control what types are added into a class. We did that here with the List. We said a Car can be added into the List, but now let’s make a custom Generic.

I have this Engine here, V8.

011-custom-generic-C#-Generics-Fundamentals-by-Dan-Wahlin

Let’s add a new property. I’m going to make a property we’ll call Engine.

I’ll just do a prop, tab, tab for the code snippet.

Custom Generic. C# Generics Fundamentals by Dan Wahlin

I’m going to have an unknown here.( I’ll come back to that.) I’m going to call this property Engine.

013-custom-generic-C#-Generics-Fundamentals-by-Dan-Wahlin

It’s not going to work as is because the Visual Studio IntelliSense is saying, “Whoa. What are you doing with the question mark?”

Error in Custom Generic. C# Generics Fundamentals by Dan Wahlin

What do I want to put here? If I wanted to hard‑code V8, I could. We could come in and say V8.

V8 Custom Generic. C# Generics Fundamentals by Dan Wahlin

The problem with that is now I’m locked into a V8.

[5:01] What if I want the user of my Car class to be able to supply the type of engine that they actually want to use? We could do that through Generics. What I’m going to do is put a little marker up here, and I’m going to name it <T>.

Custom Marker in VIsual Studio using C# Generics

This is something that Microsoft does. It just basically stands for what’s the type that you would like the user to be able to add in for this Car.

What I’m going to do is replace V8 with the T.

T Type custom C# Generics Fundamentals by Dan Wahlin

What I’m saying is that, at this point, I don’t know what the type of Engine is. It’s a Generic template. If I were to supply, for <T> V8, then the compiler, at compile time, will come in and put a V8 right here.

[5:44] If I said it was a V6 for T, then it would put in a V6. The compiler will take care of that automatically. Now, we have a way to be really flexible.

I’m allowing people that use my Car to supply the type of the Engine that they actually want to work with, as opposed to me hard‑coding that type of Engine. It makes our applications more flexible and easier to maintain.

Let’s go ahead and use this now.

We can see that our V8 just has a Horsepower, down here.

Public Class. Custom Generic in C# Visaul Studio.

What I’m going to do then is allow us to create a V8 and assign it, but I obviously have to supply what is the T, what’s the template marker, and what do I want to replace that with. Right now, I only have one Engine, V8. Imagine that I had several. Then we could go in, and use those others.

[6:37] Let’s come on back over to Program.cs and notice that Visual Studio now says, “Hey, I don’t really like what you’re doing here with Car.”

019-public-class-custom-generic-C#-Generics-Fundamentals-by-Dan-Wahlin

The reason is it doesn’t know the type of Engine. You’ll even see in the IntelliSense there, that it says, “1 type arguments” parameter is required.

[6:53] What I’m going to do is say I want a Car1 of a V8 Engine. Then, down here, I’ll say I want a Car2 of a V8 Engine.

Public Class custom C# Generics Fundamentals by Dan Wahlin

Going with the same concept here, we could say Engine = new V8.

021-public-class-custom-generic-C#-Generics-Fundamentals-by-Dan-Wahlin

Now, I’m able to add in a specific type of Car of V8. If I were to, here in the Engine, do V6, let’s see what happens, even though I don’t have a V6.

String parameter C# Generics Fundamentals by Dan Wahlin

That’s going to error out, and our Car is now also going to error out.

[7:37] It’s not going to allow that to be passed, because we’re now saying that you have to pass a V8, but yet I tried to pass a V6. Even if I had a V6, it wouldn’t take it, and it wouldn’t compile because we told it was a V8. It makes it really nice to catch errors and issues up front, as opposed to, say, at runtime.

You’ll notice that this looks good. We’re ready to go with our custom Generic, but with the List, it’s choking. If we mouse over it, it says it requires one type parameter.

New List C# Generics Fundamentals by Dan Wahlin

I need to say that the Car is a Car of V8 Engine.

024-new-list-C#-Generics-Fundamentals-by-Dan-Wahlin

[8:17] We can add a new List of Car. For the Car, I have to say what the T is because, again, look back at Cars.cs, we said there was a T.

Get Type T C# Generics Fundamentals by Dan Wahlin

I’m saying what the T is. It’s a V8, and it takes it. If we run it, we’re not going to see much different than when we initially ran it.

Run custom type C# Generics Fundamentals by Dan Wahlin

Let’s go ahead and iterate through as we write out the Car.

[8:42] I’m also going to include (car.Engine) and I’m going to write out just the (.ToString).

027-run-C#-Generics-Fundamentals-by-Dan-Wahlin

You can see that we do indeed have a V8 for the Ford and a V8 for the Toyota.

028-run-C#-Generics-Fundamentals-by-Dan-Wahlin

I have a custom Generic plus we’re using the .NET Generic to actually track our collection, and make it accessible and easy to work with.

That’s a quick introduction to some of the different things you can do with C# Generics.

Dan Wahlin Microsoft MVP
HTML5 and .NET Developer Instructor
Interface Technical Training

The post Video – The Fundamentals of C# Generics by Dan Wahlin appeared first on Interface Technical Training.

]]>
https://www.interfacett.com/blogs/video-c-generics-fundamentals-by-dan-wahlin/feed/ 2
Video – Understanding C# Interfaces and Polymorphic Behavior by Dan Wahlin https://www.interfacett.com/blogs/video-understanding-c-interfaces-and-polymorphic-behavior-by-dan-wahlin/ https://www.interfacett.com/blogs/video-understanding-c-interfaces-and-polymorphic-behavior-by-dan-wahlin/#comments Mon, 12 Aug 2013 17:27:41 +0000 http://www.interfacett.com/blogs/?p=?p=14590 Video transcription  Dan Wahlin: In a previous session Getting Started with C# Interfaces, I talked about how you can use C# Interfaces to drive consistency across different C# Classes. In this session, I’m going to walk through one of the cool features of Interfaces, which is Polymorphic Behavior. Polymorphism is not only a big word … Continue reading Video – Understanding C# Interfaces and Polymorphic Behavior by Dan Wahlin

The post Video – Understanding C# Interfaces and Polymorphic Behavior by Dan Wahlin appeared first on Interface Technical Training.

]]>

Video transcription

 Dan Wahlin:

In a previous session Getting Started with C# Interfaces, I talked about how you can use C# Interfaces to drive consistency across different C# Classes. In this session, I’m going to walk through one of the cool features of Interfaces, which is Polymorphic Behavior.

Polymorphism is not only a big word you can impress friends and family with, it’s actually really useful for what I call future-proofing your apps.

Let me show you an example. We currently have a car and a lawn mower and both of those implement “IMachine”, which simply has a start and a stop method.

C# Interfaces and Polymorphic Behavior

Both of them have to have those two methods or it won’t compile. We’ve already shown that earlier in a previous session Getting Started with C# Interfaces.

[0:42] What I’m going to do now is, let’s assume that this is our big program here.

002-program-cs-C-Interfaces-and-Polymorphic-Behavior

I want to add a particular method into this program that actually handles starting or maybe even stopping the car or the lawn mower. But I don’t want to hard-code that it only handles a car or a lawn mower.

[1:00] Let me show you what I mean. Let’s say that I had a static void start and it took a car.

Static Voide main C# Interfaces

I could obviously do some logging, so we’ll pretend that our app does a little bit of logging. Then we could call “car.start,” and we’d be off and running.

Static Voide Logging C# Interfaces and Polymorphic Behavior

That’ll work, and I could come in then and we could kind of cut and paste this. We could change this to a lawnmower. I’ll just change this to “m,” for “mower,” and we could say “m.Start.”

005-static-void-logging-mower-C-Interfaces-and-Polymorphic-Behavior

There’s nothing wrong with that. I now have an overload, and it would work, but now it would have to know which of these two to actually call.

[1:43] To demonstrate Polymorphic Behavior, we’re going to leverage the Interface, and what I’m going to do is allow someone to pass in an IMachine.

Implement Machine C# Interfaces and Polymorphic Behavior

Now, we’ll just call this “machine.” What the machine can do now is we know if it implements this Interface it has a start, or stop because, otherwise, it wouldn’t have compiled in the first place.

[2:06] We’ll go ahead and change this to “machine.start.” Imagine that we did some logging and then we’re going to start it. Now, what can it start? The answer is anything that implements IMachine.

007-machine-start-C-Interfaces-and-Polymorphic-Behavior

When I first learned this I thought this was useless because you can’t create an instance of an Interface. As I showed earlier, an Interface has no implementation.

Previouse code C# Interfaces and Polymorphic Behavior

Therefore, you can’t “new” it up or use it in any really useful way. You can just implement it, that’s it.

[2:37] The first time I saw this I said, “That’s useless code. Why would you ever do that?” The answer is I’m not saying “Pass me an IMachine.” I’m saying, “Pass me anything that implements IMachine.” We know that car implements IMachine and we know that lawnmower implements IMachine, therefore they are candidates to pass in.

Let’s come on down, we’ll do a new class and we’ll just call it “truck.”

New Class truck C# Interfaces and Polymorphic Behavior

In the truck, we could also have some type of methods. I’m not going to be able to pass, obviously, a truck into the start because it doesn’t implement IMachine. Of course, if I make it implement IMachine, and then implement the members, it would work.

Implement New Class C# Interfaces and Polymorphic Behavior

[3:22] Let’s assume that we just have car and lawnmower. Now what we can do is, let’s take out this extra line.

011-C-Interfaces-and-Polymorphic-Behavior

Now I’m going to call start and pass in the car. We’ll call start again and pass in the mower.

Start Interface C# Interfaces and Polymorphic Behavior

This is a console app, so I’m just going to do a console read real quick so it stays up.

Console Read C#

[3:43] Now let’s run and see what kind of output we get and you’ll notice it worked. We got car started and lawnmower started.

Run C# Interfaces and Polymorphic Behavior

That is Polymorphic Behavior, so let’s define that a little more specifically.

Polymorphism ‑‑ if you’re not familiar with the term ‑‑ is when an object implements a particular set of behaviors, such as start and stop. But the way it performs between the objects, the start or the stop is different.

A simple example I like to give in the classroom scenario is, animals speak. A dog speaks, a cat speaks, but the way they speak is different. A cat meows, a dog barks, a monkey…I don’t know…ooh, ooh, ah, ahs, or something like that.

[4:25] In the case of a car and a mower, they both start, but the way they start is going to be different. Obviously, it’s different because I typed some text. In real life, it’s very different because, in a car, you’re obviously turning a key, or maybe pushing a button whereas in a lawnmower, you’re probably pulling a string, or something like that. Unless it’s a riding lawnmower, I suppose.

This now illustrates how we can future-proof our app. Let me prove it by adding one more class into the mix.

Add Class C# Interface

Let’s say that we also add an Airplane.cs.

[4:59] To be consistent, I’ll make this public and I’ll implement IMachine, because an airplane would have a start and a stop.

016-add-class-airplane-C-Interfaces-and-Polymorphic-Behavior

017-implement-interface-airplane-C-Interfaces-and-Polymorphic-Behavior

Then we’ll just do the same type of thing here. We’ll say airplane started and we’ll return whatever we want, in this case “true“.

Airplane start C# Interfaces and Polymorphic Behavior

We’ll also make a console right line that airplane stops.

019-airplane-stop-C-Interfaces-and-Polymorphic-Behavior

[5:41] Assuming that this had real code in it that actually does something useful, now, without ever changing this method, I can pass in an airplane. Because airplane implements IMachine and so, now, I come in and say, “VARAIR=new airplane.”

Var New C# Interfaces and Polymorphic Behavior

Now we can call start. You’ll see an Intellisence, it says “pass me an IMachine.”

Intellisence C# Interfaces and Polymorphic Behavior

We can go ahead and pass it the air, for the airplane.

022-intellisence-airplane-C-Interfaces-and-Polymorphic-Behavior

[6:09] You’ll really see Polymorphism because we have three things that all start, but the way they start is different. The car writes car, lawnmower or airplane, as you see here.

023-polymorphic-behavior-C-Interfaces-and-Polymorphic-Behavior

That is a really powerful feature in programming. Because if you have methods in your code, like start that need to be able to accept different parameters, and you want to future-proof it, because you might not know all the objects that might be passed in the future to this method.

[6:35] Then, by implementing an Interface, I’m now writing very loosely coupled code, we call it because I can swap things in and out, and not have to rewrite this entire method. In fact, this method doesn’t even know what it’s doing. It just knows that I can call “start,” and whatever object you pass in, then it will invoke the start on that particular object.

That’s a quick and simple example of getting started with C# Interfaces and Polymorphic Behavior. I hope it helps you kind of rethink through how you architect your apps and how you can do some future proofing of some of your different methods in other Classes.

Next we’ll look at using C# Generics in your applications.

Enjoy!

Dan Wahlin Microsoft MVP
HTML5 and .NET Developer Instructor
Interface Technical Training

The post Video – Understanding C# Interfaces and Polymorphic Behavior by Dan Wahlin appeared first on Interface Technical Training.

]]>
https://www.interfacett.com/blogs/video-understanding-c-interfaces-and-polymorphic-behavior-by-dan-wahlin/feed/ 4
Video – Getting Started with C# Interfaces by Dan Wahlin https://www.interfacett.com/blogs/video-getting-started-with-c-interfaces-by-dan-wahlin/ https://www.interfacett.com/blogs/video-getting-started-with-c-interfaces-by-dan-wahlin/#comments Wed, 07 Aug 2013 21:52:18 +0000 http://www.interfacett.com/blogs/?p=?p=14520 Video transcription  Dan Wahlin: One of the topics that I get the most feedback or comments or questions about is C# Interfaces. What are they? Why would I use them? Why are they important in our applications? What I’m going to do is try to break down C# Interfaces in just a real short little … Continue reading Video – Getting Started with C# Interfaces by Dan Wahlin

The post Video – Getting Started with C# Interfaces by Dan Wahlin appeared first on Interface Technical Training.

]]>

Video transcription

 Dan Wahlin:

One of the topics that I get the most feedback or comments or questions about is C# Interfaces. What are they? Why would I use them? Why are they important in our applications? What I’m going to do is try to break down C# Interfaces in just a real short little segment here and make some sense of why you might use those in your applications. The short answer is we’re going to use C# Interfaces to drive consistency.

Let me show you what I mean by that. Let’s take a look at a little visual here.

What is a C# Interface

Imagine that I have a factory and in this factory, we’ll say times are tough, and I have a single worker. I only want to train them on one methodology for starting and stopping machines.

[0:47] For example, I have a square machine, a whatever‑that‑shape‑is machine, because I honestly don’t remember, triangle machine, and all those types of things. Each one of these has a start and a stop and you’ll notice, visually, that they’re actually green for the start and red for the stop.

Now, I think you look at that and say, well, that’s pretty simple. I get that you only have to train the worker once to press green for start, red for stop, and that’s a consistent visual Interface.

[1:15] Now, let’s imagine that these, instead of being machines, are Classes, and the Classes need to have start and stop methods. How are you going to drive consistency across these three different Classes, and you might have more than that, and do so in a way that kind of adheres to the standard in the .NET framework? One of the ways we can do it is Abstract Classes. But in this particular segment, we’re going to focus on Interfaces.

Interfaces provide a way where, if you have objects that aren’t even similar to each other but you want to drive a consistent Interface, consistent set of methods that they support or properties, then you could write an Interface that they all implement. I’m going to demonstrate that here.

Programming with C# Interfaces

If we do a demonstration of this, which I’ll do in a moment, you’ll see that Interfaces provide a great way to drive consistency across objects. That’s kind of summed up here as far as the purpose of Interfaces.

[2:13] Number one, they just provide consistency. You’ll also see that they provide some Polymorph ic benefits, which I’ll talk about here at the end.

Interfaces, in a nutshell, are simply a code contract. If you go and buy a house, you’re going to assign some type of a mortgage contract that says you agree to pay whatever it is per month.

[2:33] Well, in the C# world, if I want to drive consistency and say that a set of objects has a start and a stop method, and I want all of my objects to have that, then one way I can do it is to implement an Interface. That’s a contract that says, “I hereby agree to put a start and a stop into my Class.”

Interfaces themselves, which we’ll see in a moment, do not have any implementation details. In fact, Interfaces are really simple and they don’t do anything, except find data types and names. I’ll show you that in just a moment. Then, Classes that implement the Interfaces, that’s like going to the mortgage broker or the bank and agreeing to pay whatever it is per month for that particular mortgage.

[3:19] In the case of coding, a Class that implements an Interface is signing their name on the dotted line that they hereby agree to put in certain methods or properties, as defined by the Interface.

Let me show you an example here in Visual Studio. I’m just going to come in and let’s create a real simple project here.

I’m going to do a console project. Let’s go ahead and select “C#,” “Windows Console.” I’m going to call this, “Interfaces Demo.”

Opening a new project in Visual Stdio

We’ll go ahead and save that away. We now have a Class called “Program.”

Program.cs in new Visual Studio project

What I want to do is add some other Classes in. These other Classes actually support maybe an Interface.

[4:07] Let’s define what the Interface is and let’s do exactly what I showed you earlier. We’ll come in and we’ll add a new item. One of the items I can add is an Interface you can see here.

006-add-new-item-interface-visual-studio-console-application-c-interface

That Interface, I can give it whatever I want, let’s just call this “IMachine.cs”

You’ll notice that I started it with a capital “I.” That is a convention in .NET that you should follow. You certainly don’t have to, but I’m a big fan of it, and you’ll see that throughout most .NET programs.

[4:40] What an Interface defines is simply some basic members. Let’s say that there’s a Boolean return from a start and from a stop.

Bollean return in Visual Studio creating C# Interfaces

There you have it. That’s an Interface.

[4:51] You might look at and say, “That doesn’t even do anything.” You’re right. Interfaces do nothing. They simply define different members, start and stop in this case, and what they return, but they don’t actually have an implementation, as I mentioned earlier.

What we can do with this Interface, though, is, let’s say that we have a car.

008-car-class-visual-studio-console-application-c-interface

That car might have maybe a start and stop. We’ll come on in to “Class,” we’ll do a car, and we’ll say this car’s also public.

Puplic Class attribute in C# Interface

I’m now going to implement that Interface by saying, “IMachine.”

010-car-class-public-visual-studio-console-application-c-interface

[5:30] Typically, you’ll see a lot of names in Interfaces that are actions. I could have called this “I Startable Stoppable,” or some goofy name like that, but we’ll go ahead with something simple, like “IMachine.”

If I try to build, watch what happens here.

Visual Studio build error in C# Interface

We get two errors. That’s because it says, “Car does not implement.” Of course, we have to implement “Start” and “Stop.” Otherwise, it’s not going to work properly. I could go to the trouble to write all that code to make this Class implement the contract that we signed, now. This is like signing the dotted line, right here.

[6:05] But instead we can just right‑click on it and say, “Implement Interface,” and then choose this first one, “Implement Interface Again.”

Implementing the C# Interface

That pops in the code for us.

013-implement-interface-visual-studio-console-application-c-interface

Then we can come in and do something simple here. We’ll say, “Car Started.” And we’ll take this one out, and we’ll do the same thing, and we’ll say, “Car Stopped.”

014-implement-interface-visual-studio-console-application-c-interface

[6:28] Of course, you would go in and write a real implementation and do something a little more official, and then we have to return a boolean. I’m going to assume our car always works, because ours is a very good car, and we’ll just return “True.”

015-implement-interface-visual-studio-console-application-c-interface

But in a real app this is of course where you would go in and figure out what should be returned based on the database update succeeded or whatever it was you were doing.

Now let’s try to build, and you can see we built.

Run the new C# Interface in Visual Studio

Now we have implemented an Interface.

[6:56] At this point, though, you might go, “I don’t know what that’s really buying us.” Let’s say that we also had a lawnmower. A lawnmower obviously is not an automobile, or something like an automobile, so we can’t really inherit or use abstract Classes, but I can drive consistency across the car and a lawnmower by using Interfaces. What we can do is do a lawnmower, and we can do the same thing.

Building the lawnmower class in Visual Studio for C# Interfaces

I’m going to again say that we’ll assume this is public, and we’ll implement “IMachine.”

018-public-class-lawnmower-interface-visual-studio-console-application-c-interface

I’ll then right‑click, implement the Interface, and we’re off and running.

Now I can basically do the same thing. Let me just write a little bit of code real quick, “Lawnmower Started.” And we will say that we also have very trustworthy lawnmowers that never go down.

019-public-class-lawnmower-interface-visual-studio-console-application-c-interface

And we’ll do a Console.WriteLine here, “Lawnmower Stopped.”

020-public-class-lawnmower-interface-visual-studio-console-application-c-interface

At this point, we have now driven consistency across our app, and we can now use this to actually do something. Now let’s come into Main of our program.

021-public-class-lawnmower-interface-visual-studio-console-application-c-interface

[8:13] We can fire up a car. Notice when I do “Car.” you’ll see “Start” and “Stop” in there.

Start / Stop attributes in the C# Interface

Then we could also fire up a lawnmower. When I do “Mower.” you’ll also see “Start” and “Stop.”

Start and Stop commands in C# Interface

At this point, you might say, “I don’t really see the benefit.” Really, all we’ve done at this point is driven consistency across two objects that wouldn’t necessarily inherit from the same base Class.

[8:46] It’s possible they could. I suppose you could argue that you might have an abstract Class called “Machine,” or something like that, that has “Start” and “Stop” that you inherit down. But by using Interfaces, the objects don’t even have to be directly related through inheritance, and yet I’m able to drive consistency across these objects. Pretty cool.

What we’ll do in a follow‑up to this is show where this gets really useful with Polymorphic Behavior, but we’ll end here by talking about, This is the role of Interfaces, what you can do with them, and how you can drive consistency across Classes with Interfaces.

In the next video post, we’ll see how to “future-proof” our apps using Polymorphic Behaviors in our C# Interfaces.

Dan Wahlin Microsoft MVP
.NET Developer Instructor
Interface Technical Training

The post Video – Getting Started with C# Interfaces by Dan Wahlin appeared first on Interface Technical Training.

]]>
https://www.interfacett.com/blogs/video-getting-started-with-c-interfaces-by-dan-wahlin/feed/ 3