In the final part of this series I like to take a look on scenarios, how to use Office UI Fabric efficiently. As mentioned in part two using pure Office UI Fabric might can be a bit difficult sometimes.
Especially when you don’t like to copy and paste the code from the snippet gallery all the time. Personally, I think it is a bit difficult even if you are experienced in using frameworks. There are many things that need to be learned in addition. A thing such as Suit CSS naming conventions, correct class names, components, text sizes, class names of colors, complete HTML structures.
Common usage scenario
The most appropriate usage scenario is to integrate Office UI Fabric with add-ins for Office Applications. It is a good thing for every enterprise developer that know where to find corporate information like to make a theme available in Office Applications. It allows any more traditional developer to create nice looking interfaces without a problem.
Simon Jaeger wrote a blog post named “Create your very first good-looking Word add-in”. It is a great article and the title stating the main motivation why to use Office UI Fabric. Focus on the application, focus on the business logic and let Office UI Fabric do the rest.
The new SharePoint UI
While the current version of SharePoint doesn’t know anything about Office UI Fabric. It will become probably a part of the new SharePoint Framework. We already saw some glimpse on the new SharePoint Document library. The user interface uses partially the same class names as Office UI Fabric.
Yet there are still some inconsistencies where the current user interface doesn’t match the patterns in Office UI Fabric. In addition, many patterns of the new SharePoint haven’t been implemented yet. Naturally, because for now it just focuses on Office applications.
Better ways to use Office UI Fabric
If you like to create add-ins and don’t care that much how Office UI Fabric works I would recommend to take a look into ngOfficeUI fabric. It is a real mature implementation in Angular based on Office UI Fabric.
This project was actually started by Andrew Connell, right after the launch of Office UI Fabric. The current implementation use Angular 1.4 and TypeScript. It is a great community driven project and many great people joined to build directives for Angular Applications. How does it work?
Instead of writing the following code to create just a simple button.
You need to initiate your angular application and defined the buttons just like this.
This makes it really easy to get the Office UI Fabric components right and you don’t need to worry about style sheet classes and naming conventions. ngOfficeUIFabric acts like an abstraction layer of Office UI Fabric and this makes it easy to use. It allows to focus on content and the application.
Currently this project doesn’t have full coverage of Office UI Fabric components, but they work hard to get to that point.
They are always searching for a talented developer that can add more pattern and components to the existing ones.
The other option is an implementation of Office UI Fabric in a framework called “Aurielle”.
You can take a look at those projects, but I think ngOfficeUIFabric is by far the best option.
So why not using Office UI Fabric?
I hope this small series of post gave a more in-depth introduction to Office UI Fabric and the ideas around it. It is really great to have these components and styling available.
With the announcement of the new SharePoint Framework, we will see how Office UI Fabric evolves or what the SharePoint Framework has to offer. Really curious if the pattern will be release of SharePoint excluded or if they integrate into Office UI Fabric.
I think you can currently use it, but be aware that things might change in future. A fact that happens to every framework. Again the abstraction layer provided by ngOfficeUIFabric solves this issue.
I encourage you to use it, test it, provide feedback and make yourself an opinion. The Office UI Fabric team is really interested to get your feedback.
Well, I am too. Would be great if you can provide your feedback in the comments below and what you think of Office UI Fabric.
In case you missed the other posts in this series:
- Why not use Office UI Fabric?! – Part 1
- An architectural view on Office UI Fabric – Part 2
- Scenarios and solutions to use Office UI Fabric – Part 3 (this post)