Microsoft 365 Community Community Demos, 1 Oct 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Modernize your SharePoint Framework projects

Description

In this 14-minute developer-focused demo, Andrew Connell efficiently shows the steps to take an existing SPFx project using TSLint and move it over to ESLint and dump IE11 at same time. Basically, install and configure ESLint, and update gulp tasks - effectively telling TypeScript complier to use modern js target and update referenced libraries. Then appreciate Andrew’s ESLint preset for SPFx that automates the update! Bonus - updating yields smaller and faster bundles. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on September 9, 2021.

Demo Presenter: Andrew Connell (Voitanos) | @andrewconnell

Supporting materials:
• Article - Get with the times & ditch TSLint in favor of ESLint in SharePoint Framework projects | https://vtns.io/ditch-eslint-spfx
• Article - Ditch TSLint for ESLint in SPFx projects in one simple step | https://vtns.io/ditch-eslint-spfx-preset
• Article - Optimize bundles by disabling IE11 support in SPFx projects | https://vtns.io/disable-ie11-spfx

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

A

So I got a few slides. I want to run through real, quick, just to kind of answer the. uh 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 um I've got a podcast. I also have a sharepoint framework course and I'm the one person that likes the first three star wars episodes.

A

So the couple 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 eslant.

A

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 road, a road map post that effectively said we're done with doing things that or we our mission going forward, is not about uh making typescript the greatest language in the world. The the idea here is about making typescript to improve the ecmascript experience, so they wanted to focus on on not going off and doing their own thing and kind of forking off ecmascript.

A

They want to focus on 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 uh and uh for different code rules and stuff like that um they looked at it and they said you know what pretty much same thing we're done.

A

Maintaining this ts lint 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 first reading just javascript, so they ditched it as well notice. The dates on these, though that was in february of 2019.

A

Well, unfortunately, two and a half years later, we are still create using ts lint with spfx project. So even though this has been deprecated by microsoft and by from the typescript team, but also from the team that does ts lent they've deprecated, this ts lint tool for over two and a half years, um 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.

A

uh Strangely enough, that's actually been one of my most popular blog posts in the last year um that I posted a couple 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 uh how long it took us to get off of node 10 and up to node, 12 or 14..

A

We all know how long we were stuck on webpack 3., but I'm going to show you how you can take your sharepoint framework project today, that's using tslent and how you can switch it over to eslint part, I'm going to show you how to do it manually and I'm going to show you how to do it a very easy way of like as close to a one-click install as possible.

A

The other thing I'm going to talk about is ie 11., so, um like other stuff that we're all familiar with you know, there's been this thing going around the world that all of us hate. It's been a scrounge on all of us. A lot of us have been affected by it and it's something we that obviously the world just can't shake. And, of course I am talking about internet explorer 11.. So I'm going to show you how you can get rid of ie 11 support once and for all in your project. Now.

A

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, uh microsoft has dropped ie11 from the list of their supported, browsers for all microsoft, 365 apps. So, even if you build something in uh 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.. That's like the equivalent of them saying we have a corporate standard of using betamax. No one cares right.

A

That's great um microsoft isn't going to support use if there's a problem with ie11, we do our web part. They probably have a problem with sharepoint as well sharepoint online as well, and that's not really your problem anymore.

A

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.

A

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 want to. We don't want to do that anymore.

A

In addition to that is that ecmascript 5 by doing 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 going to 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 little things that you're going to need to fix as well.

A

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 so I'm gonna walk through something that I've actually blogged about three different things. So if you, uh 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.

A

So what I'm going to do is I'm going to show you first about eslint, um but again the just sit back and enjoy the ride for what I'm going to show you real, quick. The links that I just posted today are going to walk you through all three things. I'm going to show you here.

A

So let's say you've got a base, sharepoint framework project and you want to get rid of tslint and swap it over eslint. What are the steps you need to do? Well, the first you have to do is install a handful of packages, I'm installing eslet right here, I'm installing two eslint typescript packages that are there to let es lin know how to parse typescript files and then there's also a gulp task. Now.

A

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, that's beyond the scope of what we're going to cover here.

A

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 ts lint has a config file. So I've got a config file that I've listed right here.

A

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 piece is 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 uh esl rules are recommended by the typescript team and then just in general, also some other recommended ones.

A

I'm going to 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 ts, lint rules here that you see that's in that tslint json file in the base of your project.

A

Okay, so I've got I've got uh dslint 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 uh gulp file that we have in a sharepoint framework project? What you're going to do is you're going to find this line. That's already there and you're going to add some awesome sauce to it.

A

You are first going to tell the sharepoint framework to stop using ts lent that two and a half year old thing that you don't want to 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 going to 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.

A

I can then say gulp tasks, and you can now see that the ts, lint 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 a gulp to show up. I have to keep talking, so you don't think I disconnect.

A

I had actually just killed my wi-fi and gone to hardline right before the last demo like lost the connection second ago I was like did I just do that? I just kicked myself out there. We go all right, so I'm not going to run this because you know 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 gold, build hey, that's all fine and good, and now I've got ts.

A

I've got es lint 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 um 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 going to do.

A

Is it installs all those dependencies that you're going to need like the typescript, plugin and eslint, and all that 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.

A

As you see here, I've actually got it baked into my preset, so I'm making it's a lot easier to go through and to include it as a task inside of your sharepoint framework project, um 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.

A

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 uh with my uh with the different options, I can do in the config. But when I go to build it, eslint 6 is going to throw an error saying it doesn't understand what that thing is.

A

Furthermore, if you're using eslint 6, it doesn't support the version of typescript that the sharepoint framework projects support today. It works just fine and eslint 7 supports it, just fine, but if you don't want that warning to show up, you can say worn, unsupported, typescript version. No, I don't want it. Don't worry about anything. I know what I'm doing.

A

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 end in stuff way off the screen.

A

So I don't like, like me generally, I don't like that ts, lint json file that the sharepoint framework projects have, but if you do like it, what I've done is I've created a special uh 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 um preset also adds in all of the equivalent rules for eslint that we have as ts lint rules on a default sharepoint framework project.

A

So if you want to look just like the way, the microsoft guys want you to make want your project to look, but you want to use tslent. I got you set up here. It's just one extra step. You got to uncomment that line. If you want to do it, if you don't like it, you think that that should be the default. Well, pr's are always welcome. They don't always accept it, but at least they're welcome and you can actually submit it to my preset project and we'll take a look at it.

A

The other thing that I want to show you is about how to kill ie 11 once and for all, and hopefully we can get past this. You know phase of our life um that we're all dealing with in the last couple years. The way you're going to do that this is actually very simple, is if you come over here and you look at your ts, lin ts, config file, the only change you have to do to do to make this change is right here on this target and what you want to do.

A

Is you want to 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.

A

So take my word for it. That's 3.0 uh k, so it's 3k uh in size. I have a little demo where I'll show you how to calculate math using the console, but we're not going to do that, because I want to make sure that the other demo has time.

A

If I come over here- and I make this go back to my ts- link config file and I change this use a more recent version of ecmascript. I can choose a bunch of different options here I like to choose es next and then what that says is just use the most current version of javascript. That's a safe one to use, because now that I 11 is gone, the only browsers that are out there are evergreen browsers. So we should be in good shape. Now we're going to make that one change.

A

The other change you're going to you're, going to probably want to do, is you're probably going to want to come to this lib section, and you want to tell the typescript compiler, hey here's other things you want to import that you want to 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 the spread operator, well, ecmascript 5 didn't understand what the spread operator was.

A

So you can change the library that you import to something else like ecmascript, 6 or es next 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 ie. 11 die demo I'll do a gulp build.

A

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. uh Let's do a list, everything in the. What was that the ie 11 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 he, oh it's already finished the build okay, so it doesn't matter so the build finished.

A

The build is now 1.9 k. So what you notice here by compiling it to a using a newer version of javascript?

A

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 our bundle has now gone from 3k down to 1.9 k. That means you just chopped off about 40 percent on the size of your bundle.

A

It's a debug build it's not minified blah blah blah, but still it's better. So that way we can move on to the world. That's everything I wanted to show you guys in this demo again the uh samples are or the uh there's some blog posts that do show. You walk you through each of these different three things that I showed you if you were interested in looking at more stuff or learning how to do this in your own projects.