JavaScript фреймворки. Куда катится мир. Владимир Кузнецов UWDC2012

Framework основа или каркас приложения

Приложение Яндекс Underscore jQuery Backbone common.js

Файл с полезными функциями

Модульность

…и еще масса мелких модулей

Дробим на модули чтобы: улучшить архитектуру фреймворка; упростить командную разработку и тестирование; из «большого» фреймворка можно собрать «маленький» только с нужными функциями.

Тестирование

Автоматическое дешевле и проще ручного. Дает возможность покрыть больше различных случаев. Не заменимо при рефакторинге.

QUnit

Jasmine describe(Test case", function() { it('should be true', function() { expect(App.method()).toEqual(true); });

jsPerf

Selenium

Точки расширения функциональности

События $(root).on(tableWasFilled.module1, function () { alert(Filled); }); $({a: 1}).on(tableWasFilled.module1, function () { alert(Filled); });

Функции обратного вызова Можно передать только одну функцию обратного вызова. Перед вызовом нужно проверить, что передали именно функцию. Явное связывание модулей.

Отложенные объекты Можно зарегистрировать сколько угодно функций-обработчиков. Объект может изменить состояние только один раз. Явное связывание модулей. Мало кто понимает как это работает!

Стиль кода Программы пишут, чтобы их читать.

Стиль кода Douglas Crockford: Programming Style & Your Brain JSLint в качестве валидатора Code Guidelines для вашей команды

Рефакторинг Не боимся трогать то, что работает.

Ускорение работы jQuery

Документация

docco

GitHub Markdown

Чеклист Модульность Тесты Точки расширения Хороший стиль кода Документация

Решил сделать «идеальный» фреймворк.

Создаем пространство имён App.namespace(App.Module, { method: function () { … } });

Хранилище данных модуля App.defaults(App.Module, { text: Hello, world!, enabled: true, });

Доступ к данным var data = App.defaults(App.Module); var enabled = App.defaults(App.Module, enabled); var text = App.defaults(App.Module, error.text, Default text);

Описание зависимостей App.register({ name: module1, path: [ /js/module1.js, /css/module1.css ], requires: [jQuery, module2] });

Загрузка модуля App.load({ load: App.calculate(module1); complete: function () { $(App.Module.init); } });

Загрузка обязательных ресурсов App.bootstrap({ load: jquery min.js, complete: function () { // в этом месте уже можно декорировать // страницу с применением jQuery. } });

Модульность Тесты Точки расширения Хороший стиль кода Документация

Спасибо! Владимир Кузнецов