Как организовать архитектуру javascript-генератора форм с использованием шаблонизатора и БЭМ методологии?

Question

[badsyntax]

Добрый день!

Суть задачи такова:
Необходимо организовать генератор форм на основе json файла с описанием контролов, вида:

"order": ["input1", "input2", "cb3"],
	"input1": {
		"type": "input",
		"title": "Первый инпут",
		"path": "root.input",
		"visible": true,
		"editable": true
	},
	"input2": {...}

Типы доступных для обработки контролов должны быть легко расширяемы. Данные в контролах должны извлекаться из источника данных (они доступны по строкам-путям в свойстве path, описанном в контролах). Источник данных должен быть вынесен в отдельный модуль и должен предоставлять публичные методы для извлечения из него данных по путям.

Работа с DOM должна происходить посредством библиотеки jQuery или (предпочтительнее) i-bem. Нужно описать контролы и компоненты страницы в идеологии БЭМ.

В качестве синтаксиса шаблонизатора использовать синтаксис mustache.

Использую jquery + mustache. Раздумываю над тем, нужно ли использовать require js для организации mvc структуры приложения.
Подскажите, пожалуйста, каким образом лучше организовать архитектуру приложения с использованием шаблонизатора mustache? (т.к. раньше с ними не сталкивался, только начинаю изучать)
Каким образом можно применить БЭМ-подход, не используя БЭМ стек технологий?

Answer 1

[Алексей Ярошевич]

Один из простых способов:
1. Генерируем из исходного json по каким-то правилам bemjson c описанием структуры формы и блоков с элементами;
2. Используем https://github.com/bem/bem-forms как базу (или пишем аналог) для создания базовой библиотеки с шаблонами и базовыми типами полей и контролов;
3. На уровне проекта расширяем своими контролами (шаблонами, стилями, и т.д.);
4. Собираем чем-то стандартным, типа enb.

MVC для фронтенда не есть удачное решение, это становится очевидно, когда кол-во успешных MVC фреймворков для JS фактически равно нулю. MV* парадигма вполне работает, но без контроллеров.

С шаблонами мусташ ситуация следующая — либо не будет возможно доопределять трансформации, описанные шаблонами: т.е. придется копировать из исходной библиотеки шаблон и изменять его, в итоге проблемы при обновлениях; либо не использовать библиотечный подход для шаблонов вообще. Почему так: потому что mustache интерполируемый и императивный шаблонизатор, его технически нельзя научить доопределению. Если все же нужен именно mustache — достаточно будет написать технологию для enb, в гитхабе точно есть примеры для jade, и, кажется, некоторых других. По сути, пара несложных функций, где пишется: возьми этот файл как шаблон для шаблонизатора такого-то и создай из него функцию для отрисовки данных.

Если думаете про i-bem.js, то jquery у вас так и так будет (потому что i-bem использует jquery), с require.js — возможно, будет проще использовать ymodules: не сильно отличается от require.js, на нем уже основаны bem-core/bem-components и, соотв., bem-forms тоже, и взяв стандартный набор джентельмена от яндекса ничего не надо будет менять с этой точки зрения — все уже настроено.

Применять БЭМ-подход, не используя БЭМ-стек технологий, обычно больно, и так или иначе начинает писать свой БЭМ-стек технологий. Многие это проходили (если не все) и большинство перестали так делать.

А вообще, есть форум, где на такие вопросы отвечают намного быстрее и с примерами ;-)