Over the last couple weeks, I’ve been to working on two things:
Researching a process of modernizing SharePoint Framework (SPFx) projects and…
Refreshing of my Mastering the SharePoint Framework course… I’ve completely re-recorded the Starter bundle. I’m working on the lessons now & looking forward to updating what’s currently there. More on that later…
In this post, I want to tell you about some of this modernization work I’ve been doing and how you can apply it to your SPFx projects!
Microsoft has been slow to keep SPFx current with modern development. Part of the reason is due to the fact they have to worry about enterprises with corporate standards, but a good bit is just their lack of “keeping up.”
Let me share a few things with you that you can apply to your SPFx projects TODAY & not wait on Microsoft to get with the times.
Ditch TSLint - Adopt & embrace ESLint
SPFx projects today, even the SPFx v1.13 betas, still use TSLint as their code linter.
But, did you know that over 2 years ago the TypeScript team at Microsoft as well as team responsible for TSLint through the towel on TSLint and refocused on ESLint in the best interest of the JavaScript and TypeScript community (see this from Microsoft and this from the TSLint team for proof)?
So why is SPFx still using TSLint in its default project scaffolding? We’ve had seven SPFx releases since those announcements… so… what’s the hold up?
You know what, it doesn’t matter… you can address it in your projects today without waiting.
Update your SPFx projects manually
In my post 👉 Get with the times & ditch TSLint in favor of ESLint in SharePoint Framework projects, I explain what’s involved and how to make a few changes to adopt ESLint and ditch TSLint.
Or use my preset to do it in one quick step!
After I wrote blog post, I thought to myself “I wonder if there’s an easier option for developers to make this change?” Sure enough there is!
Following a similar pattern with my Jest presets for SPFx projects, I created a preset for swapping out TSLint in favor of ESLint. All you have to do is install a single npm package after creating your project. You can learn more about this in my post 👉 Ditch TSLint for ESLint in SPFx projects in one simple step.
But that’s not all…
Optimize your SPFx projects for SPO by ditching IE11 support
Did you know that earlier this month, Microsoft finally pulled the plug on IE11 support for all Microsoft 365 apps? That means if you’re building SPFx projects for use in SPO, there’s absolutely ZERO reason to support IE11… because your hosting environment doesn’t support IE11.
By default, SPFx projects are configured to compile down their TypeScript to ES5, or JavaScript circa 2009. That means we’ve got a bunch of polyfills & extra code to implement things supported in more modern versions of JavaScript.
Did you know, that if you made one small change to your SPFx project, you could not only modernize it by ditching support for IE11, but you can see a reduction of over 20% in the resulting JavaScript bundle each and every one of your users have to download for your SPFx component?
Interested in learning more about this as well as how to make this change? Check out my post 👉 Optimize bundles by disabling IE11 support in SPFx projects.
And if you’re wondering if this is a good idea, rest assured… even Microsoft supports it:
Microsoft MVP, Full-Stack Developer & Chief Course Artisan - Voitanos LLC.
Andrew Connell is a full stack developer who focuses on Microsoft Azure & Microsoft 365. He’s a 20+ year recipient of Microsoft’s MVP award and has helped thousands of developers through the various courses he’s authored & taught. Whether it’s an introduction to the entire ecosystem, or a deep dive into a specific software, his resources, tools, and support help web developers become experts in the Microsoft 365 ecosystem, so they can become irreplaceable in their organization.
