Modernizing Word Online’s UX platform
Introduction
Early in 2017, our design team proposed a pretty significant visual refresh of Word Online. While many of these changes were quick CSS tweaks to change some colors and padding, there were also some significant visual updates that would require core changes to the code in our UX framework. The most prominent of these visual changes were targeted at the primary commanding surface at the top of Word Online, commonly referred to as the Ribbon.
The goal of this visual update was to allocate more visual real estate to the user’s document by moving from a “Multi Line Ribbon” to a “Single Line Ribbon”. In order to make all these commands fit into a single row, we needed to be able to render some of the less frequently used commands in an “overflow menu”. This is not a behavior that we supported in the Multi Line Ribbon, so we would have to do some work in our UX platform to ensure we could support rendering all our control types in menus.
The Single Line Ribbon was also designed to be more responsive than the Multi Line Ribbon. As the window width decreases, commands will move from the top level into the overflow well.
Time for a rewrite?
The Word Online codebase is over 11 years old. At that time, the JavaScript ecosystem was also not as mature it as it is today, with a growing sentiment that raw JavaScript did not scale to large applications. This led to a rise in the use of Script# (a transpiler from C# to JavaScript) for large web applications within Microsoft. Script# was a vital tool that helped our code base scale to our growing engineering team and played a key role in getting us to the point where we are able to confidently ship new versions of Word Online multiple times per week. Over the past few years TypeScript has emerged as Microsoft’s public facing solution to large scale JavaScript development. This has led to Script# usage declining across the company, as the developer experience offered in TypeScript is far superior to that experienced by Script# developers.
On the Office Online team, we have been trying to write some new features in TypeScript to help improve our engineering velocity. This approach proved to be very successful for isolated features, but it had the tendency of being a very frustrating experience for developers that were working on features that tightly integrated with the large Script# code base. It became clear that we would have to eventually rewrite a core piece of Word Online in TypeScript to reduce the friction for developers trying to write new features in TypeScript.
The proposed updates to the Word Online Ribbon would require extensive refactoring of the UX platform in order to enable the new responsive design, making it an ideal candidate for a rewrite on a more modern tech stack. After some initial prototyping, it became pretty clear that taking the additional time now to rewrite our UX platform would have significant long term improvements to the workflow of our development team. We decided that we would write the Single Line Ribbon from scratch in TypeScript. To make sure we were able to deliver the UX refresh in a timely fashion, we would not rewrite the entire UX platform at this time and instead just focus on rewriting the Ribbon. This meant we would still need to support the Multi Line Ribbon and other UX surfaces from our existing UX platform, such as context menus and task panes, alongside the new UX platform.
Building a new UX platform
Since many teams at Microsoft were already using TypeScript, we saw this as a great opportunity to connect with other web app teams to learn from their experiences. We reached out to our friends on the Outlook Web team, who at the time had just started an effort to move a significant portion of their Script# code base to TypeScript. During these conversations we learned that they, like many other popular web applications, were using React for their user interfaces. Our initial prototype of the Single Line Ribbon was written in React, so we were very eager to use some of the components that they had built for our real implementation. After getting more details on Outlook’s UX platform, we found out Outlook wasn’t the only team at Microsoft using React and that many teams had started building their app using components from a Microsoft owned open source library called Fabric React.
We started to build the new Ribbon on top of Fabric React, enabling us to reduce overall development time by leveraging the components that other teams at Microsoft had already contributed to the project. We even added some new components to the project that are now being used in other products of Microsoft. Overall, we were amazed to see how the open source mindset around Fabric React enabled us to collaborate with product teams at Microsoft that were outside of the Office organization.
The move to TypeScript made it much easier for us to leverage open source software, enabling us to spend more time writing product code and lest time writing code for build tools and general infrastructure. In addition to React, we ended up leveraging popular open source libraries like Redux, Webpack, and Jest to provide a modern development experience to our engineering team.
After a year of hard work, we ended up being very happy with our decision to build up a new UX platform. This new UX platform has enabled to deliver features that leveraged modern browser functionality, such as the use of SVGs to deliver more crisp looking icons on the new UX platform.
The rewrite has already had the anticipated impact on developer efficiency and our ability to write more features in Typescript. We will be leveraging the efficiency of the new platform to respond to user feedback and continue to improve the experience. The move to a more modern platform also had some surprising effects, as we saw it encourage us to work more closely with other web app teams within Microsoft and in the broader open source community.
Try it out today!
The new visuals are enabled by default for Word documents hosted on OneDrive. Please try it out today and let us know your thoughts on the new experience by leaving feedback in the app!
This is just an introduction to the work we’ve done over the past year. We’ll be publishing some more detailed articles on our architecture and some of the work we did to improve the performance of our UX platform. Feel free to reach out on twitter with suggestions on what you’d like to hear more about in future blog posts!
