'

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

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





Слайд 0

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


Слайд 1

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


Слайд 2

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


Слайд 3

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


Слайд 4

Модульность


Слайд 5

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


Слайд 6

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


Слайд 7

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


Слайд 8

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


Слайд 9

QUnit


Слайд 10

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


Слайд 11

jsPerf


Слайд 12

Selenium


Слайд 13

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


Слайд 14

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


Слайд 15

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


Слайд 16

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


Слайд 17

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


Слайд 18

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


Слайд 19

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


Слайд 20

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


Слайд 21

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


Слайд 22

docco


Слайд 23

GitHub Markdown


Слайд 24

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


Слайд 25

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


Слайд 26

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


Слайд 27

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


Слайд 28

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


Слайд 29

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


Слайд 30

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


Слайд 31

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


Слайд 32

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


Слайд 33

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


×

HTML:





Ссылка: