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.
@andrewconnell created presets for #SharePoint Framework projects to use #ESLint & ditch the long-deprecated #TSLint tool that Microsoft includes in #SPFx projects. All you have to do is install a single NPM package and you're automatically using ESLint! https://t.co/3plfSob4bN pic.twitter.com/SCOCMsGUdw
— Voitanos (@voitanos) August 4, 2021
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.
@SharePoint Framework projects still default to using #TSLint, even though it's been deprecated for over 2.5 years! In this post, learn how to replace it with @ESLint, the standard for linting both #JavaScript & @TypeScriptLang projects. #eslint #spfx https://t.co/jCOSQ7Zqg9 pic.twitter.com/mDIxoFVc7T
— Voitanos (@voitanos) July 20, 2021
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.
Continuing with @andrewconnell's theme of recent posts, learn how to optimize #SharePoint Framework bundles by ditching support for #IE11. You can do this thanks to Microsoft ditching IE11 from the supported browsers for all apps in #Microsoft365! #SPFx https://t.co/SUV1yOz7j5 pic.twitter.com/IK8CwuCgPj
— Voitanos (@voitanos) August 24, 2021
And if you’re wondering if this is a good idea, rest assured… even Microsoft supports it:
Create guidance on reducing the bundle sizes for #SPFx solutions for #MicrosoftViva, #MicrosoftTeams and #SharePoint.
— Vesa Juvonen (@vesajuvonen) August 24, 2021
Simple way to optimize the solution structure. We'll look into doing this also natively in the default projects now that IE11 support is gone.#Microsoft365dev https://t.co/kXRkcQMlSY