This article is part of a series that focuses on converting my Windows application to cloud-based web apps and services.
If you have been following this series, you know that I create a popular software product called the eBook Toolkit. This application runs as a Microsoft Office Add-in that creates professional eBooks directly from Microsoft Word. I plan to convert this Windows-only application to a web-based service. One part of this process is to move my app to Microsoft’s new(ish) Web add-in format. My current add-in uses a technology called VSTO (or Visual Studio Office Add-in). Jumping from VSTO to Web add-ins requires a whole new mindset, so I am going to show you the difference between these two very different apps in this article.
Preamble
Before I jump into Office add-ins, I thought it would be worth getting some terminology out of the way.
If you write applications for Microsoft Windows, you have three choices (actually, there are more, but the three I talk about are the most common):
- Windows Forms (Winforms) apps use what I call the old-school user interface that many of today’s Windows-centric apps use. With Winforms, you build a user interface with text boxes, labels, and buttons. You code the application with your favorite programming language, like C# or Visual Basic.
- Windows Presentation Framework (WPF) apps are a modern take on Winforms. WPF uses a modern, more web-like approach to designing apps, where you use a technology Microsoft calls XAML to create your front-end code. A WPF app makes it much easier to separate your code’s business logic from the user interface, bind data to your project, and much more. The whole idea here is to separate your code, so it follows Model-View-ViewModel (MVVM) pattern. I won’t get into the details of MVVM in this article, but suffice it to say, it significantly improves the software developer’s experience in writing modern applications.
- Universal Windows Platform (UWP) is Microsoft’s take on how an app can run on various Windows devices, like a laptop, tablet, phone, Hololens, Xbox, or whatever other devices Microsoft supports. Writing a UWP app is similar in nature to writing a WPF app but with stricter rules on how you layout your application for the user.
You can write a Windows application using your favorite text editor or use the very popular Microsoft Visual Studio. Visual Studio is an IDE (integrated development environment) that ships with features for you to select the type of project you want to create. Once you choose the project type, Visual Studio creates a template and structure for you.
Introducing VSTO (Visual Studio Tools for Office)
Just as you can use Visual Studio to create a Winforms, WPF, or UWP template, you can also select a VSTO add-in. A VSTO add-in is a Windows application that lives inside Microsoft office and has [nearly] all the same power as any Winforms app you can build.
As of this writing, my app is a VSTO application that runs inside Microsoft Word for Windows. As you can see from the following image, I add a special tab with an icon. When the user clicks the eBook Toolkit icon, my custom app runs. As you can see, the app is essentially a wizard-like solution that walks the user through the process of converting their Microsoft Word files to eBook formats.
My app not only interfaces with Microsoft Word, but it also interfaces with Windows itself. For example, when you run my app, I create a folder on your computer and then create your eBook files in that folder. That access to Microsoft Word and the Windows operating system is great because the user can do everything on their computer without ever having to log in to another website to get their eBook files.
Unfortunately, you cannot sell VSTO application on the Microsoft Store. The reason Microsoft limits this is that they want you to create an application that can run on any version of Microsoft Office.
If I want my app to run in Word for Windows, Mac, iOS, Android, etc., then my C# code will not work since it is a Windows-only technology. Apple is not going to let Microsoft run Windows apps on an iOS device, nor will Google with their Android phones.
Enter Office Web add-ins
If you want to create an Office app that runs on any operating system, then you need to create an Office Web add-in.
A Web add-in is significantly different than a VSTO application. If you recall from the earlier Preamble section of this article, I mention Winforms and WPF as being the most popular methods for creating Windows applications. With a Web add-in, you create the user interface using a combination of HTML and JavaScript. If you are not familiar with JavaScript (which I am not), there will be a learning curve. Fortunately, there are lots of great free websites and videos out there to get you started, and Visual Studio has decent code completion.
As you can see in the image below, a Web add-in restricts the app to a window pane on the right side of the host application. In my case, the host application is Microsoft Word, and it starts with a button that allows you to convert the currently open document to an eBook format.
Speaking of converting the file to an eBook, how exactly do I go about doing this? If I do not have access to the underlying file system, then how do I (a) convert the file to eBook format; and (b) save the eBook files for the user to access?
Web services to the rescue
In my particular app, I need to take the structure of a Microsoft Office document and then convert it to various eBook formats. Performing this conversion is not as easy as you might think because eBook files are very different than what Microsoft Word produces. I certainly could write a bunch of JavaScript within my app to perform the conversion, but I doubt putting all that business logic into a web front-end is a very good idea.
As of this writing, I plan to convert the business logic for my app into web services. Those web services will perform various functions in a hosted environment like Microsoft Azure. With my code on Azure, I can write the function in pretty much any language I wish. Since most of my original business logic is in C#, I hope to save some development hours by leaving it in that language and porting it to Azure.
In the old VSTO world, my code would take a user’s input in a Winform and then make a call to a C# class that processes the information. As you can see in the following image, my new code will have to follow a different model. When the user attempts to create the eBook, the JavaScript application will have to call a web service, located somewhere in the cloud. That web service will then inform my app that it is creating the eBook files.
Since my app will not have access to the underlying operating system it is running in, it will have to provide some way for the user to get their eBook files. The app could just store a copy of their eBook up in the cloud as a link on Azure, or it could send the file to the person’s favorite cloud drive. How exactly I deliver those files is still a question for me because I want to give a simple experience for the user, so that will be a topic for another day.
As you may also know, my app is not just going to be a Web add-in, but a full website as well. My VSTO add-in still has a reason for being because it is much more capable of handling advanced tasks that Web add-ins do not yet support, so part of this whole effort is to re-think my business logic and create a standard set of services that any of my apps can use. My move to a Web add-in is just one step in that journey.
If you are thinking about creating a Web add-in, make sure you consider the following:
- How you will host the app.
- If your app needs to access external APIs, do you need to create them? If so, what is the platform, language, and approach you will use to access them? In my case, I believe it will be Azure Functions using Rest and JSON (of course, I am still learning this, so more thoughts to come).
- If your app needs access to the underlying operating system and it just cannot be avoided, then you should consider sticking with a Windows-only solution using VSTO.
- You will have to familiarize yourself with the object model of your particular host application (use Microsoft’s MSDN site for this) and be prepared to write code in HTML and JavaScript.
Photo Credit: atlantis0815 via Pixabay.com.
