JavaScript фреймворки.Куда катится мир.

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

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

Решил сделать «идеальный» фреймворк.
http://bit.ly/app-skeleton

Создаем пространство имён
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-1.7.1.min.js”,
complete: function () {
// в этом месте уже можно декорировать // страницу с применением jQuery.
}
});

http://bit.ly/app-skeleton
Модульность
Тесты
Точки расширения
Хороший стиль кода
Документация