Microsoft 365 Community Getting started series, 14 Apr 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Introduction to SharePoint Framework Web Part template options

Description

In this 5 minute developer-focused demo, Hugo shows which template options are available to you when scaffolding your SPFx Web part using Yeoman Generator 1.14: Minimal, no framework or React and highlights the differences.

Presenter: Hugo Bernier (Microsoft) | @bernierh

Resources:
https://aka.ms/spfx-yeoman-info
https://aka.ms/m365pnp
https://pnp.github.io/blog

A

Hi, I'm hugo and I'm a cloud solution architect at microsoft, the spfx yeoman generator version 114 introduced some new web part template choices for you and you might be wondering what's the difference between them. Well, today's video I'm going to show you the difference between the three templates and how to pick the right one. Let's get started.

A

This video assumes that you already have a workstation configured to run the spf xioma generator and that you already know how to launch it, if not check out our other videos to get you started now when you run the one generator and you select that you want to build a web part, it prompts you to pick a template and there are three template choices, minimal, no framework and react.

A

Now. If you've used an older version than spfx114, you may only see or have seen two choices here. No java screen framework or react, but as of spf x, 114, there's new, a new minimal template, and why is that? Well, let me explain by focusing on how the no framework and react templates have changed in 114 and we'll talk about the minimal one with the spf 6x yeoman generator prior to spx 114.

A

You could use the no framework and react web part templates to create a web part that could work both in sharepoint or in teams, but you had to write some extra code for it to handle the different environments and it was not really aware of whether it was running in sharepoint or teams unless you wrote some code to do that.

A

Likewise, if you wanted the web part to change depending on the current sharepoint site's theme, or to be aware of the background color of the section where it resides, you had to write some extra code and if you wanted it to handle the theme color of the team's environment, light background, dark background or full contrast. You had to do that now since spfx114.

A

Both the no framework and the react template include the code to handle this. For example, I'm running this web part in a hosted sharepoint workbench using a light theme, but if I switch to a dark theme, you'll see that the web part automatically adjusts to the theme changes.

A

Likewise, if I change the section background where the web part is hosted, it adapts to the changes and I didn't write any code to handle this. It comes from the no framework and the react template just out of the box, which is great you'll, also notice that the web part says that this app is running on my local environment as a sharepoint web part, it would actually detect whether it's running in teams or whether it's actually being debugged locally or it's actually hosted on a page now.

A

The code to do this is actually pretty simple, but you'll see that there's actually code to handle all the possibilities and that's all built in into the both the no framework template and the react template.

A

Essentially, the no framework part and the react web part both do exactly the same thing. So it really depends on whether you're comfortable with using react or you're comfortable with just using javascript.

A

The render code for both is displayed here on the screen, and you can see that the no framework webpart just renders all the html in the body of the render code, whereas the render code for the react actually calls a react component to actually render the elements and it passes all the attributes into the react component.

A

And if you look at the component generated by the react template it receives the properties it needs to render the same html as the no framework template, whereas the no framework template returns, an html string, the react, template returns, html elements, otherwise both the no framework and the react templates create essentially the same web part.

A

On the other hand, if you choose the minimal template, you'll find that the web part really does what it says it does. It renders nothing it's the most minimal web part there can be. So if you wanted to render some text, you actually have to go to put in some text in the render method. So here I'll, just type hello spfx. So you can see something and if I go back to the web part and refresh the page.

A

You'll actually see that the text is rendered and that's really the difference between the minimal web part and the other webparts, and there you have it. That's the difference between the three templates that are available for you when you select the web part in the spf x, 114 yeoman generator.

A

Essentially, if you want your web part to know that it's running in sharepoint or in teams, and to be aware of the theme that it's using, you probably want to pick the no framework or the react template based on whether you want to use just simple javascript or use react.

A

If you don't want any of those features, you can actually just use the minimal template and then you can implement as much or as little as that code as you want. I hope this was helpful to you I'll see you soon.