How To Dev

Introduction In the previous article, I introduced how to use D3 to visualize data as charts. For most chart visualization needs, using D3 to create individual HTML DOM elements is sufficient. However, if you need to build a web application with superior performance to handle complex cases with relatively large datasets, then applying Canvas is a good solution for you Canvas is an HTML5 element that allows for extremely high-performance 2D graphic drawing via JavaScript. Unlike SVG, which creates separate DOM elements for each object, Canvas operates as a "blank canvas" where pixels are drawn directly onto a single surface. For instance, in real-world products like Figma, Canva, and TradingView, they all utilize Canvas to handle complex graphical operations. Outstanding advantages of Canvas include: superior render speed when processing thousands of objects simultaneously, memory resource savings as it does not increase the size of the DOM tree, and flexible customization for...

Introduction In this article, I will guide you through using Konva to export content you've created. Exporting can be done on either the frontend or backend, each with its own pros and cons: Frontend: Pushing processing to the frontend means the backend doesn't consume extra resources for this task. However, when exporting a template with too many elements, a user's machine with a weak configuration might not handle it, causing the app to crash. Backend: If the backend handles exporting, it will incur extra server costs. But in return, we can configure system scaling to support exporting large, complex templates. This simplifies backend processing and ensures the user interface always runs smoothly on the frontend. In short, if this export function isn't a highly critical part of your system that needs prioritization, you can let the frontend handle it. If you are deploying a commercial product, you should handle this on the backend to provide a smooth experience for th...