ES2015 (next version of JavaScript), Totally Tooling Tips (S2 Ep1)

[Music] so what do you think the future holds for Life the future for life um global warming uh Skynet taking over the human species just being obliterated but on the flip side we've got es6 so it's all going to be okay everything everything worked out great then it's going to be great anyway you're well right es6 is awesome it is awesome like I I guess the one thing is that the moment is you can't you can't just use vanilla es6 in the browser like right now I think so we've been we've been Landing a lot of es6 features in chroming V8 over the last couple years other browser vendors have been doing an amazing job of this too but we're not quite at the point where you can just you know use it in production without requiring transpilation um and on that side of things a lot of people probably need a good transpiler I think most people are using Babel at the moment yeah that seems one pretty legit and if you're using Babel like and you're trying to get it into your build process what we probably use are you know things like Gul Babel just a few lines of code get set up it's very very straightforward but uh I think you've been you've been playing around with browser and babelify for like bundles right yeah so the only reason I'm using both is browserify will grab any of the imported files and bring them all into one so that when you run it through bofy it's got everything just in one place so it can just mung it all together um and that seems to be working out okay like the one thing that you see in a lot of tutorials people would just say Define your script file and then run it through browser F and then run that through Babel and then everything will just work out and it's just for that one file and that's fine but the minute you add another file for a separate page or something it doesn't everything just falls apart yep um so I've had to do a little bit of work there it's just like I'm using glob do sync to basically just go through a set of files in my build process and it looks with just6 DJs and those files will then get run through like browserify and then once it goes through browserify get said through bfy and then it creates the files that's legit so I've got like a nice little workflow going right now so that can just write E6 and then everything's like ready for the server on es5 good to go cool so um the first step is transpilation we've also got so one thing we need to do usually is both lint our code and style check it now what I've been mostly using for this stuff is like i' I've used JS hint pretty heavily in the past for code style for uh code linting um and jscs for code style checking and jscs 2.0 now supports like Babel so you can style check your code it also has a number of es6 only features which kind of nice like es6 only rules so let's say I've got some code that's using string concatenation I can actually add a rule to my gscs config and say well I want that code to be using template strings instead and then like throw a little exception and say you know you should you should be using template strings nice if you wanted to do things like oh okay in this case you could use the fat Arrow function for that as just a linting rule yes exactly which is kind of sweet um on the the linting side of things there are a few people that have been like switching over to using ES lint um it's a so es lint is a tool by Nicholas zakus that tries to combine some of the features you'd find in jscs and and JS hint but it's a little bit one could argue it's a little bit more future facing tries to um support es6 a little bit better I still personally use jsn and jscs but eslint is is really solid it's an option A bunch of people are using so it's worth checking out too yeah like I've I've still just St to JS and JS logic cuz like that's what I'm used to the only thing I had to do was add in the es next true into JS RC and JSC JS csrc file so yeah es next true and then all the linting rules just started working like it everything that it was complaining about sudden he just went away and it's like oh okay using a class that's fine there you go but yeah that that has basically been my setup process which has actually been fairly simple once I got it all set up um like the the major feature that I'm just in love with is the fact that you can have um a file with a function or a class and you just basically set just toine like an export saying this part this function or this class is allowed to be exported and imported by another another class MH and that alone I've just fall in love with just everything to do with um es6 modules is fantastic ability to import which means you can then extend um one of your classes with the other one and then just all the boiler plate for this. Prototype yeah just like getting rid of all all of that and just defining a function like my code I'm so much happier with how much cleaner it looks and like because I come from a bit of like a Java background like this is just like so super friendly to me it's insane like what are your favorite features in I'm not going to critique you for for Java too much but like my my features are what I what do I like I like everything um I kind of like template strings there need but uh object the shorthand object literal super neat a lot less boilerplate involved um I love uh computed property names yeah having that in the language is amazing fat arrows are neat too week Maps week maps and week sets um but I did want a name JW one or two things so um another name drop Addie you're shocked I know you're shocked so I'm surprised you're not wearing a t-shirt with said name drop right now no no I'm wearing a t-shirt that that says never forget floppy D um never forget so uh uh I I put together a repo called es6 tools that tries to summarize the whole landscape of tooling for es6 ES 2015 whatever you want to call it tries to capture like stuff that you need for Grunts and Gulp and you know all the polyils you need and all that other fun stuff so it's kind of like depending on what your setup is you could go to this and it would just list down all the things apply to you right there and then that's the idea nice but I also wanted to mention so there's two really good um books that are free to read online if people want to learn more about es6 uh the first is is understanding es6 which I've I've been reading a lot it's by Nicholas zus again um solid book and there's another one called exploring es6 by Axel rashme U both solid books both really really knowledgeable guys uh so yeah people should check those out yeah like I've loved it like the amount of like code that you can delete just from a ton of these features and just the maintainability feels so much cleaner with this kind of thing absolutely love it for me I think everyone should be checking out ESX and just playing around with with it like like I said for me like it just makes everything much more like Java which I love what what it no no we're we're taking es6 away from you you're just no more no more Babel for Matt [Music]