 I got a few slides I want to run through real quick, just to kind of answer the what and the why. And then I'll do a demo of all three of the things I want to show you, and the demo at the very end. All right, so first it's all about modernizing your SharePoint framework project, just really quick. I'm Andrew Connell, got a podcast, also have a SharePoint framework course, and I'm the one person that likes the first three Star Wars episodes. So the couple of things I want to cover today is all about how to modernize your SharePoint framework project. Now, I want to start with talking a little bit about TSLint and ESLint. Let's look at a little bit of a history on why this is. Well, back in January of 2019, the TypeScript team published a roadmap post that effectively said we're done with doing things that our mission going forward is not about making TypeScript the greatest language in the world, the idea here is about making TypeScript to improve the ECMAScript experience. So they wanted to focus on not going off and doing their own thing and kind of forking off ECMAScript, they wanted to focus on making it a better experience. And in doing so, they essentially were saying, we don't want to make TypeScript something special, we simply just want to make it special sauce on top of ECMAScript. Well, very soon after that, about a month after that, the team that's in charge of a tool called TSLint, which is a linter that checks your code and for different code rules and stuff like that, they looked at it and they said, you know what, pretty much same thing, we're done maintaining this TSLint project, this doesn't make sense. We should be pouring all of our efforts into ESLint and instead just create special plugins for ESLint that know how to read TypeScript or reading just JavaScript. So they ditched it as well. Notice the dates on these though, that was in February of 2019. Well, unfortunately, two and a half years later, we are still using TSLint with SPFX projects. So even though this has been deprecated by Microsoft and by from the TypeScript team, but also from the team that does TSLint, they've deprecated this TSLint tool for over two and a half years. And it can even result in some random stuff that you get every once in a while. I showed an error that I got just recently working on a SharePoint Framework project right here where it talks about can't find a custom rule directory. Strangely enough, that's actually been one of my most popular blog posts in the last year that I posted a couple of weeks ago about that. The problem though is that, you know, SharePoint Framework projects, they can take a while to catch up to some of the more modern practices. We all remember how long it took us to get off of Node 10 and up to Node 12 or 14. We all know how long we were stuck on Webpack 3. But I'm gonna show you how you can take your SharePoint Framework project today that's using TSLint and how you can switch it over to ESLint part. I'm gonna show you how to do it manually and I'm gonna show you how to do it a very easy way of like as close to a one click install as possible. The other thing I'm gonna talk about is IE 11. So like other stuff that we're all familiar with, there's been this thing going around the world that all of us hate where it's been a scrounge on all of us, a lot of us have been affected by it. And it's something that obviously the world just can't shake. And of course I am talking about Internet Explorer 11. So I'm gonna show you how you can get rid of IE 11 support once and for all in your project. Now, why do you even care about that? Well, first of all, Microsoft 365 apps they don't support IE 11 anymore. As of the middle of August, Microsoft has dropped IE 11 from the list of their supportive browsers for all Microsoft 365 apps. So even if you build something in today, a SharePoint framework project today and your customer says, we're in SharePoint online but we still have a corporate standard of IE 11. I mean, that's like the equivalent of them saying we have a corporate standard of using Betamax. No one cares, right? That's great. Microsoft isn't gonna support you. So if there's a problem with IE 11 with your web part they probably have a problem with SharePoint as well. SharePoint online as well and that's not really your problem anymore. The challenge that we have though is kind of like the last one is that SharePoint framework projects they still transpile all of our TypeScript down to ECMAScript 5 or ES5. You can translate that. That ECMAScript 5 is actually JavaScript 2009 which I mean, that's something that we all use. I mean, that's back when my hair wasn't gray. So we don't wanna do that anymore. In addition to that is that ECMAScript 5 by SharePoint projects transpiling our TypeScript down to ES5. It's adding a lot of extra code, a lot of polyfills just to account for missing language features. So I'm gonna show you how you can also update your SharePoint framework projects today to tell TypeScript to not build for something that's 12 years old but there are also a couple of little things that you're gonna needing to fix as well. Now I'm gonna show you a bunch of stuff here in the demos but if I can find it really quick I'm gonna drop something in the chat. There we go. I'm gonna walk through something that I've actually blogged about three different things. So if you miss what I'm doing I've been going too quick through this. So let me switch over and show you VS Code. All right, so what I'm gonna do is I'm gonna show you first about ESLint. But again, just sit back and enjoy the ride for what I'm gonna show you real quick. The links that I just posted today are gonna walk you through all three things I'm gonna show you here. So let's say you've got a base SharePoint framework project and you wanna get rid of TSLint and swap it over ESLint. What are the steps you need to do? Well, the first you're gonna have to do is install a handful of packages. I'm installing ESLint right here. I'm installing two ESLint TypeScript packages that are there to let ESLint know how to parse TypeScript files and then there's also a gulp task. Now, one little footnote here is that you see where I'm using ESLint version seven. You're not really using version seven because unfortunately there's dependencies deep nested in the SharePoint framework dependency tree that force us to use ESLint six and we can't override that. If you want to, you have to install ESLint globally, blah, blah, blah. That's beyond the scope of what we're gonna cover here but just let you know that that's what's going on. There's a file that away. When you're using ESLint though, you need to create a config file kind of like how TSLint has a config file. So I've got a config file that I've listed right here. This config file is telling it to use the TypeScript ESLint parser. I'm telling it the different options that I'm interested in, what plugins I'm interested in and then this extends pieces where I can say what rules do I want to use? So I'm using all the out of the box ESLint rules that are recommended as well as all the ones that we have for ESLint rules that are recommended by the TypeScript team and then just in general, also some other recommended ones. I'm gonna come back to this in the second part of my demo in just a minute here because one thing you're noticing is that you don't see any SharePoint framework defined rules. If you remember in a base SharePoint framework project we've got a bunch of base TSLint rules here that you see that's in that TSLint JSON file in the base of your project. Okay, so I've got ESLint installed. I've got a configuration file set up for it as well. So the next thing I need to do is I need to run the task. Well, the problem is is I don't have a task in here. So in a default Gulp file that we have in a SharePoint framework project, what you're gonna do is you're gonna find this line that's already there and you're gonna add some awesome sauce to it. You are first gonna tell the SharePoint framework to stop using TSLint that two and a half year old thing that you don't wanna touch anymore. And instead what you're gonna do is create a custom task and what this custom task does is it's gonna take all of your TypeScript and TypeScript extended files. It's gonna pipe those into ESLint using your configuration file. And if you've got any problems you're just gonna bail out and create this new task for this. And what that allows you to do then is when you then come into your project, which is like this, I can then say Gulp Tasks and you can now see that the TSLint project or a task, it was never there, it was kind of invisible to us, but an ESLint task is now there. And we're just waiting for Gulp to show up. I have to keep talking so you don't think I disconnect. I had actually just killed my Wi-Fi and gone to hardline right before the last demo, like lost the connection a second ago. And I was like, did I just do that? Did I just kick myself out? There we go. All right, so I'm not gonna run this because you can see that it's there. But what it's done is that when I run a Gulp build, it will run ESLint before it runs Gulp build. Hey, that's all fine and good. And now I've got ESLint working on my project, but that's a lot of extra steps I have to do. So what I've done is I've actually done something else to make your life a little bit easier. In the second project, what I've done is I've created this little, I call it a preset, kind of following the preset concept that we have with Jest and testing React-based projects. I've created an ESLint preset for SharePoint Framework. And what this is gonna do is it installs all those dependencies that you're gonna need, like the TypeScript plugin and ESLint and the Gulp file as well. It does all of that stuff. When you run it, it also goes into your Gulp file and it adds in the stuff that you need for creating the ESLint task. As you see here, I've actually got it baked into my preset, so it's a lot easier to go through and to include it as a task inside of your SharePoint Framework project. But the other cool thing about this is if you come over here and you look at the config file, what you see in this ESLint file, now there's a, in this config file, there's a lot of stuff that's in here, a lot more stuff that I've added. And the documentation, this, all this red stuff kind of explains a little bit. There's a little bit of an issue between ESLint version six and version seven. Version six doesn't like this schema thing in here, so you don't get IntelliSense. So I have to uncomment that if I want to get IntelliSense with my, with the different options I can do in the config. But when I go to build it, ESLint six is gonna throw an error saying it doesn't understand what that thing is. Furthermore, if you're using ESLint six, it doesn't support the version of TypeScript that the SharePoint Framework projects support today. It works just fine and ESLint seven supports it just fine. But if you don't want that warning to show up, you can say warn unsupported TypeScript version. No, I don't wanna, don't warn me about anything. I know what I'm doing. Furthermore, what if you're the kind of developer that likes all of those rules that the SharePoint Framework team puts on us? Personally, I don't like that. I like to let developers choose what they want. And like I like spaces, I like two spaces. I'm not one of those strange people that likes tabs or four spaces and likes to indent stuff way off the screen. So I don't like, like me generally, I don't like that TSLint JSON file that the SharePoint Framework projects have. But if you do like it, what I've done is I've created a special set of rules here. And if I just add a comment there, so I uncomment this line and I go through and add in a comment up here, then you will see that my preset also adds in all of the equivalent rules for ESLint that we have as TSLint rules on a default SharePoint Framework project. So if you wanna look just like the way the Microsoft guys want you to make, want your project to look, but you wanna use TSLint, I got you set up here. Just one extra step, you gotta uncomment that line if you wanna do it. If you don't like it and you think that that should be the default, well, PRs are always welcome. They're not always accepted, but at least they're welcome and you can actually submit it to my preset project and we'll take a look at it. The other thing that I wanted to show you is about how to kill IE 11 once and for all. And hopefully we can get past this phase of our life that we're all dealing with in the last couple of years. The way you're gonna do that, this is actually very simple. Is if you come over here and you look at your TSLint TSConfig file, the only change you have to do to make this change is right here on this target. And what you wanna do is you wanna change this target to a different value. Now, let me show you something first. If you come over here and I've done a normal build of a SharePoint framework project already and I look at the bundle that was actually created here, you see all of this extra garbage up here at the top and then you see there's a bunch of extra garbage all in here that is not really necessary. So take my word for it, that's 3.0K. So it's 3K in size. I have another little demo where I'll show you how to calculate math using the console, but we're not gonna do that because I wanna make sure that the other demo has time. If I come over here and I make this go back to my TSLintConfig file and I change this to use a more recent version of ECMAScript, I can choose a bunch of different options here. I like to choose ESNext. And what that says is just use the most current version of JavaScript. That's a safe one to use because now that IE11's gone, the only browsers that are out there are Evergreen browsers. So we should be in good shape now. We're gonna make that one change. The other change you're gonna probably want to do is you're probably gonna wanna come to this lib section and you wanna tell the TypeScript compiler, hey, here's other things you want to import that you wanna assume are there. Like for example, if I ran this on the default SharePoint framework project right now, it worked great. But if you use something like a spread operator, well ECMAScript 5 didn't understand what the spread operator was. So you can change the library that you import to something else like ECMAScript 6 or ESNext or whatever. So I'll just say, I'll put that as ES6. I'll then come over here. We'll do a, let's jump out of this demo into our IE11 die demo. I'll do a gulp build. Hopefully this runs slightly faster than the last time I ran gulp. Here, I can just show you while we're waiting. Let's open up another, let me open another console real quick. Come on, let's do a list. Everything in the, what was that? The IE11 demo that was in lib, that was in web parts. Let's see if it's still there. Hello world, and let's go to that JavaScript file. And we can see that it's already finished the build. Okay, so it doesn't matter, so the build finished. The build is now 1.9K. So what you notice here by compiling it to a using a newer version of JavaScript, if I come over here and look at the bundle, notice all that junk that we had at the top is gone. This actually looks like the same class that you wrote in your web part project because TypeScript is very close to the modern version of JavaScript. So we got rid of all the extra junk at the top. We got rid of that extra junk after all those import statements. And our bundle is now gone from 3K down to 1.9K. That means you just chopped off about 40% on the size of your bundle. It's a debug build, it's not minified, blah, blah, blah. But still, it's better. So that way we can move on in the world. That's everything I wanted to show you guys in this demo. Again, the samples are the, there's some blog posts that do show you walking through each of these different three things that I showed you if you were interested in looking at more stuff.