The first version of Logic Apps Designer was released almost 7 years ago. Over that period, the designer grew with the product, picking up new features that enabled new use cases. A little over a year ago, alongside Logic Apps Standard, we gave the designer its first facelift, which has been generally well received. As we built that facelift on top of the bones of the same designer that’s been around for the past 7 years, we learned that we needed to go farther if we wanted a designer that we could build on for the next 7 years.
The Logic App Standard designer is much easier to use and parse visually use but came with some major performance and usability limitations,
The Core Context
Both current designer and the re-written designer is built using React as a framework. A common problem with React apps, particularly those that were designed early on, is that it can be difficult to control how components are re-rendered. In the current designer, a core context object carries the state of the entire app. With all the changes in the designer over the years, lots of components were added to this context and lots of components subscribed to its changes. This meant that as more pieces have been added, the smallest changes can cause a cascade of re-renders. At a certain point – around 50 actions in a workflow – all this re-rendering causes the UI to start to feel stutter and locks up. Our customers and us don’t find this acceptable, and we wanted the new architecture to handle as many actions as a Logic App runtime can handle.
State Flow
With the re-architecture, we moved the state of the workflow to a redux store. Redux makes it incredibly easy for a component to subscribe just to state changes that it cares about. This helps a lot on re-renders, assuring we won’t have cascading re-renders with simple changes. Although this sounds like an easy task on the surface, because of how ingrained the state system is, it essentially meant rewriting every element of the designer from scratch.
Small Experience Changes
Our primary goal with this was under the hood performance changes. However, we still took these changes to make some small changes to the experience itself. There are two main areas we made changes, the canvas and operation search.
The Canvas
In the designer canvas you will find that moving around your workflow will be much easier. You can pan with your mouse and zoom in/out. You will also have access to a mini map showing exactly where in your workflow you are. This should make it much easier to traverse and develop large workflows.
Search and Browse
For operation search we decided we want to make it easier to understand and find exactly what you’re looking for quickly. We’ve overhauled it completely and made it a more seamless experience. It’s still early with more being planned for it, but here’s a glimpse of it now.
Open Source and Trust
We know that we just released a designer refresh last year, but despite some visual improvement, it wasn’t meeting the performance required to support your work, because of the performance issues we’ve just discussed.
We still have a little way to go before it’s ready for general availability, but we’ve decided that going forward, we will be developing completely in the open. To support this decision, we’ve opened sourced our codebase on GitHub. We hope to be able to speak more openly with you, gathering timely feedback and focusing on the improvements that matter to you. Please help during public preview by raising bugs and questions as you find them; we’ll do our best to be timely on answering and fixing them.
How To Try It
Hopefully you are as excited with this new designer as we are. To give it a try, from October 31st you’ll start to find a button in the designer command bar in a standard Logic App: “Try Preview Designer”. Clicking that button will switch you over to the new designer. Is that simple! From this point, the preview designer will be your default experience.
To switch back you can hit the “Generally Available Designer” command in the same spot. Notice that after each switch, you will need to leave the blade and come back to switch again.
We also want to stress that this is a very early Public Preview. It is ready for evaluation and things should work, but they likely will have bugs, which we’re trying to find and fix before GA. I would not recommend trying to on any production workflows that you need to be rock solid yet. If you have any issues, then please help us by reporting them on our GitHub. In the preview designer command bar, you’ll find a “File a bug” button that will take you right to our issue tracker.
What’s Next
This initial release is opt-in only and only for Standard Logic Apps. We are just getting started though. Over the next few months, we have plans to also integrate into consumption Logic Apps and the Logic Apps Visual Studio Code extension. By the time we’re finished, we will have a cohesive experience across all Logic app SKUs and Visual Studio Code starting with standard and then consumption.
Microsoft
