«JSSDK: Начало» Когда использовать готовые решения, а когда писать самим. Какие шаги нужно сделать, чтобы ваша работа не оказалась напрасной и принесла пользу окружающим. Все эти нюансы будут рассмотрены на примере внутреннего фреймворка, который возник вследствие необходимости объединения кодовой базы двух проектов.
10. Новое серверное API
Проверка токена
GET /folders/all/
RPC.call("folders/all")
.then(doneFn, failFn)
запрашиваем,
токен POST /token/
проверка
авторизации
токен получен,
идет за папками GET /folders/all/
Проверка токена,
список папок
resolve(body);
11. Базовый набор инструментов
- Emitter — излучатель событий
- Promise — обещания
- request — отправка HTTP-запросов к
серверу
12. Базовый набор инструментов
- RPC — отвечает за логику работы с
серверным API
- Model — класс модели
- Model.List — класс для работы со списком
моделей (коллекция)
14. Поиск готовых решений
1. Составьте список требований
2. Добавьте к нему пункт «расширяемость»
3. Всё.
15. Готовые решения
1. Составление списка готовых решений
2. Изучение списка
3. Если решение не подходит, пробуем
изменить задачу
4. Если ничего не подошло, то готовы ли вы…
17. Требования к моделям
- Dot notation — доступ к свойствам модели
- Getters — доступ к свойствам без `get`
- Caching — возможность получения данных
из localStorage или IndexedDB
- Persist model — целостность модели
23. Пример получения модели
// Поиск модели
function findOne(id) {
var dfd = $.Deferred(),
model = new Backbone.Model({ id: id });
model.fetch({
success: dfd.resolve,
error: dfd.error
});
return dfd.promise();
}
24. Пример получения модели
// Где-то в коде #1
findOne(123).then(function (model) {
model.on("change:flag", function () { // Слушаем
console.log(model.get("flag"));
});
});
// Где-то #2
findOne(123).then(function (model) {
model.set("flag", true); // и ничего не происходит
});
25. Добавляем целостность
var _promises = {}; // список обещаний
// Поиск модели
function findOne(id) {
if (_promises[id] === undefined) {
var dfd = $.Deferred();
var model = new Backbone.Model({ id: id });
model.fetch({ success: dfd.resolve,
error: dfd.reject });
_promises[id] = dfd.promise();
}
return _promises[id];
}
27. Коллекции
// Отфильтруем и получим все id
var ids = collection
.where({ flag: true })
.pluck("id");
// TypeError: undefined is not a function
28. Итого
- Dot notation —Nested / DeepModel
- Getters — писать самим
- Сaching — ничего вразумительного не
нашел, т.е. писать самим
- Persist model — писать самим
29. Если вам так ничего и
не подошло, то готовы ли вы…
30. Готовы ли вы...
- Писать общее решение, а не решать узкую
задачу?
- Писать тесты и документацию
- Поддерживать 24/7?
- Делать всё это бесплатно?
34. Инфраструктура
- Сборка проекта
- Тесты, контроль покрытия и code style
- Поддержка браузерами
- Автоматизация контроля изменений
- Документирование кода и документация
- Способ распространения
35. Инфраструктура
- GruntJS для сборки проекта
- JSHint, QUnit + Istanbul
- grunt-autopolyfiller
- git hooks + Travis CI
- JSDoc3 для документирования кода
- Private GitHub и подключение через subtree