
Since the app is essentially only one component that was to be placed in yet another application, we opted for Storybook. We’ve used events for communication for ease of use and because this is a well-known and battle-tested pattern.

The event is then picked up by all the other services that subscribe to the source service. With this architectural design pattern, a service publishes an event when something of importance happens. We’ve used event-based communication to solve that problem. These two pieces needed to communicate with each other, somehow. TypeScript is also yet another of our key technologies.Īs I mentioned before, the vector editor was to be placed in an existing application.


It’s considered a community standard for building commercial projects. We used TypeScript to ensure end-to-end type safety. Be sure to check out the PaperJS website, especially the showcase featuring some very cool examples of apps with vector illustration capabilities. Thanks to that, we did not have to create basic functionalities from scratch. It provides ready-made solutions for blend modes, vector mathematics, or drawing commands. This scripting framework offers a lot of features for handling vector designs and vector shapes.
OPEN SOURCE RASTER GRAPHICS EDITOR FREE
To make scalable vector graphics, we used the powerful free vector graphics program PaperJS.
OPEN SOURCE RASTER GRAPHICS EDITOR SOFTWARE
What’s more, React is one of The Software House’s key technologies. We chose React because it’s very lightweight and its encapsulated components are perfect for creating user interfaces. We decided to use the React framework for the UI layer of the app. After all, it was supposed to be embeddable and seemingly independent from it. The main Tynker app itself used Angular, but it didn’t determine the framework choice for the editor. But it’s worth it to explain why exactly they were the best choice for this project. In the end, most of them turned out quite simple. We had quite a few decisions to make before we could get to coding. Solution – what tools and strategies do we need? However, both types of computer graphics have their limitations – raster graphics don’t scale that well, while vector graphics tend to be rather simplistic. Let’s now go over what kind of tools for the job we decided to equip ourselves with.ĭid you know that raster graphics are composed of pixels and vector-based graphics use paths instead? A raster graphic such as a gif or jpeg is an array of colorful pixels that together form an image, while vector images are made of geometric shapes that scale infinitely without the loss of resolution.

And while our team had plenty of skilled and experienced developers on board, they never developed a vector graphics editor before so they had to start by researching their options.
