Как написать среду разработки в браузере?
 

Всем привет!

Надо мне сделать сайт конструктор для страниц, типа упрощенный вариант среды разработки Делфі если кто видел. Смотрите вложение.
Слева открыт проект со списком страниц. Можна добавить новую. Справа библиотека разных кнопок, менюшок, слайдеров, которые можна перетаскивать на страницу. и т.д.

Вопрос:
подскажите общий подход к созданию такого сайта. Ссылочку может быть какуюто....

Если я нарежу html/css и начну пихать функции джаваскрипт в отдельные файлы, будет бардак. Какуюто бы архитектурку.

Буду очень благодарна за совети и ответы.

Э как вы загнули. Простите, но если у вас появляются подобные вопросы, может вам рановато заниматься подобного рода заданиями? Ну если у вас есть много времени, сил, энергии, оптимизма и желания это сделать, то, для начала, посмотрите на исходные коды уже готовых решений -
https://ru.wikipedia.org/wiki/Ace_(%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%BE%D0%B2%D1 %8B%D0%B9_%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0% BE%D1%80)
http://brackets.io/

Все же онлайн ide - очень серьёзная вещь, сделайте для начала просто редактор с подсветкой синтаксиса.

Оно ?

Насколько я понял, всё же требуется не IDE, а "визуальный редактор форм" (как в Delphi)

Да. Не IDE, а визуальний редактор html страницы из готовых частей. На выходе будет XML, в котором будет сохранятся layout страницы.

Может вопрос заключается даже не в том, как это сделать. Я думаю, нарисовать и наверстать такой графический реадактор не трудно. Какието данные (напр., компоненты: кнопки, менюшки) можно сохранять в базе данных, как обьекты с нтмл/css=внешним видом и параметрамы и т.д.

Мне интересно знать, как разработчики систематизируют джаваскрипт код, если его очень много? Есть ли какое-то core, файл init, который все запускает или какая-то структура кода по папках, чтобы порядок был?
Джаваскрипт тоже обьектный, значит, можно эти компоненты (кнопка1, меню2) закодить как обьекты и засунуть в них их поведение. Но как все это организовать, есть ли общий подход/pattern? (как mvc в php или как реализируют ооп в C# или кодато в Делфи)

вот чтото вроде этого http://jsmaker.com/jsmaker/
буду копать сейчас
еще пример, ну ж слишком сложный http://plugnedit.com/wordpress.cfm?j...ktowordpress=1

эх... Да, вот вроде то javascript design pattern ....
+ Список из 39 книг внизу вот этой одной http://addyosmani.com/resources/esse...patterns/book/

есть, mvc =)