I wanted to take a moment to pull back the curtain a little bit and share some of what goes on behind the scenes during MuseThemes widget development. MuseThemes widgets encompass a very broad range of features and functionality and some are so powerful that they are full fledged applications in their own right.

In this post, I wanted to to briefly explain some of the tools and workflow that we use in our product development to bring advanced features into Muse while also keeping development times shorter and the bugs at bay.

The Technology

Adobe Muse widgets are primarily a front end web product, so these widgets make use of the typical HTML, CSS, and Javascript assets. Most features that are added to Muse via a widget must be done with Javascript, as this is what allows us to control the elements on the page after Muse has rendered them. This makes Javascript the most important piece of the puzzle.

We have chosen to take advantage of modern frameworks, as well as the latest techniques in the Javascript world to bring the best features we possibly can to our widgets. These techniques also allow us to build our widgets more efficiently and with more stability.

Our latest development projects have made use of the VueJS framework, a powerful but lightweight framework that helps us manage states, build reactive components, and develop with more consistency. VueJS focuses primarily on the front end view layer, making it a great choice for Adobe Muse widgets.

The Tooling

An Adobe Muse widget ends up as a single file, but in reality each widget project actually consists of hundreds of files. We make use of modern tools in our development environment to handle bundling, linking, and error checking of all the pieces of the project during development and final release.

As we are writing code and working on a project, automated tasks for error checking and tests are constantly running to inform us of any problems with the code so that typos and bugs can’t easily slip by us into the final product.

Throughout the development process we also make use of version control to track all of our changes, as well as collaborate on projects together. Our code is checked into a repository and any changes our developers make are synced up across everyone’s local copy, which makes working together a breeze. Version control also allows us to go back in time and see what changes were made and when, which can be very helpful when tracking down a problem.

The Workflow

The life of a widget begins as a customer request, concept, or idea that we feel will help our customers create more powerful Muse sites. Once the concept is specced out, and we have decided on all the features and capabilities we feel it needs, development begins.

A project scaffold is created with all the necessary core code and files that will be needed to make the widget a reality. Next, we build out each of the components that will make up the primary features of the widget. In the case of large widgets, such as Media Gallery Pro 2, multiple developers will collaborate on the dozens of components being built.

After primary development is completed, we do a code review of the widget to ensure that nothing was missed and that we have optimized it for the best possible performance and compatibility with other widgets.

The widget then goes into quality assurance testing, where it is put through the paces to ensure that it performs the way it should. This is also where we try to catch any bugs or compatibility problems that may exist when it is used with other widgets or in large complex Muse sites.

Several rounds of testing are followed by development updates to fix any issues that were discovered, and we also continue to refine the widget so that it is easy for customers to set up and use. Once everyone is confident that the widget is ready for prime time, it is scheduled for release.

As developers, we take pride and ownership in the products we build and we are always looking for ways to improve the widgets, as well as fine tune our process. From the simplest of widgets, to our fully featured suites, we are always working hard to bring the best possible products to life.