Microsoft 365 Community Community Demos, 17 Jun 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: spfx-fast-serve: faster SharePoint Framework development

Description

In this 13-minute developer-focused demo, Sergei Sergeev shows a SPFx command line utility, that accelerates SPFx development by modifying your SPFx project to run a serve command immediately upon Save. Reduces SPFx build pipeline rebuild/reload time from greater than 7 seconds to less than 1 second by applying updates only to changes rather than rebuilding entire project. Install CLI, spfx-fast-serve then apply fast-serve to your SPFx project. Presenter shows and explains project file modifications. Recently added hot model replacement (HMR) feature. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on June 17, 2021.

Demo Presenter: Sergei Sergeev (Mastaq) | @sergeev_srg

Supporting materials:
• Repo - SPFx Fast Serve Tool | https://github.com/s-KaiNet/spfx-fast-serve

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

My name is yesterday: I'm from belarus minsk, I'm sharepoint and microsoft, 365, developer and consultant also microsoft, mvp under office development category. Mostly I work as independent contractor in this demo. We talk about spfx fast, serve, it's faster sharepoint framework development. So let's go to the demo part.

A

um So what is spfx first serve. That's the command line utility which modifies your sharepoint framework build so that it runs continuous, serve command as fast as possible. So what does it mean exactly so, let's start with this sample web part. So I have a very simple web part here which simply outputs your contact information. So if you run inside of sharepoint, then it prints your web information using rest api call. If you run inside teams, then it prints out your team's contact information.

A

So normally, when you develop spfx web parts, then you have this gulp serve process running. I have it already running here and when you modify the code, let's say I want to change it like this and when you click save, then as perfect, build pipeline starts a rebuild process which rebuilds types create packs everything. And finally, you can reload your page and see the changes so for for my part here, this process took seven seconds. So, if I let's say revert it back like this click save, then the process starts from the beginning.

A

Again, that's the type script task, then webpack task and this time again it's seven seconds, and I have to refresh to to see my changes so for four small projects, it's more or less okay to have seven seconds, but we developers we want to see changes instantly and if your project grows, if your code base grows, then this time and reload time will be even bigger.

A

For example, I have um I have a logs from pnp modern search solution, and here when we run gulp server, when you modify file, then it takes, for example, typescript task. It's almost eight seconds. Then we have web pack 11 seconds. We have copy assets almost 1. Second, in total, it's more than 20 seconds just to rebuild your process after your project, after file save, which is not very convenient in developer experience.

A

So this is what spfx fast source is trying to solve and is trying to improve, to decrease this reload time so how to install it. It's very easy. First of all, you should install the cli globally, so we should, in pm, install spfx fast serve dash g, so I have it installed. So we're not going to run it. Then you should navigate to your spfx project and simply run spfx fast server after this command. Fastsearch cli will update some files inside your spfx project so that fast surf mode will be available for you.

A

So let's see what was changed. First of all, that's the package.json file. It adds this dependency, which is very important dependency because it enables all different helpers and methods for fast serve mode. Also, the cli adds a new npm script command here and this command. You should run if you want to to run your build in a fast surf mode. Basically, this message says that when you're done, you should execute npm run server. That's this npm script!

A

Then, if we open gulp file here- and then it has this two line again, these lines they're very important, because this method add fast serve finally enables fast, surf mode for your asp effects build pipeline.

A

And then, if you go to our root and then we find the fast source folder, which contains the config file, config file contains the initial settings you used when running the cli. And additionally, you have a serve property where you can specify different additional configuration for your serve command. For example, open false means that it does not open the local workbench.

A

You can specify open url, so the exact url you want to open. You can modify, for example, login level, full screen errors, etc. So you can change it here, and the last file, which is added by spfx faster tool, is the pac.extend file. So again, this file is added to support some advanced scenarios. If you in your build s, perfect build if you use this feature called build.configure webpack. So if you use any webpack modifications inside your spfx build pipeline so that you should also reapply this configuration into the webpack.extent.js for fast serve.

A

For example, here I use webpack alias so this is resolve, alias that's the feature which allows me to to write code. Try import like this, so import from at src, slash, etc. So I have it configured here and also I have it configured here in my webpack.extend.js, so that it is also supported inside fast server.

A

So, let's see, uh let's see it in action and let's see whether it really improves the performance from either part.

A

So again, before running in a fast serve mode, it executes the bundle command. This is the required step, because this step creates some some configuration files needed for fast serve. That is why this step is always included, and now we are running in fast surf mode and again, if I do the same trick, if I want, if I go to components header and if I change this text to be like 1 1, 1 click save- and I have to refresh here because I'm running from scratch.

A

Okay, let's change it to two to two click save, and you see that this time the rebuild time is drastically decreased. So it's just 300 milliseconds instead of 7 seconds, and also I can see my changes live in a hosted workbench, which is automatically reloaded. So if I change to 5 click save again it's 200 of milliseconds, so you see it is faster. This is how this problem of slow reload builds, is solved by spfx faster.

A

Moreover, it works in themes because, if you remember that's the context info web part, it works in different hosts. If you go to viewer connections, it works inside people connections. I have a demo page here, so I can change it again to 1-1-1 click save, and you see it also automatically refreshes the page inside the connections as well. When I click save it refreshes again, and if we go to teams and then to to my custom tab here context info, then it works in a custom tab to this time.

A

The context is teams. That is why the information here is a bit different, because that's the uh information from aspx teams sdk object, but exactly the same way, you can modify your context, you can click save and you can see the results of this change almost immediately.

A

So basically, this is how it works, how to configure it um in the in future. In the next version of s prefix, a new component card extensions will be supported by fast serve as well, but how how it works or why it is so fast. First of all, because fast surf uses completely custom. The pug based build and this build is optimized for performance, for example all compilations. They are done in memory, so the file system is not used.

A

That is why already it's the faster, also type checking is fully asynchronous, and the last thing is that when we change anything like I did before, when you change a react component, then the pack does not rebuild everything, because by default s perfect build rebuild everything rebuilds everything if you change a single file, but the fast source rebuilds only needed files. That is, why cannot incremental, builds so faster inside as perfect fast serve, and I have a few minutes left and I would like to show you a feature I added in just a week ago.

A

This feature it is called hot model replacement. So if you have experience with create react, app, probably you know what is hmr hot model replacement. Basically, um when I so as demand before, when I change a file or a source code, then webpack rebuilds, my source files and then finally, it refreshes the page.

A

But the idea behind hmr feature is that, instead of performing a full page refresh because sometimes it it again, it might be slow to perform a full page refresh.

A

It tries to apply a partial update to the page, so it grabs your change, react component and replaces outdated component on the page with the new one which came from the backend. So basically, this is this is how this feature works and to enable you should you should set hold refresh to true here. Let's run, npm run serve and see how it works in action.

A

Now, I'm going to open my styles at the beginning: okay, let's wait for a while yeah when the fast surf initially builds the project, then the time is big because it builds everything, but all subsequent builds are a lot faster.

A

Now, let me refresh it again because I'm running from scratch now, let's say I would like the sub heater color to be red, so I change it to red click, save and now you see the magic it does not perform a full page refresh. Instead, it simply applies a partial update. So I want background color to be.

A

I don't know like this click save, then again it dynamically applies without full page refresh. I can change paging and again it does not refresh page. I can even change something inside source code in typescript like like this click save and again it does not refresh the page.

A

So this feature is considered as experimental because it still requires some configuration. For example, it works only with typescript 4.. You have to install rushtag compiler 4.. Also, you should be aware that it doesn't. It does not work for all components. Sometimes it falls back to the full page refresh.

A

That is why you can try it and if it works for a project, then you can. You can use this hmr feature so basically yeah. This is it from my side. Thank you very much.

B

Absolutely brilliant stuff! Thank you. Thank you sergey on that. One really really really really cool um so, and there was a lot of comments. Why don't we have this natively out of the box and and support it and all of that- and maybe we will be at some point. So, let's see uh right now, it's it's uh it's available as a individual individual package and thank you, sir. Okay, really awesome stuff.

B