Обзор JS-фреймворков. Путешествие через джунгли JavaScript MVC. Ч. 1

Скорей всего имеется ввиду организация кода — все на своем месте, оптимизировано обращение к селекторам и т.д.

сложного ничего, но сама структурированность и построение кода… Если вы так пишите — очень вам завидую :)

Я могу понять нагромождение классов и прочие особенности сложных приложений, но всё-таки простые вещи в сложных фреймворках должны делаться просто, безо всяких переподвыподвертов, хаков и кучи инфраструктурного кода. Например, вот код из Dojo:

define(["dojo/_base/declare", "dojox/mvc/StatefulModel", "todo/store/LocalStorage", "dojox/mvc", "dojo/_base/lang", "dojo/_base/array"],
    function(declare, StatefulModel, LocalStorage, mvc, lang, array) {
    return declare([StatefulModel], {
        data: {
            id: "todos-dojo",
            todos : [],
            incomplete: 0,
            complete: 0
        },
        store: new LocalStorage(),
        constructor: function () {
            var data = this.store.get(this.data.id) || this.data;
            this._createModel(data);
            this.setUpModelBinding();
            this.updateTotalItemsLeft();
        },
        setUpModelBinding: function () {
            mvc.bind(this.incomplete, "value", this.complete, "value", lang.hitch(this, function (value) {
                return this.todos.get("length") - value;
            }));
            array.forEach(this.todos, lang.hitch(this, "bindItemProps"));
            this.todos.watch(lang.hitch(this, "onTodosModelChange"));
        },
        bindItemProps: function (item) {
            mvc.bindInputs([item.completed], lang.hitch(this, "updateTotalItemsLeft"));
            mvc.bindInputs([item.title], lang.hitch(window, setTimeout, lang.hitch(this, "deleteEmptyTasks")));
        },
        deleteEmptyTasks: function () {
            var len = this.todos.length, idx = 0;
             while (idx < len) {
                 if (!this.todos[idx].title.value.length) {
                     this.todos.remove(idx);
                     len--;
                     continue;
                 }
                 idx++;
             }
        },
        onTodosModelChange: function (prop, oldValue, newValue) {
            this.updateTotalItemsLeft();
            if (typeof prop === "number" && !oldValue && newValue) {
                this.bindItemProps(newValue);
            }
        },
        updateTotalItemsLeft: function () {
            this.incomplete.set("value", array.filter(this.todos, function (item) {
                return item && !item.completed.value;
            }).length);
        }
    });
});

Это — код модели. В «голом» jQuery мы не даём ввести пустой элемент (if (!$.trim($input.val())) return), здесь пишем вручную какой-то маловменяемый процедурный (ни разу не декларативный!) фильтр и прикручиваем его какой-то трёхуровневой конструкцией с байндингами. В «голом» jQuery мы проходимся по коллекции и считаем количество, здесь делаем то же самое, но с байндингами, хитрым чтением свойств и проверками, что элемент — это элемент (return item && !item.completed.value).

Как, ну как такая библиотека может упростить жизнь? Если для такого простого примера приходится городить всю эту хрень, то что будет со сложными объектами? И всё это ещё чёрта с два отладишь нормально. И про автодополнение кода из-за всех этих строчек можно забыть.

Я ещё молчу про фреймворки, где под каждый элемент управления (кнопка, строчка таблицы и т.п.) пишется отдельный класс.

Благодарю :)