Diagram (preview) is a new native Blazor component library in our Essential Studio 2021 Volume 2 release. It allows users to create diagrams such as flowcharts, organizational charts, and BPMN diagrams using a code-behind or visual interface. It has better performance than the previous Diagram component in the Blazor WebAssembly applications.
In this blog, we are going to discuss how the new native Blazor Diagram component differs from the previous Diagram component.
The big differences
Rendering
Our previous Blazor Diagram component handles all the logical calculations and rendering on the client-side through JavaScript (JS), based on the control definition in the Razor pages. On the other hand, the new native Blazor Diagram component handles all the calculation and rendering logic in the native Razor rendering approach.
Interaction
The Blazor WebAssembly Diagram component handles all interactions like dragging, resizing, zooming, etc. on the client-side through JavaScript. It updates the diagram object value after each interaction from the JavaScript to native objects. In the new native Blazor Diagram component, we have eliminated the objects preserved on the client-side (JavaScript), so all interactions will be handled natively.
Performance
As mentioned before, the previous Diagram component uses JavaScript code to render and interact with objects. Even though the UI gets updated immediately, it performs more JS Interop calls to communicate and sync the native and JavaScript objects with the changes. As the number of JS interop calls is high in this architecture, its performance is not at its best in Blazor WebAssembly apps. The new native Blazor Diagram component handles almost 95% of the rendering and interaction logic in the native approach. Thus, helping us eliminate the JS Interop calls to update changes between the client-side (JS logic) and the native object and vice versa to a great extent. This results in better performance.
Still, some logic that is not available in the Blazor framework is handled with the help of JavaScript code in the new native Diagram component. Because the JavaScript-level objects and logic are eliminated in the new Diagram component, the app payload or resource size is reduced, resulting in twice as fast initial loading times.
However, in the Blazor server apps, you might experience a slight delay due to network latency.
Building a diagram component for the Blazor platform is challenging, and only a few plugins are available on the market. We are one of them, and we assure you that our performance is comparatively the best in the market. Also, we are continuously working to improve the performance in the future.
Native template node
You can host a native Blazor control as a node in the new Blazor Diagram component. The previous Diagram component doesn’t support this feature.
Cancellable events
In the new Diagram component, you can cancel the events such as dragging, rotation, resizing, and more. You guessed it- this is not possible in the older Diagram.
Reference
Refer to our getting started with the new Blazor native Diagram component documentation and demos.
Conclusion
Thanks for reading! In this blog, we have seen how the new native Blazor Diagram component differs from our previous Blazor WebAssembly Diagram component. This new component is available in our Essential Studio 2021 Volume 2 release. You can also learn more about it in our release notes and What’s New pages.
Syncfusion provides more than 65 high-performance, lightweight, modular, and responsive Blazor UI controls such as DataGrid, Charts, and Scheduler to ease the work of developers.
If you have any questions, please let us know in the comments section below. You can also contact us through our support forum, Direct-Trac, or feedback portal. We are always happy to assist you!
Top comments (0)