Upload
-
View
162
Download
1
Embed Size (px)
DESCRIPTION
«JSSDK: Начало» Когда использовать готовые решения, а когда писать самим. Какие шаги нужно сделать, чтобы ваша работа не оказалась напрасной и принесла пользу окружающим. Все эти нюансы будут рассмотрены на примере внутреннего фреймворка, который возник вследствие необходимости объединения кодовой базы двух проектов.
Citation preview
JSSDKНАЧАЛО
Велосипед или продукт?
Основные проблемы
- Устаревание
- Зависимость от специфичной технологии
- Узкая специализация
- Отсутствие возможности расширения
- Поддержка
http://mailru.github.io/FileAPI/
Спустя время
- Большая и мобильная почта
- Одноклассники
- Облако, Ответы, Документы
- и многие другие (~2К stars, ~260 forks)
«Тач» почта
Выбор решения
- Использовать наработки большой почты
- Взять популярный фреймворк
- Написать самим
«Тач» почта
- Grunt — сборка проекта
- RequireJS — организация модулей
- Backbone — работа с данными
- fest — шаблонизация
Проблемы
vs
Новое серверное API
Проверка токена
GET /folders/all/RPC.call("folders/all")
.then(doneFn, failFn)
запрашиваем,токен POST /token/
проверкаавторизации
токен получен,идет за папками GET /folders/all/
Проверка токена,список папок
resolve(body);
Базовый набор инструментов
- Emitter — излучатель событий
- Promise — обещания
- request — отправка HTTP-запросов к
серверу
Базовый набор инструментов
- RPC — отвечает за логику работы с
серверным API
- Model — класс модели
- Model.List — класс для работы со списком
моделей (коллекция)
Что делать дальше?
Поиск готовых решений
1. Составьте список требований
2. Добавьте к нему пункт «расширяемость»
3. Всё.
Готовые решения
1. Составление списка готовых решений
2. Изучение списка
3. Если решение не подходит, пробуем
изменить задачу
4. Если ничего не подошло, то готовы ли вы…
Модели
Требования к моделям
- Dot notation — доступ к свойствам модели
- Getters — доступ к свойствам без `get`
- Caching — возможность получения данных
из localStorage или IndexedDB
- Persist model — целостность модели
Backbone Большая почта
Dependencies jQuery, undescore jQuery
Dot notation - -
Getters - +
Caching - -
Persist model - +
Сравнение
Getters
- Backbone.Mutators
- писать самим
Dot notation
- Backbone.Nested
- Backbone.DeepModel
Целостностьчто это?
// Поиск моделиfunction findOne(id) {
var dfd = $.Deferred(),model = new Backbone.Model({ id: id });
model.fetch({success: dfd.resolve,error: dfd.error
});
return dfd.promise();}
Пример получения модели
// Где-то в коде #1findOne(123).then(function (model) {
model.on("change:flag", function () { // Слушаемconsole.log(model.get("flag"));
});});
Пример получения модели
// Где-то #2findOne(123).then(function (model) {
model.set("flag", true); // и ничего не происходит});
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];
}
Добавляем целостность
А коллекции?
// Отфильтруем и получим все id
var ids = collection
.where({ flag: true })
.pluck("id");
// TypeError: undefined is not a function
Коллекции
Итого
- Dot notation —Nested / DeepModel
- Getters — писать самим
- Сaching — ничего вразумительного не
нашел, т.е. писать самим
- Persist model — писать самим
Если вам так ничего и
не подошло, то готовы ли вы…
Готовы ли вы...
- Писать общее решение, а не решать узкую
задачу?
- Писать тесты и документацию
- Поддерживать 24/7?
- Делать всё это бесплатно?
Я готов,
с чего начать?
Главное не кодить
Инфраструктура
Инфраструктура
- Сборка проекта
- Тесты, контроль покрытия и code style
- Поддержка браузерами
- Автоматизация контроля изменений
- Документирование кода и документация
- Способ распространения
Инфраструктура
- GruntJS для сборки проекта
- JSHint, QUnit + Istanbul
- grunt-autopolyfiller
- git hooks + Travis CI
- JSDoc3 для документирования кода
- Private GitHub и подключение через subtree
С чего начинает
разработчик?
Модуль
- MyModule.js — код модуля
- MyModule.tests.js — тесты
- MyModule.banch.js — тесты
производительности (если они нужны)
- README.md — документация (по JSDoc3)
> grunt module:create:MyModule
список изменённых файлов
pre-commitgrunt JSHint
pre-pushgrunt QUnit
Веб-интерфейс
Веб-интерфейс
Веб-интерфейс
var CloudEntry = Backbone.Model.extend({// ...
});var CloudEntries = Backbone.Collection.extend({
model: CloudEntry});
var entries = new CloudEntries({ id: "/" });entries.fetch({
success: function () {entries.each(function (entry) {
if (entry.isFile()) {}
});}
});
Было
app.loadFolder = function (id) {return api.folder(id).then(function (entries) {
_normalize(entries);return entries;
});};
app.loadFolder(123).then(function (/**Object[]*/entries) {entries.forEach(function (entry) {
if (entry.is_file) {}
});});
Было
var CloudEntry = RPCModel.extend({url: "...",defaults: { ... },isFile: function () {
// ...}
});
CloudEntry.find("/").then(function (entries) {entries.each(function (entry) {
if (entry.isFile()) {}
});});
Стало
CloudEntry.find("/").then(function (entries) {entries.each(function (entry) {
if (entry.is_file) {}
});});
Но в Облаке должно быть...
var CloudEntry = RPCModel.extend({url: "...",defaults: { ... },
getters: {is_file: "isFile"
},
isFile: function () {// ...
}});
Стало: Почта + Облако
x16
x4
x5
x4
x4
x4
x4.6
x4.6
x4.4
x4.2
x4.2
x1.9
x1.9
Продолжение следует...
https://github.com/mailru/
https://github.com/RubaXa/
@ibnRubaXa