Zywave, Inc.Zywave, Inc.Zywave, Inc.Zywave, Inc.
Add To Action ItemsA clipboard with a plus in the corner to indicate adding to action itemsAddAn addition symbolBuildingAn illustrative icon of a buildingCalendarA gridded day calendarCaret DownTriangle pointing downwardCaret LeftTriangle pointing leftCaret RightTriangle pointing rightCaret UpTriangle pointing upCheckCheckmark iconChevron DownA chevron pointing downChevron LeftA chevron pointing leftChevron RightA chevron pointing rightChevron UpA chevron pointing upCopyTwo overlapping rectangles to indicate a copyDeleteTrashcan iconDetailsA circle with a lowercase "I" in the middle to indicate infoDocDocument icon with lines on itDouble Chevron LeftTwo chevron arrows pointing leftDouble Chevron RightTwo chevron arrows pointing rightDownChevron arrow pointing downDownloadAn arrow pointing downEditA pencil illustrationErrorAn octagon with an ! within it to indicate a errorExcelA document shaped paper with an X on it to indiciate it's an Microsoft Excel fileExternalTwo squares, one overlapping the bottom one. Top square has an arrow pointing away, as if leading you awayFile DropA folded page with a line through it inside of a folder to indicate a file being dragged and dropped to a destinationFilterA funnel style filterFolderA folder iconGridFour squares with space between them to indicate a gridGripA grid of six squares to illustrate something that has texture or grippableAdd to GroupA stack of pages with the corner folded and a plus sign in the corner to indicate adding to a groupHelpA question mark within a speech bubbleImpersonationA figure wearing a mask to disguise their faceAdd IndicatorA circle with a plus in the middle, to symbolize an additive action.Backslash IndicatorA circle with a slash in the middle, to symbolize something isn't allowed.Failure IndicatorA circle with the letter X in the middle, to symbolize failure.Remove IndicatorA circle with a minus in the middle, to symbolize removal.Success IndicatorA circle with a checkmark in the middle, to symbolize success.Warning IndicatorA triangle with an ! within it to indicate a warningInfoA filled circle with the letter I cut out from the center, to symbolize informationLeftAn arrow pointing leftLinkA chain linkListA list of itemsLockA paddle lockMailA mailing envelopeMoreThree dots, like an ellipsisMove ToAn envelope with an arrow pointing to the rightMP3A document shaped paper with MP3 on it to indicate the file is a .MP3MP4A document shaped paper with MP4 on it to indicate the file is a .MP4Multiple FilesA document icon with lines and another document behind it to signify multiple documentsNew FileA folded page with a plus in the corner to indicate a new fileNew FolderAn envelope with a plus sign in the corner to indicate a new folderPDFA document shaped paper with the letters PDF on it to indicate the file is a .PDFPhoneA telephone handset that is ringingPowerpointA document shaped paper with the letter P on it to indicate the file is Microsoft PowerpointPrintOffice printerRefreshAn arrow in the shape of a circle to indicate refresh or reloadRemoveAn X iconRenameA rectangle with a capitalized "I" through it to indicate renamingReportingAn outline of a graph with barsRightAn arrow pointing rightRocketA cartoon rocket shipSearchA mangifying glass icon, to indicate searching for somethingShareA document with an arrow emerging from the content on the page. Indicates sharing contentsShared With YouA circle above a curved line, like a person holding something. Above the line is a curved arrow pointing to the right.SortUp and down arrows pointing away from one another to indicate sorting or re-sortingSuccessA circle with a checkmark within to indicate a successSwitch profileArrows pointing different directions, indicative of switchingTableFour horizontal lines with space between them to indicate a tableUnlockAn unlocked paddle lockUpAn arrow pointing upUploadAn arrow facing upUserAn outlined silhouette of a personVideoA document shaped icon with a triangle on it, indicating a video fileWarningA triangle with an ! within it to indicate a warningWordA document shaped paper with the letter W on it to indicate the file is a Microsoft Word docWrenchA toolbox wrench
Blog

Introducing Booster Development Network

A new site to enable engineers to build consistent, quality applications aligned with the Zywave brand.

Meta

A few months ago, we gave a preview of the successor to the ZUI (Zywave User Interface) and ZAPI (Zywave API) docs: Booster Development Network. Today, we're happy to announce that it has finally been released!

How it started

During Q3 2020, we sent out a survey asking about how using the ZUI Toolkit and documentation site has affected you and your teams. We were happy to learn that ZUI has made a positive impact from the survey results! Despite the positive feedback, there was still room for improvement; such as addressing the lack of demos and how difficult it was to find specific information. With this feedback, we held several round table discussions during Q4 2020 to gather more feedback regarding these pain points.

Thanks to your participation and feedback, we spent a good chunk of 2021 re-imagining how we can make documentation more accessible to you.

One documentation site to rule them all

After the inception of ZAPI a couple years ago, it was still relatively unknown compared to ZUI, which has been around for almost a decade. Most did not know ZAPI documentation existed, which was a problem since a lot of our applications have now adopted components such as Zywave Shell. It only made sense to combine both documentation sites into one with how intertwined they are. Using eleventy, a lightweight and framework-less static site generator, we were able to quickly get the Booster Development Network site up.

Initially, we tried to merge both ZUI and ZAPI components into one category, but that did not make any sense and just created more confusion. It made more sense to house them both under the same roof, but in different rooms. ZUI will now be referred to as "design system" and ZAPI as "application framework" to reflect their purposes.

The convenience of having one documentation site is so that we can invest more time into the experience, such as providing better API docs, demos, and a robust search. The Product Design Team has also taken this time to polish our design guidelines using the new content management system we implemented.

Beautifully formatted API docs

Previously, we were using a third-party tool to display our API docs, but the user experience was confusing. This made it difficult to surface the valuable information that engineers need. We decided to build our own API formatting tool using custom-elements-manifest so we can control the format to make it easier for engineers to find the data required to interact with our components.

Demos and code snippets

One major request we received from the survey and round table discussions last year is examples with code snippets on the documentation site would greatly improve the development experience. ZUI and ZAPI authors are often asked for examples and engineers have resorted to referencing the source code, which is not ideal. We want our documentation site to be helpful! Now all of our components have fleshed out demos for almost every scenario you can use them in and code snippets you can copy to your clipboard! (A few components, such as, only have code examples because there's nothing to see or interact with.)

In our effort to keep these up to date as our components evolve, we've added these demos to our component packages so the documentation site gets instant updates. (We're actually dynamically pulling demos and API docs directly from our CDN, which is really cool.)

Adding a robust search is one of our top favorite improvements to the documentation site. We're using Algolia + Netlify, which is a flexible and powerful search plugin for Netlify apps, to instantly deliver search results. It's actually impressive how the search can distinguish results between tabs within pages. We encourage you to give it a shot!

Content management system

A big pain point that we did not highlight previously is how difficult it was for the Product Design Team to contribute documentation. Previously, they had to learn Markdown, Git and the peer review process in GitLab to name a few. It was quite the learning curve! They won't have to write Git commands ever again thanks to Netlify CMS, a content management system for static site generators. Netlify CMS builds a user-friendly UI on top of the Git workflow. One of the best things about it is the preview pane. You get a real time preview of your content while you're typing in the rich text editor before it is published to the documentation site! And if you'd rather just write that markdown, you can still do that, too.

What about zui.zywave.com?

We are deprecating https://zui.zywave.com. In October, it will redirect to https://booster.zywave.dev.

What's next?

This is just the MVP release. There are a few loose ends we are tying up, such as:

  • Fixing some broken styles and demos.
  • Adding custom web components to the CMS to make formatting our documentation easier.
  • Improving design guidelines, design specs, and imagery.

The Product Design Team is also finalizing a new look for the site!

Feedback