Navigating the intersection of Typescript, React and Office Fabric to make powerful and profession websites

Typescript, React.js and Office Fabric

Typescript

Typescript is a superset of Javascript that brings strong typing to JS and allows for much better intellisense and refactoring. Typescript works great with React and VS Code.

React.js

Create simple, powerful User Interfaces with easy to reuse components and clean encapsulation. Use jsx to bring your markup code directly in to your components and make conditional rendering of code easy and clean.

Office Fabric

office-ui-fabric-react is a package of react UI components designed for extensibility and a clean professional feel. Although they are designed for Office, they can be used anywhere and are great accessible components.

My journey

I have been a web developer at Microsoft since 2015 and in 2018 we decided to make the move to React, Typescript and Office Fabric. The only good resource out there that I know of for this stack is the Office Fabric website itself, and even that isn’t the easiest to find. Even React+Typescript, although fairly common, doesn’t have as many resources out there, since many examples and blogs are about one or the other. We have learned a lot on our team and still have a lot more to learn and would love to share our learnings with others, in hope that it can accelerate your development and you can give us feedback when you learn about how to do something better or different than we have.

I am also a big proponent of create reusable packages, which I have done for this stack and am the process of getting those ready to release to Open Source on GitHub and as npm packages. The components include the Advanced Data Table which has the capability to display a set of data in a table, export the data to csv or xlsx, change what columns are visible and in what order, have filtering and searching for the table and easily inject other buttons into its toolbar. The Filter Bar mentioned also will likely become its own package with configurable dropdown filters and searching. Another package will be an Advanced Dropdown which have do many things, like search through the values, have pagination and have submenus. I will be writing more about these as the process moves forwards towards releasing them.