'

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

Понравилась презентация – покажи это...





Слайд 1

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


Слайд 2

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


Слайд 3

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


Слайд 4

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


Слайд 5

Модульность


Слайд 6

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


Слайд 7

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


Слайд 8

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


Слайд 9

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


Слайд 10

QUnit


Слайд 11

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


Слайд 12

jsPerf


Слайд 13

Selenium


Слайд 14

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


Слайд 15

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


Слайд 16

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


Слайд 17

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


Слайд 18

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


Слайд 19

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


Слайд 20

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


Слайд 21

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


Слайд 22

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


Слайд 23

docco


Слайд 24

GitHub Markdown


Слайд 25

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


Слайд 26

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


Слайд 27

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


Слайд 28

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


Слайд 29

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


Слайд 30

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


Слайд 31

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


Слайд 32

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


Слайд 33

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


Слайд 34

Спасибо! Владимир Кузнецов http://noteskeeper.ru/ @mista_k


×

HTML:





Ссылка: