Building solutions with the SharePoint Framework (SPFx) lets developers take advantage of modern web development tools while integrating smoothly with Microsoft 365. Using TypeScript, React, SCSS, and Fluent UI, you can create user experiences that are responsive, easy to maintain,
Why These Tools?
- TypeScript provides a robust typing system that enhances code quality, reduces bugs, and ensures maintainability in complex SPFx projects.
- React enables the creation of dynamic, component-based interfaces with state management capabilities, making it a perfect fit for SPFx web parts and extensions.
- SCSS (Sassy CSS) allows for modular and reusable stylesheets, simplifying theming and customization, especially in large projects.
- Fluent UI, Microsoft’s official design library, ensures consistent styling and behavior with other Microsoft 365 applications while accelerating development through pre-built components.
TypeScript in a nutshell
TypeScript is a programming language that builds on JavaScript by adding optional static types and other functions. It is developed and maintained by Microsoft. TypeScript code can be transposed (converted) to regular JavaScript, making it compatible with any environment that can run JavaScript.
One of the key features of TypeScript is optional static types, which allow developers to specify the type of variable or function parameter. For example, you can specify that a variable is a number:
let myAge: number = 30;
TypeScript
You can also specify that a function is given a string parameter and returns a boolean value:
function isValidEmail(email: string): boolean {
// implementation here
}
TypeScript
Another feature of TypeScript is classes and interfaces, which can be used to create objects with specific structures and behaviours. For example, you can create a “Person” class with name and age properties:
class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name; {
this.age = age;
}
}
let me = new Person("John", 30);
console.log(me.name); // "John"
console.log(me.age); // 30
TypeScript
Interfaces can also be used to define a specific structure of an object.
interface IPlayer {
name: string;
score: number;
}
const player: IPlayer = { name: 'John', score: 100};
TypeScript
React, what is it, what does it do?
React is a JavaScript library for creating user-friendly and efficient user interfaces. It was developed by Facebook and is currently widely used in web application development.
React uses a concept called components. A component is a piece of code that defines a piece of a user interface, such as a button, a form, a list, etc. Each component has its own logic and state and may contain other components. This makes the components easy to reuse and maintain.
import * as React from 'react';
export default class MyButton extends React.Component<IMyButtonProps, {}>
{
public render(): React.ReactElement<IMyButtonProps> {
return <button>{this.props.label}</button>;
}
}
TypeScript
In this example, there is a component called “MyButton” that displays a button with a label that is passed through the props.
React uses a technique called virtual DOM (Document Object Model) to improve performance. The virtual DOM is a copy of the actual DOM that is kept in memory. When there are changes in the components, only the components that have actually been changed are updated to the actual DOM. This reduces the amount of work that the browser has to do and therefore improves the performance of the application.
React also offers a number of tools for managing the state of the application, such as state and props. This allows you to track data that changes over the lifetime of a component and use this data to influence the appearance of the components.
import * as React from 'react';
export default class MyComponent extends React.Component<IMyComponentProps, IMyComponentState>
{
state = {
name: 'John Doe',
age: 35
};
public render(): React.ReactElement<IMyComponentProps> {
return (
<div>
<p>Name: {this.state.name}</p>
<p>Age: {this.state.age}</p>
<div/>
);
}
}
TypeScript
In this example, there is a component called “MyComponent” that displays a person’s name and age. This data is stored in the state of the component and used in the render function to display.
SCSS & Fluent UI
SCSS
SCSS stands for Sassy Cascading Style Sheets and is a preprocessor for CSS. It offers additional functionality such as variables, nests, mixins, and functions that are not available by default in CSS. This allows you to work more efficiently and clearly with CSS in your projects.
SCSS is characterized by a .scss file that is present by default when you create a webpart or extension with yeoman generator. You can then use this file by importing it into your component or webpart typescript file.
import styles from './HelloWorld.module.scss';
TypeScript
When you run the command gulp bundle, the scss file is compiled to CSS. The class names in the scss file can then be used in your react component as follows:
.helloWorld {
display: block;
}
SCSS
return (
<section className={styles.helloWorld}>
</section>
);
SCSS
In SCSS, you can use functions to perform calculations and use the outcome in your CSS. This allows you to make your CSS more efficient and flexible.
An example of a function you can use is the lighten() function. This function takes a colour value and a percentage as input and returns a new colour value that is lighter than the original colour.
$primary-color: #0078d4;
.header {
background-color: lighten($primary-color, 20%);
}
SCSS
In this example, we’re using the lighten() function to make the background colour of the header 20% lighter than the original colour we saved in the $primary-colour variable.
In addition, there are many other functions such as darken(), saturate(), desaturate(), rgba(), hsla() etc that you can use in your css.
There are also functions that you can create yourself, such as a function to determine the text color based on the background color:
@function text-color($bg-color) {
@if lightness($bg-color) > 50 {
@return black;
} @else {
@return white;
}
}
.header {
background-color: #0078d4;
color: text-color(#0078d4);
}
SCSS
In this function, we determine whether the background colour is lighter or darker than 50% grey, and return the correct text colour accordingly.
By using functions in your css, you can greatly increase the maintenance and flexibility of your css.
Fluent UI
Fluent UI is a design system from Microsoft that is used in SharePoint, Office, and other Microsoft products. It is based on Microsoft’s Fluent Design System and provides a consistent and modern user interface for web and mobile apps.
Fluent UI offers a range of React components that you can use in your SharePoint Framework (SPFx) projects. These components are designed to provide the modern Microsoft experience, such as the Office applications, for example.
Examples of Fluent UI components you can use in your SPFx projects include:
- CommandBar: A bar at the top of the page where users can perform shortcuts and actions.
- DetailsList: A well-organized list of items that users can sort, filter, and select by.
- Pivot: A navigation element that allows users to easily switch between different screens or items.
An example of how you can use the CommandBar component in an SPFx project:
import { CommandBar } from '@fluentui/react/lib/CommandBar';
export default class MyCommandBar extends React.Component<IHelloWorldProps, {}> {
public render(): React.ReactElement<IHelloWorldProps> {
return (
<CommandBar
items={[
{
key: 'newItem',
name: 'New',
iconProps: {
iconName: 'Add'
},
onClick: () => { console.log('New clicked') },
},
{
key: 'upload',
name: 'Upload',
iconProps: {
iconName: 'Upload'
},
onClick: () => { console.log('Upload clicked') },
},
]}
/>
);
}
}
TypeScript
In this example, we’ll use the CommandBar component and specify the items we want to display, such as “New” and “Upload”. Each item has a key, name, icon, and an onClick function that runs when the user clicks on the item.
Fluent UI uses Office UI Fabric, a collection of CSS styles, icons, and react components. This makes it easy to create a consistent and professional user interface that matches the style of Office applications.
Fluent UI is available through npm and is easy to use in SPFx projects. You can use it in combination with other frameworks such as react, Angular or Vue.js.
Nico De Cleyre 