Примерная структура папок

Все вещи относящиеся к фронту находится в папке application/static, так что, дальше я буду писать по отношению к этой папке. Сторонние библиотеки мы все подтягиваем с публичных cdn, довольно много разного. Построено приблизительно схоже с vue, react, angular роутерами, за тем исключением, что темплэйты просто лежатьт в основном index.html и находятся по id и управляются отдельными контроллерами.

index.html Базовая html разметка интерфейса, много всего завязано на индивидуальные id

client/index.js корневой файл инициализирующий всю систему

client/index.css все стили

console.js Более-менее стандартный модуль metacom, при подключении по сокету и авторизации на бэкэнде - инициализирует транспортную систему

client/controllers Содержит контроллеры экранов и не вынесенных в элементы кусков интерфейса

client/editors Всё более-менее относящееся к редакторам соурс кода, диаграмм и т.п.

client/elements использумые в нескольких местах элементы

client/experiments независимые от остальной системы файлы, если надо что-то погонять, до того, как интегрировать

client/utilities утилиты они и есть утилиты

client/vendors здесь сторонние библиотеки, которые с cdn не подтягиваются

client/system Содержит повсеместно используемые модули, инжектируемые в контроллеры

Отдельные файлы ответственные за специфическую функциональность

Диаграммы

• \application\static\client\controllers\controller_diagram.js
• \application\static\client\editors\flowDiagram.js
• \application\static\client\editors\baseDiagram.js

Деревья

• \application\static\client\elements\treesManager.js
• \application\static\client\elements\Tree.js

Редакторы соурс кода

• \application\static\client\editors\baseCodeEditor.js