Search code examples
javascriptajaxhtmlhtml5-canvaslucidchart

What do I need to learn to build interfaces similar to LucidChart


Here's a link to their demo. Basically, it's an online tool that implements a lot of the visio functionality.

I'm building an app that would require similar type of user interaction, dropping, moving, editing, resizing objects, interacting with grids and guides, etc.

Since the project is for my own learning purposes, I was wondering what are some of the things I should focus on or learn to be able to develop such high quality interfaces

Cheers


Solution

  • To build such a rich user interface is a big task. Which is why there are lots of frameworks and libraries which have already developed rich user interface stuff such as:

    • Sproutcore
    • Cappuccino
    • ExtJS
    • Dojo
    • jQuery UI

    Sproutcore and Cappuccino are for developing desktop style applications for the web and include very good user interface components. As well as maintaing application states and data models. ExtJS has a lot of these features and a very nice UI toolkit, as does Dojo.

    Lucidchart I notice uses the Canvas drawing API as well so thats something you would need to look into for shape manipulation and creating flexible connections. Mozilla Developer Center has some good stuff on the canvas API.