All right, I'm on hey yay, okay, all right, so this is where you're at If you're in the wrong place Really, it's kind of tough at this point if you want to sneak out. That's okay. You're not gonna hurt my feelings So we're gonna talk about habits of highly effective JavaScript developers hashtag JS habits

I usually just stick that up there so that if you guys want to tweet about hey That's a good point or know the speaker stupid. Whatever you want to do. It's fine Just make sure you hashtag it so that I can kind of keep track of what's going on

So before I go anywhere farther This has got to be my favorite thing ever Because this completely sums up how most of us feel about developing in JavaScript, right it's So I just saw that downstairs I these guys are great the truck JS guys are great

But it's like that that perfectly sums up what we're talking about here, so really quick before we go anywhere Let me ask a couple of questions first question. How many of you are pure? 100% JavaScript developers I have three people in the room

Right that's normal Three might actually be on the high side, right Okay, so how many of you are would classify yourselves as dotnet developers Hey, I'm not even gonna count. That's like almost everybody right Java developers. I have Java developers yay

Ruby None unless you're behind the light because then I can't see you PHP WordPress where's my WordPress people at I got a couple sweet, okay? I used to make fun of WordPress until the company I work for did a WordPress projects like the last project

And it was amazing to me how much they got done in such a very short period of time Okay, anyway But this this almost kind of sums up What we're gonna talk about in this talk because almost none of you Except for three of you and four because I do

Classify yourselves as a JavaScript developer. You're something else and you do JavaScript sometimes and And we'll talk about that. That's kind of the point of this whole talk We'll talk about what that means and what that looks like so this is me just real real quick. I'm John Mills I'm a consultant that a company called page technologies. I'm in Kansas City, Missouri

So I'm on like the other side of the world But Oslo's awesome, so I don't know if you like me training or something let me know because I would love to come back No pressure. Don't worry about it so I write JavaScript I Am a mean stack developer, so I do no JS on the back end. I do angular on the front end

MongoDB primarily, I'm also a plural slide author. I've got four or five courses out there okay, so I Love this quote Because so excellence is what we repeatedly do excellence is not an act, but a habit, right?

So it's it's putting ourselves in this mindset of I want to be really good at what I do I am going to intentionally make decisions every day that are going to take me closer to being very good At what I do instead of just yeah, okay. We'll be alright. I don't want to just be alright I want to be really good and And so a lot of times the problem is

Most of you are dotnet developers This is not a problem. That's not a problem. Don't get me wrong because most of you are not That's fine for you to be dotnet developers but When we start doing JavaScript What a lot of us do and I have been guilty of this as well as we go to stack overflow

We copy and paste it works great We move on and then we go back to the code that actually matters which is our dotnet code, right? Well, it's especially with react and angular and all these things more and more of this business Logic is making its way onto the JavaScript side and as we're writing more and more of our code in JavaScript

And we're doing more and more things in JavaScript We need to start taking our JavaScript more seriously than just hey, it's our jQuery thing that we do, right? So that's I didn't hit play on my timer. Okay

So so that's what we're gonna talk about That's kind of where we're going and what I'm gonna do is over the course of this talk is I'm just going to walk through some things That we should be doing hopefully a lot of you are already doing them But this would be a good reminder walk through some things that as you do them You will become better and better and better at JavaScript and you no longer feel like JavaScript is your doom

But something that actually kind of makes sense once you think about it. All right So the first one is know your code So we talked about copying from Stack Overflow, you know just back into something that works because we all do it

we do it in dotnet too, but And so here's what that means. So JavaScript is Not your primary language right JavaScript is also very different a Lot of times what happens when we're doing JavaScript as a dotnet developer is we try and make

JavaScript dotnet Right, you take the same paradigms in the same principles and the same thoughts that you have in dotnet and you apply those to JavaScript I think a lot of times when I go to a client and they do angular right angular is an MVC Platform well dotnet has MVC too

And so they try and take dotnet MVC and roll it into angular MVC and that doesn't work like don't do that, please JavaScript is also helpful and This is where the problems start. All right, because JavaScript right

Because JavaScript does things for you That you don't necessarily know what's doing and unless you start to understand what JavaScript is doing behind the scenes So JavaScript I oftentimes refer to JavaScript is kind of like your assistant Who thinks you're busy and they don't want to bother you, right?

So JavaScript is just gonna kind of take care of some stuff that you probably needed to know about but it doesn't want to It doesn't want to bother you. It doesn't want to let you know and we'll talk through what some of that looks like So here's the thing I'm gonna give you I'm gonna dip your toe into the JavaScript world and this is why we have that that JavaScript is your doom impression

semicolons Let me ask you a question show of hands our Semicolons required in JavaScript yes, sir. So if you believe Semicolons are required raise your hand. I Have Four five six people

If you believe they are not required raise your hands Okay, if you are morally opposed to hand raising raise your hand. I got a couple see that. All right Okay, so let me show you something that will help you understand why JavaScript is so incredibly painful to deal with

This is from the ECMA script standard It says this certain ECMA script statements must That is a strong word must be terminated with semicolons Are semicolons required in JavaScript? Yes

However for convenience Such semicolons may be omitted Alright, ladies and gentlemen This is the problem with JavaScript right here summed up in two slides Right, they must but you don't have to

so but I mean seriously, this is So we got to take some time. We'll talk through a little bit about what this means. But so this this comes down to These situations are described by saying semicolons are automatically inserted, right? So so JavaScript as your assistant looks at your code and says well he meant to put a semicolon there

They just forgot So I'm gonna put it in for them right which seems very helpful and it is so that's cool but here's where we go and I'm not telling you that I'll give you my opinion at the end of this little segment because I

Really don't have one. I don't care but it's important to understand. Okay, so check out this line this couple lines of code Just shout it out. How many semicolons do you believe get inserted automatically into this? code For Okay, so we start with the softball, which is good for

Semicolons, let's see. Yes for semicolons is the correct answer Okay, right because what it does is it starts at the V I'll tell you how this works and then we can kind of go it starts at the V and it works its way Across so var a equals 12. It hits a new like character

It doesn't put a semicolon in there, but it sees another V And so it says hey now on my next V that V doesn't make sense in that context They meant to put a semicolon there. I'll put a semicolon. So it's helpful, right? It's just trying to help you up All right. This one's a little bit more complicated

How many semicolons get inserted here? See the last one everybody just started shouting out for four So behind the 12 behind the 13 behind the a and behind the console that log Yes

three Wait a second. There is not one behind the VAR C equals B plus a Because check this out It hits the a so remember I said it just kind of looks across so it starts the V It works across to the a it goes to the next line

It sees an open bracket is an open bracket Does that make sense for the next character after an a because a could be an array, right? So no semicolon, it's just gonna keep going now this is kind of dumb, I mean you don't write code like this, please Don't do that, right?

However, what about this? How many of you have used the iffy syntax before Angular developers you better raise your hand because we do that So this is the same thing No semicolon after the a okay now Where this bites you and why I personally choose to do semicolons. I

personally choose to do semicolons because Where this bites you is when you're concatenating files how many of you can catenate minify your JavaScript Minification actually wouldn't kill you if you did it after you concatenated, but if you just concatenate

What's gonna happen is you've got one file that's not wrapped in an iffy and one that is wrapped in an iffy and you can Catenote those things together if you didn't end one semicolon everything breaks And actually what you'll see is iffy syntax with the semicolon in front of it Have you ever seen that just to like protect them from potential things like that?

Okay last one and dotnet developers Usually when I put up this next slide I can hear an audible sigh of relief because the curly braces are in the correct spot Right so this is wrong. This is right because this is how dotnet developers write their curly braces

There's a reason why JavaScript developers don't there's a couple, but we'll talk about one how many semicolons Three Okay, wait where where would you put three?

after the return statement two Okay So who would have gotten that that's yeah, there's one right there That's um Is that what you meant? This is a yes, okay awesome right it'll put a semicolon there so a return statement continue and a couple others or what's called

restricted productions which means No new like characters a lot, so it'll stick a semicolon there So every once in a while if you're returning object literals If you put the curly brace on the next line, it'll drop a semicolon there. It won't tell you

It's just trying to be helpful right that you meant to put it there, so it's fine. It'll do it Okay, so here's what I do I? Use semicolons, and I use semicolons in conjunction with a linter, and we're not to linters yet We'll talk about linters here in just a second

Mostly for this kind of reason I just want to be reminded for two two reasons one Does dotnet require semicolons? Like actually it really does require semicolons right and so if you're a dotnet developer And then you go and try to do Java development don't change your paradigm in that see I just spent like five minutes earlier Talking about changing your paradigm and here. I'm gonna say just you use semicolons over there use them over here, too

All right, but we'll talk about linting here in a second. Okay. I'm gonna give you one more And then we'll move on to other stuff, but equality in a different way than how we okay, so Look at this real quick var x equals 1 var y equals string 1

If x equals y so what gets printed equal or not equal? equal Is that weird to anybody okay? Here's why? Because when you do double equals Obviously you can't compare an int and a string are not equal right. I mean so JavaScript because it's helpful

Says that doesn't even make sense That must be a mistake. Let me typecast One of these to the other one so that string 1 and string 1 equal each other right so it does an Automatic type conversion for you so that it knows what's going on and so everybody shouted out equal so that okay?

What about this one same thing? equal because is 0 false Yes, because in JavaScript you don't really we say true and false, but really it's like truthy and falsy because

That's the way JavaScript is and so falsy is anything like 0 null undefined false So 0 and false are equal once you do the type conversion, right? So how do we solve that?

Triple equal exactly so now I've got x triple equal y triple equal y says stop right don't do type conversion Just tell me if these two things are the same or if they're not the same right so just one last thing about equality If person dot name how many of you have ever written code like this because we don't have true and false right we have truthy

And falsy so person dot name is totally truthy because if something exists, it's truthy so John exists, so this is gonna write out exists correct Does this exist this person dot DOB exist?

Yes, this person dot single exists Well it does But it's falsy Right and see what's funny is I? Know this like I know how this works, and I still do this

Because it's convenient, and it's easy, and we're like and I have been caught I actually did in my pull site course I talked about this and then one of the comments Somebody came back and said you talked about this and then like two modules later. You did this I was like Yes, I did okay, so you can't do this right. What do you do instead?

All right So right you've got to do this or something along these lines if Person dot name does not equal equal or type of does not equal equal undefined Right that is not cool. That is not like clean, but you know that's among the best ways

We'll talk about underscore in a while underscore is null or this like the easiest okay? But this isn't even all and it's all I'm gonna talk about but this isn't even it We've got hoisting. We've got expressions versus statements. We've got Prototypes JavaScript is different, and I'm we're not going to talk about that anymore

We're going to move on and talk about other stuff, but as a whole as a dinette developer moving into JavaScript Keep that in mind and when you go to stack overflow when something's not working so we're talking about habit We talk about becoming better at what we do don't just go to Stack Overflow copy paste something in

and Say hey, it works and move on like spend five minutes Usually it's only five minutes and type a couple other things around it plunker is awesome for this Just go to plunker type a couple things around it and say oh, that's interesting. I didn't see how that

Play around with that a little bit okay now. We talked about equality we talked about semi-colons We talked about all that stuff and that some of that is hard It's it's a lot to keep track of when you're trying to get something out the door right, so We'll talk linting how many of you use a linter Awesome a JavaScript linter, okay, all right just curious so this will kind of go through this one fairly quickly then

Which one just shout it out? I'm curious. What will be the loudest? Es lint and Js lint are the two that I heard the most although I think only one said es lint he just did this and it was really loud, okay?

Which is totally cool? Okay, so let's talk a little bit about linting and kind of what that looks like so Js lint Was the first one to come out right so this is Doug Crockford's? it You kind of it's his way of doing Javascript if you do it his way, and you like it you drop it in it just works. It's awesome

Some people didn't like to do it his way So then came about Js. Hint. I heard some Js hints a couple okay? Js. Hint was a little bit more configurable. It was a little bit more. I can turn things on and off it was nice

It was kind of cool Some people weren't very happy with that So they wanted to be even more configurable. They wanted to be even bigger and better so es lint came about Right and then for some reason People decided there's too much configuration. There's too much stuff. So then you have the standard Js

I Just standard Js is zero configuration You can't configure it, and if you don't do it their way then and I don't do it their way So I don't use it, but I they're valid if they do it your way

So there's a whole bunch of options. I use Js. Hint. Let me show you real quick kind of what that looks like So I've got some code right here Slide this over now. You can already see There are some problems here, right? We've talked about some stuff. We've got some problems

Give me two problems that you see right off the bat The I got a double equals And I'm yeah, so and the return statement. I'm missing some semicolons, okay So what you do is you come down here to the command line you type

Js, hint star you hit enter and it's going to spit out a whole bunch of errors right, so that's a linter it says hey Guess what? on line three Which is my return statement. That's an error. I line broke when I shouldn't have line broke um

That's like not helpful. I mean it's helpful, but I don't like command line stuff, so those of you who lint How do you lint so if you're a Js linter? Do you do command line? Do you do build tool? Do you do it in your editor kind of what do you do? build tool we're not and so actually we're not going to talk about build tools because

That's like a can of worms, but you can hook them up into your build tool I use mine in gulp so I use gulp so I hook mine up in gulp I also just have something built into my editor So this is brackets Right here, and I can't make that bigger, so it's actually not too bad on the big screen

But right I can just say hey look at that so return needs a semicolon and That needs a triple equals And I can save that and get rid of a bunch of it I'm not going to take the time to get rid of all of them, but But that's helpful now one thing about JSA and this is going to be my my mantra through this entire talk is

Do what makes sense to you so on semicolons right? I said I don't care if you do them or not just understand why you might do them and same thing with with linting I like Js hint Because I can configure it and if you go to Js hint

.com We'll talk about that in just a little bit There are a ton of options That you can turn on me. I'm just we're not going to talk about it. I'll just scroll through them, right There's a ton of options out there that say whether or not Things happen and so I've got two set in linting so I have this Js hint RC

I've got two things set one is Equal equal equal because for some reason Js hint that's not defaulted to true I don't know why but that's fine. I turned that on I also have one called evil Which sounds ominous? And it's not it's okay

So that basically means actually I'm going to go back I use document dot write document dot write uses Eval how many who uses eval in your code in your JavaScript code? That is exactly the right number of hands because I see none

because eval is horrible because it takes a string and It just executes it as JavaScript that is Troy hunt would have a field day with that kind of stuff, right? there is zero security involved and so to turn it on I have to set a Operator that says evil Because it it just is evil

it it's just that bad okay, so linting pick a linter use a linter and actually what the thing I love most about linting is That it helps me understand the code right if I work through

Some of those options I work through you know which ones I want to turn on which ones I want to turn off and I start to understand Why I would turn one on and one off you start to understand JavaScript a lot better, right? For me that's why I like it because it's gonna force me to really understand what I'm doing

Like why is the eval thing called evil all right? Let's talk about that for a minute right okay? Know your IDE okay, so let's This one's interesting as a Developer I spend more time

With my IDE than I do with my family Think about that for a second because it's true right, so I've got a wife. I've got three kids I spend ten to twelve hours a day in my editor I Spend two to three hours a day with my family

Well, I guess not I spend a little more time. I spend a lot more time Know your IDE how many of you I don't even want to ask this question It's gonna make my brain hurt, but I know the answer already How many of you use Visual Studio to do your JavaScripts? Okay, that's not as bad as I thought it would be

Okay, how many of you do not use Visual Studio to do your JavaScript, okay? No code does not count because code is not Visual Studio it actually is Visual Studio Anyway, but you answer my next question, okay?

So yes, there is Visual Studio code Visual Studio code is just an editor It's not Visual Studio but there are unfortunately many editors to pick from So we've got so as I say them raise your hand if you use them so code

I'll start with code because I know I'll get there you go. Okay, so I got a few Visual Studio code We've got brackets Not nearly enough people use brackets. Okay, because brackets is my personal favorite Adam Very nice, okay sublime

Did I miss any ah That's what I was waiting for okay, right because if somebody uses vim they will make sure you know That they use vim and I totally set you up. I apologize So don't feel bad, but that's the thing I've got a friend who uses vim and like I can't get through five minutes of a conversation without him letting me know

He uses vim It's just kind of the way it is But here's the thing the thing one of the things I love about JavaScript is that we have a lot of options One of the things that a lot of people hate about JavaScript

so we have a lot of options right but What I would encourage you to do Brackets Adam sublime vim code Webstorm I missed webstorm. How could I miss webstorm? Jet brains is like a sponsor downstairs webstorm is awesome

I Actually do like webstorm. It's a little too IDE ish for me. I'm not quite to the vim camp But um, I'm closer that way Here's what you do. Let me show you this. I Showed you earlier. This is my brackets if you go and you download brackets

From Adobe's website. It will look nothing like this. I like nothing like this I have tabs across the top. I have icons down the side. I'm like black and weird You know pastel colors or neon colors that flash and do things. I've got JSHint installed as part of it

I've got Git integration I can do snippets. This is my favorite JavaScript Angular people I open up a new file I take IIFA boom right, I Have configured my environment To be very very easy for me to use and you know, I do CL

Boom console, although that doesn't even make any sense at all, but you know what I'm saying, right? Spend some time unless you're VIMS if you're doing VIMS spend hours

If you're in brackets spend 10 minutes Building on to your environment set your environment up The way that you want it to be set up and the reason why I don't say use brackets, right? What I want you to do These are free with the exception of webstorm. They're all free download brackets download sublime

Download Adam spend an hour in each one of them. You will like one of them, right? You won't like all of them. Trust me You'll never be a situation like I don't know which one to pick but it'll be different for everybody Some of you will like one some of you will like another one, but spend a little bit of time

Finding an editor that works and makes you feel more comfortable then Then Visual Studio because Visual Studio is fantastic C-sharp It is not fantastic at JavaScript unless it's gotten very much better in the last like six months

I've never really thought it was great, but not to bashful studio. I love it But that's that okay. I'll tab Strict mode how many of you code in strict mode?

How many of you know why? Right That's okay so for people watching this later I got like half the hands in the room and then two right it's that because that's We do strict mode and we're always told to use strict mode

But we're not ever really certain like why we're supposed to use strict mode So let me talk through a little bit about why so here's we'll go back to this statement JavaScript is trying to be helpful JavaScript is very nice right doesn't want to bother you it knows you're busy

But don't let it help you That's bad Right and here's why so let's talk. We'll talk about two things. Let's talk about globals Alright, so we've got this thing. This is so it's basic. It's very simple. I've got a function that says print I want to print out

The word hello, and it's gonna say printing hello, right Area, but I'm not gonna take the time to show you that that's what it's gonna. Do just trust me What's this line gonna do? Console dot log string to print outside of that how many of you say that's going to print out

printing hello again Nobody one person what's it gonna print out? Anybody Undefined that is actually a very common answer. It is not correct, but that's okay This actually will blow up. You'll get a reference error

Which does happen in JavaScript okay? So because we do have function scope and so all the undefined people said hey undefined, but This is a right an RHS reference And if you try to make an RHS reference on a variable that doesn't exist it blows up right

Okay, this is great right up until you forget your VAR Right you have all done this everybody's done this because it works still Which is terrible, and it's not okay, so I forgot my VAR

It's gonna now print it out right Okay, the reason for that is because JavaScript is trying to be helpful right so it gets to that string to print It's got an LHS reference, so what is so I've used this term an RHS reference and an LHS reference

Anybody heard those before right so RHS reference stands for? Right hand side that's all it is right an LHS reference stands for left hand side so string to print in this case Is an LHS reference it's on the left hand side and so it goes to the compiler says hey

I have an LHS reference for string to print does that exist in function scope, but it does not So it's gonna pop it up to the global scope and say hey I have an LHS reference for string to print in the global scope Do you have that and the global scope will say no I do not however

This is obviously an oversight on the part of the programmer the programmer Completely intended to create this variable it just they forgot So I will do them a favor, and I will create it for them

Alright, so then they do and instead of letting you know That now this is a problem It just moves on with his life And now you're leaking stuff up to the global scope Which you may or may not care about you should care about but you know there you go So what do we do we do use strict and what you use strict is gonna. Do is tell us

Tell the compiler and the runtime stop it Do not just gloss over things show me my errors So now you get a reference error, but not down here at the bottom you get it up there at the top So now when you run this it blows up

so Strict mode will make your code blow up Just know this going into it it will now start throwing errors that you've never seen before well That's what's gonna happen. I'll show you one more Delete this is another fun little one. There is a delete keyword how many knew there was a delete keyword. Yeah, so delete is

Intended to be used to remove something from an object Right so in this case. I've got object a 100 B 200. I delete object dot a what's gonna print out in my console I log

It's just gonna print out B 200 right everybody agree with that. It's the answer so yes right Okay, now I'm gonna add this line because deletes awesome. It. You know cleans up my memory. It's very helpful awesome So let's just delete the object. I'm done with the objects What happens?

We're far enough into this talk where you should have some idea of The fact that nothing's gonna happen right because what's gonna happen now. It's gonna print out B 200 Because the runtime is gonna get to that line delete object and delete object is not allowed But that's okay. I is that you obviously didn't intend to delete the object

It's not allowed so we're just gonna move on it's not gonna do anything You're not gonna get an error but It's you know. It's not gonna. Do what you're obviously asking it to do either okay, and then you got this Delete my bar that does nothing to right you're gonna get everything out so now. I've got

Code that does nothing and this happens far more often than you would think I look at client code all the time And I'm like I don't know why you've got this line of code here. It literally doesn't do anything But sack overflow told them to do it So they did it

Okay, so you strict in this case Where is this gonna blow up Is it gonna blow up who thinks is gonna blow up? Yes, how many of you are getting tired? I'm almost done with the hand-raising. It's fine It's Friday though. It's day three we got to get some energy

Okay, so we'll do some calisthenics Right it's gonna blow up right there It actually is going to tell you hey, that's not allowed and That's to me. That's why you need to be using strict mode right because it's going to tell you when you're doing something You shouldn't be doing

Instead of saying well, it's okay never mind Does that make sense? Okay Yeah, strict mode makes JavaScript Give you your errors Right JavaScript doesn't like to give you your errors and like so hold on to them ignore them sweep them under the rug forget about it

Strict mode makes you get it done. Okay This is my favorite topic like in all of JavaScript's because it's the worst topic in all of JavaScript's

Right. I don't even know what this is like most of the time and there's a reason we're talking about this in the context Of strict mode, but let's talk about like the bit greater this for just a minute It's not gonna be a long but okay, so I've got an object. I've got an object literal That says greeting Hello Say hi and a function Okay

So I want in my say hi function to print out the greeting But greeting isn't an object. I mean, it's not like a variable I have access to it's something on the object So the only way I have to get access to that

Greeting variable is by using the this keyword. So I use this to get access back up to My greeting keyword so I have object a with say hi that says this dot greeting And when I do object a dot say hi That's what I get. This is this should be obvious. Like yes, this makes sense, but JavaScript is weird

because in JavaScript Functions are first-class objects They're not just like definitions of things they're things So I can do this. I now have object B and we have another greeting sup Because I don't know you in in the States if you are younger than I am like you just sup, right?

And so you got to do it with like the little head nod thing so But I already have a function I already have the function say hi written and I don't want to write it again

So I can just copy it. I Can take object at a's function say hi and move it over to object B. Just because Now it's gonna print out Is it gonna say hello, John who says hello, John Okay, who says sup, John?

Right. It's gonna be sup, John Here's why because What's on the left side of the dot is what this refers to? so If you're writing JavaScript code, and it's something dot something What's on the left side of that dot is what the?

What this refers to so this in this case? Just use this a lot Is going to be object B. So this dot greeting is going to be sup Right. Does that make sense ish? I'm gonna make it worse. I

can Just copy the function Like I'm just gonna copy the function out And then execute the function there's nothing on the left side of the dot So in this situation, what is the this refer to?

The window it refers to the window because There's nothing on the left side of the dot so I don't have anything there to have it refer to I don't have a dot binder any of that stuff, and I'm not gonna talk about that because that's not the point of this talk, but So it's just gonna default to the window and

So that default to by this point in this talk should kind of make you nervous because that's JavaScript saying well you it looks like you want to have an object dot something and I don't have an object to bind this to so I'm just gonna give you the window

So this is actually not gonna blow up. This is gonna work you get undefined John because this exists But this dot greeting does not So that's bad Right because now here I'm reading from I could be writing to I could be writing stuff to the window

And I could be overwriting things on the window that I should not be overwriting Right so what strict mode does we do use strict in this case too. What strict mode will do for you here is Instead of giving you global instead of giving you the window or the processor depending on where you're at it gives you nothing

So now I've got undefined And now it'll blow up did I say yeah, you got a reference error now Okay, and just to kind of touch on this. I'll give you one more little thing now. I've got an async thing What's this refer to in my async call? I?

Don't have you strict on Who knows right? I love that so he's like oh right because that's the problem But when this fun this what this does what an asynchronous call does is exactly this You're just handing it the function, and then it executes it off there somewhere

You don't have object dot function call you just have the function call so in call in call backs If you're doing you know anything in modern JavaScript development where you're doing a callback this is Not what you think it is and this is where arrow functions actually come in and es6 and we'll talk about that here in a second all right

Know who your functions are how many of you have seen code like this in JavaScript? Right we refer to this lovingly as Christmas tree code Because you know if you get rid of the the bottom part of it. That's what it looks like right. It's like a Christmas tree

and so This is bad and terrible and this is like I have one line of code in each of these functions And it's already bad if you get five or six or seven lines of code in each of these functions it becomes so much worse and it's almost impossible to figure out, but

nobody ever said That you have to use anonymous functions and callbacks but we do for some reason because it's easy and convenient and so When you start to get code like this Stop it and do this

Is this easier to read than that? Yes, I love that it's like well right because this only had one line of code in each function I Can't fit like real stuff on a slide, okay, right? This would be much easier to read because all you have to do is read this bottom line async method

I'm opening a database connection, and then find invalidate user. I just give the function a name, and I'm done Here you have to actually say okay. I'm Finding a user validating user that I'm gonna do stuff here I can actually name my function something meaningful so when the next person comes along I can do it

And then they can pop up and they can do Find other stuff Okay promises Who's who got I got a woohoo on promises. I like it okay Promises are awesome and actually so es6. They are native you can use them natively

You don't have to wait till es6. There's promise libraries out there if you're angular There's Q Anything of this promise JS? Promises are awesome Because now I can take that code And I can so I just I can wrap a promise so a promise if you don't know just kind of looks like this

I'm returning a thing called a promise that has fulfill and reject and then I do my stuff, and I just call fulfill Now my code looks like this So I've got an async method Then I'm gonna find a user then I'm gonna validate the user then I'm gonna do some stuff This is much more maintainable and much more readable than anonymous functions everywhere, right?

We want to avoid the anonymous functions as much as we possibly can Alright so es6 ECMA script 2015 whatever you want to call it. I call it es6 because I don't care The es6 is awesome how many of you are writing es6 code

Today, okay fantastic Es6 the beauty of es6 and here's all I'm going to talk about is Es6 has some things in it That you can start using almost like right away. You can start using them now

You don't have to change everything You can say hey, I mentioned arrow functions earlier for the callback stuff. I can start using arrow functions and That's it. That's all I'm done. I can start using promises, and that's it. That's all I have to do I don't have to like completely convert my entire mentality about JavaScript development

I can just kind of pull some stuff in now and then Hey, that's when I did that like everything shook, okay I'm gonna show you This this is like the worst website It's the best website in the world, but like the worst website in the world, so if you google. I'm it's kenya x

But if you google es6 compatibility this website is like your Bible Alright because this says what you can use and what you can't use and how everything works How many of you have been to this site before?

Not nearly enough of you, okay, so that's good so on This Website you get all of the functions that are associated with and I can I'll make this bigger now Because I just want okay, right not that big

right so You can say hey, I've got Let's just do default function parameters And I can hey now when I create a function a equals 1 b equals 2 if you hover over these little things It's the test that runs

For this first column so this first column is your current browser, and so my current browser look at the support everything's green So in Chrome the version of Chrome. I'm running es6 is pretty much completely supported and I can hover over each of these things I can come down here and say hey the let keyword Which gives me a block scope I can hover over that and say here's how that works. Here's what I do

this website is Phenomenal you can here's ie here's Firefox here's Safari notice not as awesome

Node node 6 93% so for us no developers. That's kind of awesome, and then you've got Babel Not to like go into es6 and like take us this way for a minute. I just want to show you the site Look at this and start digging into the es6 stuff because you should be using if

You can if you don't have to support like ie 10 Which you might have to if you do start looking at things like Babel But start using these things because they start to clean up a lot of problems Okay, don't reinvent the wheel I gotta remember to move my mouse up

There's a lot of stuff out there There are a lot of packages out there that you should be using or could be using to make your life a lot easier So earlier now now the buzz is frameworks right I said who uses react who uses angular

I really Won I really is very cool Rob's actually here at the conference, which is very cool So Frameworks are built so that you don't have to deal with a lot of stuff right I can crank out something in angular

With callbacks and all of these things a lot faster using angular than if I had to code all that stuff on my own same thing with react right There are a lot of other packages so moment who uses moment to deal with dates and times yes

That's exactly right. Don't like create your own date time formatting stuff use things like moment bootstrap foundation Material a couple awesome so but right pick a UI framework and use it

So the last one underscore or low-dash yeah Underscore or low-dash are awesome now. Here's the thing Those of you who don't know There is so basically what?

Where's my mouse? It's just a collection of functions, and I'll make this bigger, and I do that Right so it's just a bunch of functions, so there's one is null

So is null Underscore dot is null Tells me whether or not something's no right instead of that whole type of and all that I can just like I can do some Checks there are a ton of functions out here. Here's the thing and I'm gonna say this on tape, and I probably shouldn't If you're only gonna use one

Just kind of like go look and say github and see what they did and kind of Just don't pull in the whole package for one function, but if you're gonna use several functions This is the right way to do it nine times out of ten pull in underscore pull in low-dash Actually, I didn't that Who uses low-dash? I'm curious. This is curiosity so some who uses underscore

less okay, so underscore is I Think the more popular one at this particular moment in time So all the hipster kids are doing low-dash is what I take away from that okay?

However, and we're gonna kind of end on this thought Don't overdo it. I just pointed out a hole with some packages. I said you should be using packages Packages are awesome pull packages in don't reinvent the wheel, but oh my word, please What's this anybody know? This is the like ten lines of code that broke the internet?

So this is left pad Okay, so here's what this fun. Okay get this This function takes a string and pads to the left

Spaces or zeros Like that's what it does And it was an NPM package NPM install left pad So that you can download a function that's gonna pad your stuff to the left but a long story short lots of people use this function because

Apparently that's something that's very important lots of people like babble babble use left pad well there was some Issues, I'm not gonna go into the drama of it, but there were some issues that resulted in left pad being removed from NPM When left pad was removed from NPM

The internet broke right because babble quit working there were several other large Packages that quit working so everybody's builds broke because nobody could find left pad anymore NPM has fixed the issue so you can no longer Unpublish NPM packages which is cool But the lesson the overarching lesson to me is still the same. Why is this an NPM package?

That we're pulling in at all right why do I have to have? 700 NPM packages in my project or bauer packages or pick your package management of choice So just kind of be aware right

Don't reinvent the wheel Use things like lodash use things like underscore But don't like take it to the ridiculous extreme where you've got 7,000 NPM packages because you don't want to write in his null function on your own right, okay? So that's it. I think we're yeah, we've got like just a couple minutes if you want to pose some questions

but There you go questions Typescripts I cannot get through a JavaScript talk without typescript coming up, which is totally cool, okay?

So here's my thought. This is my personal opinion on typescript. I don't use it and I don't use it because and You talk to me next year. I'll probably be using it I mean, I'm not like hardcore about it because I don't want another layer on top right I can get Some of that using you know strict mode and things like that and running tests, but I

Actually kind of like JavaScript the way it is I don't see as much hype about the static typing But I don't know that's just me Angular 2 is pushing it very heavily So it's not a bad thing to know it's not a bad thing to pick up

But I don't I don't want another layer of abstraction on top of what I'm already doing If that makes sense because typescript compiles down to JavaScript So I could just write JavaScript now you could say dotnet compiles down to bytecode. I'm not gonna write in bytecode right I get that but

So But typescript is very cool I know a lot of people who do it and especially if you're doing any of the two right now You should probably be doing typescript It does right. I mean if if all the stuff we've talked about has is a struggle Typescript prevents a lot of that stuff, but now you kind of know it so it won't help you as much

All right questions anything else Yep, if I don't use typescript

Okay, that's Fair question so because I don't have static typing How do I know whether my function is getting like the right thing is that essentially what that comes down to? And I mean you've got to like check it. I mean yes. I know typescript has a lot of value

No, I mean basically it's If I'm expecting a number I You have to check to make sure it's a number which I wouldn't have to do if I was doing typescript Alright fair enough But again, that's back to if you typescript is not bad

I mean I know a lot of people who do it is great And if that's if you're comfortable in typescript totally do it if you're if you're not don't I mean That's kind of the whole point of this talk is Find the thing where you're comfortable don't fight everything right find the thing that makes you comfortable and go with that

So yes, but that is a that's the struggle All right No, I'm out. So thank you guys very much appreciate you coming out and have an awesome last day