JSSDK: Начало

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