Как мы создавали свой Framework и почему?

Пролог.

1. Страницы на aspx c вкраплением ExtJs 3.x компонентов;
2. Сложность покрытия клиентской части unit тестами;
3. Неудобство кастомизации и создания собственных компонентов;
4. Тяжелый DOM. На большом количестве данных - проблемы с производительностью.

Поиск альтернатив в начале 2011 года.

1. ExtJs 3.x. Недостатки описаны выше;
2. Angular.js и ember.js. Только начинают развиваться, нет даже первых стабильных версий;
3. Backbone.js. Тоже только начало. Довольно строгая модель данных, не очень подходит к нашей доменной области;
4. В общем, тяжелый 2011 год.

Вывод

Что же нужно для счастья от современного framework-а.

1. Слабосвязанная архитектура -> Масштабируемость;
2. Легкий и удобный способ покрытия тестами;
3. Низкий порог вхождения.

Архитектура framework

1. Событийно-ориентированная модель;
2. Dependency injection;
3. Traits.

Преимущества событийно-ориентированной модели.

1. Слабая связанность компонентов и его частей. Любая функциональность может быть использована неоднократно, легко отключена или подключена;
2. Хорошо тестируемый код. Могут быть протестированы как отдельные части системы, так и поведение в контексте;
3. Проверенный временем подход.

Схема связей компонентов

Чуть-чуть про реализацию

1. AMD - require;
2. Шаблонизатор - jQote2;
3. Тестирование - собственное решение на базе NodeUnit;
4. Работа с DOM - jQuery;
5. Работа с коллекциями - underscore.

            bus.on('afterRender',function(event,$element){
             bus.on('settingsChanged',function(event,settings){
             /**Какой-то код**/
             })
            })
        

Возможности языка

                    "bus afterRender":function(evt,data) {
                     /**реагируем на события после рендера шаблона**/
                    }
                

Возможности языка

                    "bus afterRender + settingsChanged":function(evt,
                            $element,    settings) {
                        /**реагируем на события рендера шаблона и изменения настроек**/
                    }
                

Возможности языка

                    "bus afterRender:last + settingsChanged":function(evt,
                            $element,    settings) {
                       /**реагируем на события рендера шаблона(данные с последнего проброшеного
                        события)и изменения настроек**/
                    }
                

Возможности языка

                    "bus settingsChanged > afterRender":function(evt) {
                       /**реагируем на события рендера шаблона и изменения настроек,учитывая порядок возникновения**/
                    }
                

Возможности языка

                    "bus settingsChanged + ... +n":function(evt,data,..,nData) {
                       /**Данные получаем в аргументах**/
                    }
                

Еще проблемы? Да, гибкость.

Profit?

1. Получили framework, который решает наши проблемы.
2. Гибкий.
3. Легко масштабируемый.
4. Тестируемый.
5. А что еще нужно?

Контакты