Встречайте Follow.js

в 9:07, , рубрики: backbone.js, follow.js, javascript, json, knockoutjs, mvvm, метки: , , , , ,

Всем привет!
Хочу поведать сообществу про одну библиотеку, над которой я уже работаю продолжительное время.

Немного предистории или с чего всё началось

В своё время я узнал про такие замечательные инструменты как Knockout и Backbone.
Вначале я прочитал документацию по Backbone, посмотрел демо-пример и это всё меня немного напрягло.
Слишком много абстракции и кода, хотелось что-то попроще, но с той же гибкость разделения логики приложения.
Далее, почитав про KnockoutJS и пощупав его в действии в песочнице я пришел в некоторый восторг от паттерна MVVM.
Немного поработав с Knockout мне так и не удалось попробовать его в реальном проекте (я работаю в яндексе), хотя по ходу работы я прикидывал в целом, подойдет ли он нам или нет.

Начало

Всё началось с того, что я решил написать расширение для Opera — переводчик текста, упрощающий чтение сайтов на иностранном языке. Принцип действия его, как все уже наверное догадались, выделить нужный текст на странице и нажать хоткей (кнопку).
Так вот, это расширение имеет ряд пользовательских настроек, которые хранятся в HTML5 localStorage пользователя.
Мне был необходим инструмент, предоставляющий удобный API для работы с JSON, тогда это было только Getter/Setter-API, возможность подписки и отписки на изменения данных и их сериализация, чтобы сохранить в хранилище.
С того момента я начал вынашивать идеи реализации и возможностей для Follow.js.

Что это такое?

Follow.js — это в первую очередь предельно понятный и удобный инструмент для работы с моделью в JSON-формате.
Во время написания библиотеки я старался создать максимально минималистичный и понятный API (syntax sugar), перенимая разные удобные подходы из того же jQuery, это к примеру, передача множества аргументов в виде одного объекта, возможность связывать вызов методов в цепочку, гибкая поддержка формата входящих параметров, итд.

Итак, основной перечень возможностей библиотеки:

  • Отслеживание изменений любого объекта, массива или свойства модели (model.follow)
  • Возможность создания составных свойств модели, зависящих от других данных модели (model.composite)
  • Легкая сериализация всей модели или любой её части (model.toJSON)
  • Сохранение и восстановление промежуточных состояний модели (model.backup, model.restore)
  • Обновление модели с автоматическим вызовом всех зависимых колбэков (model.merge)
  • Ручной вызов одного или всех слушателей данных модели (model.dispatch)
  • Множественный выбор данных модели при поиске по маске цепочки (RegExp) или простому CSS-селектору на основе данных цепочки (model.select)
  • Бóльшая часть библиотеки должна поддерживатся и на серверном JS (кроме частей follow.domsync.js и follow.select.js)
  • Сборка данных из проектов, работающих с XML/XSL и организация модулей
  • Независимость от внешних библиотек (кроме follow.collector.js и follow.domsync.js)

Пример кода

var model = Follow('sample');

model({
    lang: {
        from: 'en',
        to: 'ru'
    },
    name: {
        first: 'John',
        last: 'Smith'
    }
});

model.follow('lang.to', function( value, params ){
    $('#flag').attr('src', '/icons/'+ value + '.png');
});

model.composite('fullName', function(){
	return this('name.first') +" "+ this('name.last');
});

Ссылки

Исходники на GitHub

Документация на русском (только, пожалуйста, не надо писать про ужасающий цвет фона в документации)

Демо-пример приложения «TODO-list» Follow.js vs Backbone.js для сравнения.

Автор: extensible

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js