jssdk: Начало
DESCRIPTION
«JSSDK: Начало» Когда использовать готовые решения, а когда писать самим. Какие шаги нужно сделать, чтобы ваша работа не оказалась напрасной и принесла пользу окружающим. Все эти нюансы будут рассмотрены на примере внутреннего фреймворка, который возник вследствие необходимости объединения кодовой базы двух проектов.TRANSCRIPT
![Page 1: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/1.jpg)
JSSDKНАЧАЛО
![Page 2: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/2.jpg)
Велосипед или продукт?
![Page 3: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/3.jpg)
Основные проблемы
- Устаревание
- Зависимость от специфичной технологии
- Узкая специализация
- Отсутствие возможности расширения
- Поддержка
![Page 4: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/4.jpg)
http://mailru.github.io/FileAPI/
![Page 5: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/5.jpg)
Спустя время
- Большая и мобильная почта
- Одноклассники
- Облако, Ответы, Документы
- и многие другие (~2К stars, ~260 forks)
![Page 6: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/6.jpg)
«Тач» почта
![Page 7: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/7.jpg)
Выбор решения
- Использовать наработки большой почты
- Взять популярный фреймворк
- Написать самим
![Page 8: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/8.jpg)
«Тач» почта
- Grunt — сборка проекта
- RequireJS — организация модулей
- Backbone — работа с данными
- fest — шаблонизация
![Page 9: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/9.jpg)
Проблемы
vs
![Page 10: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/10.jpg)
Новое серверное API
Проверка токена
GET /folders/all/RPC.call("folders/all")
.then(doneFn, failFn)
запрашиваем,токен POST /token/
проверкаавторизации
токен получен,идет за папками GET /folders/all/
Проверка токена,список папок
resolve(body);
![Page 11: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/11.jpg)
Базовый набор инструментов
- Emitter — излучатель событий
- Promise — обещания
- request — отправка HTTP-запросов к
серверу
![Page 12: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/12.jpg)
Базовый набор инструментов
- RPC — отвечает за логику работы с
серверным API
- Model — класс модели
- Model.List — класс для работы со списком
моделей (коллекция)
![Page 13: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/13.jpg)
Что делать дальше?
![Page 14: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/14.jpg)
Поиск готовых решений
1. Составьте список требований
2. Добавьте к нему пункт «расширяемость»
3. Всё.
![Page 15: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/15.jpg)
Готовые решения
1. Составление списка готовых решений
2. Изучение списка
3. Если решение не подходит, пробуем
изменить задачу
4. Если ничего не подошло, то готовы ли вы…
![Page 16: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/16.jpg)
Модели
![Page 17: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/17.jpg)
Требования к моделям
- Dot notation — доступ к свойствам модели
- Getters — доступ к свойствам без `get`
- Caching — возможность получения данных
из localStorage или IndexedDB
- Persist model — целостность модели
![Page 18: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/18.jpg)
![Page 19: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/19.jpg)
![Page 20: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/20.jpg)
Backbone Большая почта
Dependencies jQuery, undescore jQuery
Dot notation - -
Getters - +
Caching - -
Persist model - +
Сравнение
![Page 21: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/21.jpg)
Getters
- Backbone.Mutators
- писать самим
Dot notation
- Backbone.Nested
- Backbone.DeepModel
![Page 22: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/22.jpg)
Целостностьчто это?
![Page 23: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/23.jpg)
// Поиск моделиfunction findOne(id) {
var dfd = $.Deferred(),model = new Backbone.Model({ id: id });
model.fetch({success: dfd.resolve,error: dfd.error
});
return dfd.promise();}
Пример получения модели
![Page 24: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/24.jpg)
// Где-то в коде #1findOne(123).then(function (model) {
model.on("change:flag", function () { // Слушаемconsole.log(model.get("flag"));
});});
Пример получения модели
// Где-то #2findOne(123).then(function (model) {
model.set("flag", true); // и ничего не происходит});
![Page 25: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/25.jpg)
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];
}
Добавляем целостность
![Page 26: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/26.jpg)
А коллекции?
![Page 27: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/27.jpg)
// Отфильтруем и получим все id
var ids = collection
.where({ flag: true })
.pluck("id");
// TypeError: undefined is not a function
Коллекции
![Page 28: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/28.jpg)
Итого
- Dot notation —Nested / DeepModel
- Getters — писать самим
- Сaching — ничего вразумительного не
нашел, т.е. писать самим
- Persist model — писать самим
![Page 29: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/29.jpg)
Если вам так ничего и
не подошло, то готовы ли вы…
![Page 30: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/30.jpg)
Готовы ли вы...
- Писать общее решение, а не решать узкую
задачу?
- Писать тесты и документацию
- Поддерживать 24/7?
- Делать всё это бесплатно?
![Page 31: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/31.jpg)
Я готов,
с чего начать?
![Page 32: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/32.jpg)
Главное не кодить
![Page 33: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/33.jpg)
Инфраструктура
![Page 34: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/34.jpg)
Инфраструктура
- Сборка проекта
- Тесты, контроль покрытия и code style
- Поддержка браузерами
- Автоматизация контроля изменений
- Документирование кода и документация
- Способ распространения
![Page 35: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/35.jpg)
Инфраструктура
- GruntJS для сборки проекта
- JSHint, QUnit + Istanbul
- grunt-autopolyfiller
- git hooks + Travis CI
- JSDoc3 для документирования кода
- Private GitHub и подключение через subtree
![Page 36: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/36.jpg)
С чего начинает
разработчик?
![Page 37: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/37.jpg)
![Page 38: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/38.jpg)
Модуль
- MyModule.js — код модуля
- MyModule.tests.js — тесты
- MyModule.banch.js — тесты
производительности (если они нужны)
- README.md — документация (по JSDoc3)
> grunt module:create:MyModule
![Page 39: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/39.jpg)
список изменённых файлов
pre-commitgrunt JSHint
pre-pushgrunt QUnit
![Page 40: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/40.jpg)
![Page 41: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/41.jpg)
![Page 42: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/42.jpg)
![Page 43: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/43.jpg)
Веб-интерфейс
![Page 44: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/44.jpg)
Веб-интерфейс
![Page 45: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/45.jpg)
Веб-интерфейс
![Page 46: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/46.jpg)
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()) {}
});}
});
Было
![Page 47: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/47.jpg)
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) {}
});});
Было
![Page 48: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/48.jpg)
var CloudEntry = RPCModel.extend({url: "...",defaults: { ... },isFile: function () {
// ...}
});
CloudEntry.find("/").then(function (entries) {entries.each(function (entry) {
if (entry.isFile()) {}
});});
Стало
![Page 49: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/49.jpg)
CloudEntry.find("/").then(function (entries) {entries.each(function (entry) {
if (entry.is_file) {}
});});
Но в Облаке должно быть...
![Page 50: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/50.jpg)
var CloudEntry = RPCModel.extend({url: "...",defaults: { ... },
getters: {is_file: "isFile"
},
isFile: function () {// ...
}});
Стало: Почта + Облако
![Page 51: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/51.jpg)
x16
x4
x5
x4
x4
x4
![Page 52: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/52.jpg)
x4.6
x4.6
x4.4
x4.2
x4.2
x1.9
x1.9
![Page 53: JSSDK: Начало](https://reader031.vdocuments.site/reader031/viewer/2022012400/559c654f1a28abd80c8b47f8/html5/thumbnails/53.jpg)
Продолжение следует...
https://github.com/mailru/
https://github.com/RubaXa/
@ibnRubaXa