What I need to learn how to create interfaces similar to LucidChart

Question

Here is a link to their demo . Basically, it is an online tool that implements many visio features.

I am creating an application that will require this type of user interaction, discarding, moving, editing, resizing objects, interacting with grids and guides, etc.

Since the project is intended for my own learning goals, I was wondering what things I should focus on or learn to create such high-quality interfaces.

Greetings

Answer 1

To create such a rich user interface is a big task. This is why there are many frameworks and libraries that have already created a rich user interface, for example:

• Spoutcore
• Cappuccino
• Extjs
• Dojo
• JQuery user interface

Sproutcore and Cappuccino are designed to develop desktop applications for the Internet and include very good user interface components. As well as the state of applications and data models. ExtJS has many of these features and a very good set of user interface tools, like Dojo.

Lucidchart I notice that it uses the Canvas drawing API, so you will need to learn about manipulating forms and creating flexible joins. The Mozilla Developer Center has several useful properties in the canvas API.

Answer 2

There draw.io , a very similar tool, but with a source on github .

Answer 3

I would start by looking at the Raphael library .

This allows you to write fairly simple Javascript code to draw graphic elements in the browser, including fairly simple animations and drag / drop interfaces.

Honestly, it’s not easy and simple to write something complicated, like the site you linked to, but Raphael is the fastest way to get started with the basics.

And best of all, Raphael is even compatible with older versions of IE, so you don’t only have to worry about supporting the latest browsers (although, of course, you may want to do other things that need other new features).

Hope this helps.