Zoom Apps best practices
One of the best facets of Zoom App development is that you can easily port your existing application to work directly within the Zoom Client. What may not be clear is how Zoom Apps development can differ from typical web app development.
On top of that, because we're writing an app that runs in the Zoom desktop client, it can be easy to forget some of our tried and true web development strategies.
This post aims to organize these details and explain how to do things the "Zoom way" as well as the proper tools and techniques that can be used to set ourselves up for success.
Design with guidelines in mind
As with most tools, the best place to familiarize yourself with Zoom Apps is through our documentation. However, when it comes to best practices during the design phase, a critical place to check is our Design Principles and Guidelines page as well as our Security Guidelines page.
From our documentation, another key resource for designing your application are our Figma utilities. First, checkout our Zoom Community on Figma. For examples demonstrating the Zoom Apps lifecycle, you can find UX mockups here.
Another must when designing your app is to ensure that you are preparing for the wide variety of devices that a Zoom App can be used on. This means that you are:
- Writing responsive UI that works across all screen sizes and densities
- Providing a UX that works well across touch and HID based devices
- Handling use cases inside and outside of meetings
Cover your assets
A huge consideration for any web application is how you deliver your resources and assets to the client and creating a Zoom App is no different. For context, each Zoom Client that you are writing your application for relies on libraries and embedded browser versions that are dynamically linked from the OS that the client is running on. What does this mean? Well, similar to any other web app that we might create we don't know what version of JavaScript or browser APIs are available to our client. In other words, we can't use the latest APIs on one system and assume that it will work for everyone.
What's the solution? Bundle your assets! Using a bundler such as Webpack or Rollup with transpilation will ensure that you're delivering your assets in an optimized format that is able to run on every system.
If we want to use the new, shiny and faster APIs on devices that are new enough then we just need to build two separate bundles and conditionally load them on the page. An example of this is creating a bundle that uses modules for newer systems and a bundle that uses legacy IIFE APIs for out of date systems. What does this look like in practice? Take a look at our Basic Sample Zoom App for an example of how you can accomplish this with the Rollup bundler.
Communicate with your backend
A Zoom App, similar to a Zoom Meeting, is a collaborative and dynamic environment that isn't always compatible with the stateless nature of HTTPS. In fact, there are many cases where we need to communicate between users of our app in the meeting in a near realtime manner. How can we approach this problem? Websockets!
Utilizing websocket tools like socket.io will allow you to create groups of users that are able to communicate with each other in near real time to provide an engaging and collaborative app experience.
You can find an example of how you can use Websockets along with Immersive Mode in our Custom Layout Zoom App Sample.
Use our CDN for the Zoom Apps JS SDK
A great reason to develop a Zoom App over a typical web app is because you get first class integration with the Zoom Client by using the Javascript SDK. As a web developer, if you're using a Node.js then it may be tempting to make use of our NPM package for the Zoom Apps JS SDK.
While our NPM package is provided for convenience it might not be the best method. Instead, using the CDN method to load the SDK on the page is the recommended method.
Why is this? Well, to start with the most obvious reason, the CDN method will work regardless of how you are serving your application. Regardless of if you are using Node.JS or Java or Go then you can rely on the CDN method.
More importantly, the CDN is actively managed and patched by our team so that it has the most up-to-date code that is available. When using NPM the major version will be up-to-date, but it may not have the same hotfixes and patches as the NPM package. If you're running into issues using the NPM package you may want to look into using the CDN method to load the Javascript SDK.
Engage with our community
Do you have questions specific to your use case? Maybe you have your own best practices you would like to share! If so, head on over to our Developer Forum to engage with the other members of our Zoom Developer Community.