Как стать автором
Обновить

Компания Matreshka.js временно не ведёт блог на Хабре

Сначала показывать

defi.js — реактивная библиотека, основанная на Object.defineProperty

Время на прочтение 4 мин
Количество просмотров 5.5K
defi.js

defi.js — это библиотека, включающая в себя дюжину функций, которые добавляют интересные фичи любым JavaScript объектам с помощью геттеров и сеттеров.


Гифка для привлечения внимания (3.5МБ)
Репозиторий


В качестве Hello World создадим небольшой виджет, состоящий из поля имени, фамилии и приветствия (демо).


<input class="first">
<input class="last">
<output class="greeting"></output>

// данные по умолчанию
const obj = {
  first: 'John',
  last: 'Doe'
};

// слушаем изменения в свойствах first и last
// если произошло изменение, сообщим об этом в консоли
defi.on(obj, 'change:first', () => console.log('First name is changed'));
defi.on(obj, 'change:last', () => console.log('Last name is changed'));

// автоматически генерируем приветствие (свойство greeting) каждый раз,
// когда first или last изменились
defi.calc(obj, 'greeting', ['first', 'last'], (first, last) => `Hello, ${first} ${last}`);

// объявляем двусторонний байндинг между свойствами 
// и соответствующими элементами на странице
defi.bindNode(obj, {
  first: '.first',
  last: '.last',
  greeting: '.greeting'
});

В итоге, если first или last изменились, обработчики события сообщают об этом в консоли, свойство greeting автоматически обновляется, а его элемент получает новое значение (по умолчанию, "Hello, John Doe"). Это случается каждый раз, когда свойства меняются, причем не имеет значения, каким образом. Можно установить значение с помощью кода obj.first = 'Jane', либо изменив значение поля, и все остальные изменения произойдут автоматически.

Читать дальше →
Всего голосов 16: ↑15 и ↓1 +14
Комментарии 13

Matreshka.js 2 — tl;dr

Время на прочтение 4 мин
Количество просмотров 6.8K

image



Краткий обзор простого фреймворка для создания одностраничных приложений Matreshka.js. В посте используется ECMAScript 2017, который можно переписать на ECMAScript 5.


Основные функции


Функция bindNode связывает свойство и элемент.


const object = { name: 'Brendan' };
const node = document.querySelector('.name');
Matreshka.bindNode(object, 'name', node);
object.name = 'Doug';


Если свойство меняется, меняется и элемент, если элемент меняется (например, пользователь вводит текст), меняется и свойство. Из коробки Matreshka.js умеет обрабатывать любые элементы форм. Можно объявить байндинг для произвольных элементов см. документацию.


Функция calc связывает одно свойство с другими.


Matreshka.calc(object, 'fullName', ['firstName', 'lastName'], (firstName, lastName) => {
    return `${firstName} ${lastName}`
});
object.firstName = 'Brendan';
object.lastName = 'Eich';
// ...
console.log(object.fullName); // "Brendan Eich"

Когда меняется свойство-источник (firstName или lastName), меняется и свойство-цель (fullName).


Вместе с функцией bindNode можно объявлять длинные цепочки зависимостей: свойство a зависит от состояния элемента e1, свойство b зависит от свойства a, свойство c зависит от элементов e2 и e3 и от свойства b, изменение которого, как следствие, меняет e1, e2 и e3...


Всего голосов 27: ↑20 и ↓7 +13
Комментарии 20

Matreshka.js 2 — самый простой фреймворк во Вселенной

Время на прочтение 8 мин
Количество просмотров 18K
Matreshka.js заполняет образовавшуюся за последние годы пропасть между джуном и сеньором

Вышла beta второй версии фреймворка Matreshka.js. Релиз выйдет через неделю (плюс пара дней) после последнего патча, отчет начинается с выходом этого поста. Версию можно считать стабильной, а статус beta — чистой формальностю, так как проект достаточно долго и без серьезных изменений пребывал в статусе prealpha/alpha и проверялся в реальных проектах.



» Репозиторий
» Сайт


Позиционирование фреймворка


Вместо наивного "JavaScript фреймворк для всех", Matreshka.js теперь позиционируется, как "Простой фреймворк для джунов". Позвольте мне, вместо дублирования текста с сайта, разместить ссылку на текст, объясняющий этот момент более детально.


Общие изменения


  • Фреймворк был переписан с нуля, с использованием ECMAScript 2015 и некоторых элементов синтаксиса, еще не вошедших в финальную спецификацию.
  • Все примеры так же переписаны на новый JavaScript.
  • Устранены все потенциальные утечки памяти.
  • Добавлена возможность импортировать только необходимые функции и классы. В документации к каждому статичному методу и классу указан и адрес модуля.

const bindNode = require('matreshka/bindnode');
bindNode(object, key, node);

  • Все сопроводительные материалы так же обновились: статьи, роутер, и пр.
  • Документация собирается с помощью Webpack и самописного плагина, который очень быстро генерирует HTML файлы из JSDoc и GFM.

Читать дальше →
Всего голосов 31: ↑26 и ↓5 +21
Комментарии 89

Роутер для Matreshka.js 2

Время на прочтение 4 мин
Количество просмотров 10K

Demo
Репозиторий


tl;dr


Плагин включает синхронизацию свойств объекта и куска урла.


Matreshka.initRouter(object, '/a/b/c/');
object.a = 'foo';
object.b = 'bar';
object.c = 'baz'

// location.hash теперь #!/foo/bar/baz/

Для использования History API вместо location.hash, нужно передать строку "history" вторым аргументом.


Matreshka.initRouter(object, '/a/b/c/', 'history');

Импорт CJS модуля:


const initRouter = require('matreshka-router');
initRouter(object, '/a/b/c/', 'history');
Читать дальше →
Всего голосов 20: ↑17 и ↓3 +14
Комментарии 1

(Архив) Matreshka.js — Три возможности

Время на прочтение 2 мин
Количество просмотров 7.6K
На этот раз вместо статьи было решено сделать видеоролик, объясняющий три немаловажные аспекта API Матрешки. Это пилотный ролик, и, если последует позитивная реакция от сообщества, в планах записать несколько видео туториалов, предположительно, в формате «Х за 60 секунд».

В ролике рассказывается о:

1. Методе реализующем одно/двусторонее связывание данных (bindNode).
2. Зависимостях одних данных от других (calc).
3. Возможности прослушивать изменения свойства для запуска произвольного кода.



Матрешку иногда критикуют за способ, который был выбран для связывания данных и представления. Если быть точнее, у разработчиков вызывает вопросы метод bindNode и использование селектора вместо новомодных компонентов или описания логики прямо в HTML коде.

this.bindNode('key', '.selector', binder);

В видео есть ответ на этот вопрос: вьюха — это ни более чем источник данных, событий и способ вывести данные в документ. Преимущество такого подхода в том, что вы не заморачиваетесь с представлением, а работаете с данными, не задумываясь, что произойдет, когда данные изменятся.
Читать дальше →
Всего голосов 17: ↑15 и ↓2 +13
Комментарии 20

(Архив) Matreshka.js ECMAScript.next boilerplate

Время на прочтение 4 мин
Количество просмотров 7.3K
Пост устарел, SystemJS — не панацея, он обладает множеством проблем со сборкой (лично я отрепортил о массе багов), Gulp можно заменить на NPM Scripts. Используйте Webpack.

Дисклеймер: этот пост может показаться неинтересным для продвинутых JavaScript разработчиков. Он ориентирован на новичков, желающих освоить ECMAScript 2015+.

С появлением частичной поддержки ECMAScript 2015 в Chrome 45 и NodeJS 4, мы, веб разработчики, вступили в новую эпоху отрасли, которая нам приносит не только «хлеб с маслом», но и доставляет массу удовольствия. К сожалению, новый JavaScript не поддерживается всеми браузерами. Разработчику на помощь приходит Babel, который компилирует новый JavaScript в старомодный и поддерживаемый всеми браузерами (даже древними). На самом деле компиляторов ECMAScript.next в ECMAScript 5 больше чем один: Traceur, ES6 Transpiler и другие. Но Babel (бывший 6to5) является самым популярным и самым быстроразвивающимся компилятором, на сегодня.

Матрешка, в свою очередь (как же без неё, всё-таки это блог проекта Matreshka.js), — умеренно популярный фреймворк, иногда вызвающий вопрос «с чего начать» у новичков.

Решение — Matreshka.js ECMAScript.next boilerplate. Этот репозиторий убивает двух зайцев одним выстрелом: он содержит настроенный Gulp, SystemJS, а так же пример простых модулей, использующих Матрешку.

<habracut /|>

Репозиторий сделан для всех, не только для пользователей Матрешки. Если вы не желаете использовать этот фрефмворк, просто не импортируйте его и удалите сответствующие файлы из /src/lib/.

Пример максимально упрощен для того, чтоб новичек сосредоточился на реализации, исключительно, JavaScript кода. CSS препроцессор, browserify, jspm и другие вещи не включены, а библиотеки, которые вы желаете подключить, можно копировать напрямую в папку /src/lib/.

Что мы будем использовать?


  • Gulp — «запускатель задач».
  • SystemJS — универсальный загрузчик модулей (AMD, CJS, ES6).
  • Babel — компилятор JavaScript нового поколения в старый.
  • Matreshka — фреймворк, использующийся по умолчанию.

Читать дальше →
Всего голосов 17: ↑16 и ↓1 +15
Комментарии 12

Matreshka.js 2: события

Время на прочтение 10 мин
Количество просмотров 7.9K

image


Документация на русском
Github репозиторий


Всем привет!


Функциональность событий в Matreshka.js стала настолько богатой, что она, без сомнения, заслужила отдельной статьи.


Эта статья на английском

Читать дальше →
Всего голосов 19: ↑15 и ↓4 +11
Комментарии 0

(Архив) Matreshka.js 1.1: еще больше крутостей

Время на прочтение 14 мин
Количество просмотров 10K
image

Документация на русском
Github репозиторий

Всем привет. Сегодня, 28 сентября исполняется два года с первого коммита в репозиторий Матрешки. Так совпало, что к этому времени подоспел новый релиз со всякими вкусностями для любого JavaScript разработчика (даже для тех, кто не хочет использовать Матрешку в качестве фреймворка).

Матрешка — это JavaScript фреймворк (или, если хотите, библиотека), основанный на акцессорах, и выжавшая из них невероятные, на первый взгляд, возможности. Помните, время, когда в JavaScript геттеры и сеттеры только-только появились? Сколько шума было вокруг них… Статьи, разговоры… Затем, всё затихло: многие не понимали, как этими возможностями воспользоваться, кроме как в простых примерах. Матрешка — это прекрасный ответ на вопрос, зачем нужны акцессоры в JavaScript.



По традиции, напомню о том, что умеет этот фреймворк с помощью маленького кусочка кода.

Раньше можно было делать только так:

// this - экземпляр Матрешки
// связываем свойство "x" с элементом на стрнице
this.bindNode('x', 'input.my-node');
// если изменилось, выводим alert
this.on('change:x', function() {
    alert(this.x);
});
// меняем свойство, вызывается обработчик
// меняется и привязаннык к "x" элемент
this.x = 'Wow!';

Теперь можно еще и так:

var object = {};
// связываем свойство "x" с элементом на стрнице
MK.bindNode(object, 'x', 'input.my-node');
// если изменилось, выводим alert
MK.on(object, 'change:x', function() {
    alert(object.x);
});
// меняем свойство, вызывается обработчик
// меняется и привязаннык к "x" элемент
object.x = 'Wow!';

Из-за того, что последние версии Chrome и NodeJS стали, наконец, поддерживать большинство элементов синтаксиса ES6, все примеры ниже в этом посте будут написаны на ES6. Таким нехитрым способом я хочу поздравить всех, кто считает эти нововведения невероятно крутыми и привлечь внимание к ES.next тех, кто с ними еще не знаком.
Читать дальше →
Всего голосов 20: ↑15 и ↓5 +10
Комментарии 27

(Архив) 10 причин попробовать Матрешку

Время на прочтение 3 мин
Количество просмотров 27K
image

1. Чистый JavaScript и HTML


Многие фреймворки пытаются починить веб, создавая собственный язык программирования. Идея Матрешки проста: с вебом всё в порядке. Вся логика, которую пишет программист, находится, как и должна, в JavaScript файлах, а HTML остаётся языком разметки гипертекста. Шутка об HTML программисте должна остаться шуткой.

2. Минимум сущностей


Матрешка не требует создания избыточных сущностей. Благодаря простому синтаксису привязок, связь между JavaScript и HTML может быть описана там же, где и логика. Программисту не требуется задумываться сразу о нескольких вещах, размышляя о балансе полномочий объектов. Вопрос где прописать обработчик: во “вьюхе” или в контроллере отпадает сам по себе. Хотя, никто не запрещает разделить данные и контроллер, разместив их в разных JS файлах.

3. Работай с данными, забудь о представлении


Попробовав популярный (но уступающий под натиском более современных продуктов) фреймворк Backbone, сталкиваешься с серьезным неудобством: объявляя данные, зависящие от UI и UI, зависящий от данных, вам, как правило, требуется создать два обработчика события. Один ловит изменения данных, второй ловит пользовательские действия. Проблема подкрепляется еще тем, что HTML элементы, как правило, совершенно идентичны в рамках приложения: input, select, кастомные виджеты из jQuery UI могут многократно встречаться на странице. Программисту, который реализует еще одну “единицу” приложения (например, форму), приходится пользоваться “копипастой”.

С Матрешкой всё намного проще. Вам нужно лишь однажды объявить привязку (в одном месте, а не в двух), затем работать с данными (как с обычными JavaScript объектами), забыв, что у нас вообще есть представление.
Читать дальше →
Всего голосов 43: ↑31 и ↓12 +19
Комментарии 37

Matreshka.js 2: От простого к простому

Время на прочтение 9 мин
Количество просмотров 23K

image


Документация на русском
Github репозиторий


Всем привет! В этой статье я расскажу, как пользоваться Matreshka.js на трех несложных примерах. Мы рассмотрим базовые возможности фреймворка, познакомимся с тем, как работать с данными и разберем коллекции.


Пост является краткой компиляцией переводов из этого репозитория.


Hello World!
Всего голосов 17: ↑15 и ↓2 +13
Комментарии 34

(Архив) Вышла первая версия фреймворка Matreshka.js

Время на прочтение 7 мин
Количество просмотров 25K
image
Репозиторий на Github

Всем привет! Спешу сообщить радостную новость. Наконец, вышла первая (1.0) версия фреймворка Матрешка. В этом посте я расскажу о самых важных изменениях во фреймфорке, о новом сайте и русскоязычной документации.

Напомню, Матрешка — JavaScript фреймворк для создания одностраничных приложений, соблюдающий несколько важных принципов:
  • Никакой логики в HTML
  • Минимум сущностей
  • Произвольная архитектура

Матрешка реализует простой синтаксис двустороннего связывания данных и активно использует акцессоры (геттеры и сеттеры).

this.bindNode( 'x', 'input.my-node' );
this.on( 'change:x', function() {
	alert( this.x );
});
this.x = 'Wow!';

Читать дальше →
Всего голосов 34: ↑29 и ↓5 +24
Комментарии 18

(Архив) Matreshka.js — долгожданная реализация TodoMVC

Время на прочтение 3 мин
Количество просмотров 9.6K
Введение
Наследование
MK.Object
MK.Array
Matreshka.js v0.1
Matreshka.js v0.2
Реализация TodoMVC

Cайт Матрешки
Github репозиторий.

Всем привет! В этом кратком посте, представляю на суд общественности долгожданную реализацию «Hello, world на стероидах» — TodoMVC на базе фреймворка Матрешка.



Напомню, одной из идей Матрешки является удобное связывание данных и HTML элементов с помощью простых функций, которое имеет следующие преимущества перед решением той же задачи в других фреймворках:

1. Никакой логики в HTML коде. Мне, как человеку, который с трепетом относится к JavaScript и HTML, хотелось бы, чтоб язык программирования так и остался языком программировния, я язык разметки — языком разметки.
2. Не нужно отдельно слушать события данных, для того, чтоб обновить UI, и слушать события UI для того, чтоб обновить данные. Это возволяет избежать ошибок, типа «забыл повесить обработчик», так как не приходится хранить в голове несколько сущностей сразу. Вы задаёте правила, как данные синхронизируются с видом, а дальше работаете исключительно с данными.

this.bindNode( 'x', 'select.my-select' );


TodoMVC — эталонное приложение, включающее в себя наиболее распространенные и «неудобные» задачи, у которого есть спецификация и которое призвано помочь программисту выбрать понравившийся фреймворк. На одноименном сайте размещен список реализаций приложения, используя самые популярные фреймворки. На github проекта — больше (папка labs).
Читать дальше →
Всего голосов 21: ↑17 и ↓4 +13
Комментарии 26

(Архив) Matreshka.js v0.2

Время на прочтение 10 мин
Количество просмотров 6.2K
Статья устарела. См. актуальную историю версий.


Всем привет. Представляю очередное обновление фреймворка Matreshka.js до версии 0.2. Напомню: Матрешка — фреймворк общего назначения с окрытым исходным кодом, в идеологию которого положено доминирование данных над внешним видом: вы задаёте правила, как интерфейс должен синхронизированться с данными, затем работаете исключительно с данными, кроме случаев, когда событие интерфейса не касается данных (например, щелчек по кнопке или сабмит формы, сами по себе, не меняют данные, а запускают функцию, которая, в свою очередь, работает с данными)

Читать дальше →
Всего голосов 17: ↑15 и ↓2 +13
Комментарии 10

(Архив) Matreshka.js v0.1

Время на прочтение 9 мин
Количество просмотров 9.9K
Статья устарела. См. актуальную историю версий.


(Все предыдущие статьи обновлены до актуального состояния)
Репозиторий

Сайт (там же и документация)

Matreshka LogoВсем привет. Прошло 5 месяцев после последней публикации серии статей о Матрешке. С тех пор исправлен небольшой ряд найденных ошибок, появилось несколько удобных фич, в том числе и под влияниев ваших комментариев, проект обрел спонсора в лице Shooju, получил логотип и нормальный, не-бутстраповский сайт.

Читать дальше →
Всего голосов 42: ↑38 и ↓4 +34
Комментарии 5

(Архив) Matreshka.js — MK.Array

Время на прочтение 6 мин
Количество просмотров 4.2K
Статья устарела. В новой документации содержится самая актуальная информация из этого поста. См. Matreshka.Array.



(Напомню, репозиторий находится здесь)

Приветствую всех. Предыдущую статью я закончил на том, что нам может потребоваться массив данных. Массивом в проекте Matreshka.js являются экземпляры класса MK.Array. Чем они отличается от обычных массивов? Почти ничем. Прототип MK.Array содержит все методы, которые есть у «традиционного» массива, конструктор принимает те же аргументы, что и оригинальный Array, а экземпляры имеют несколько интересных особенностей.

MK.Array — это массив на стероидах, который умеет:
  • Всё, что умеет Array
  • Генерировать события при модификации
  • Использовать цепочечный вызов методов там, где это возможно
  • Умеет то, что умеет Матрешка: привязывать элементы к свойствам и генерировать кастомные события


Помните гифку из первой статьи серии?

Читать дальше →
Всего голосов 23: ↑19 и ↓4 +15
Комментарии 15

(Архив) Matreshka.js — MK.Object

Время на прочтение 4 мин
Количество просмотров 3.9K
Статья устарела. В новой документации содержится самая актуальная информация из этого поста. См. Matreshka.Object.


В предыдущих статьях мы познакомились с общими принципами Матрешки: привязка элементов, события, наследование. В конце предыдущей статьи я задал себе вопрос: «Как разграничить состояние приложения (показать ли пользователю пароль) и данные приложения (логин, пароль, «запомнить меня»)».

Класс, который нам в этом поможет, называется MK.Object, который наследуется от класса Matreshka. Идея проста: у нас есть множество ключей, отвечающих за данные в экземпляре класса и мы считаем, что остальные свойства отвечают лишь за состояние приложения и не являются бизнес моделью.

Как устроено множество ключей
За множество ключей отвечает псевдоприватное свойство ._keys, которое является объектом со значениями, которые нам безразличны. Массив бы нам не подошел, потому что, перед добавлением нового ключа надо было бы проверять, есть ли ключ в массиве, а при удалении, пришлось бы узнавать индекс, затем сдвигать следующие элементы. В случае объекта, мы получаем полноценное множество строк, для добавления нового ключа не нужно проверять его наличие, а для удаления требуется лишь вызов оператора delete.


Для того, чтоб установить свойство, которое отвечает за данные, используется метод .jset:
var mkObject = new MK.Object();
mkObject.jset( 'a', 1 );
console.log( mkObject.toJSON() ); // { a: 1 }

Читать дальше →
Всего голосов 25: ↑23 и ↓2 +21
Комментарии 7

(Архив) Matreshka.js — Наследование

Время на прочтение 8 мин
Количество просмотров 4.5K
Статья устарела. В новой документации содержится самая актуальная информация из этого поста. См. Class.


Приветствую всех читателей и писателей Хабра.
В предыдущей статье мы поговорили об основах работы с Матрешкой. В этой, я хочу рассказать, как наследовать Матрешку и как строить пока что небольшие приложения на её базе.

Матрешка устроенна в виде класса, сконструтированного при помощи кастомной функции Class. Это немного измененная версия функции, о которой я писал на форуме javascript.ru (ссылка на доку).

Так почему классы? Класс — это лишь слово, не противоречащее парадигме прототипного программирования. Если взглянуть на документацию того же Backbone.js, то вы увидите, что и они оперируют словом «класс» без всяких стеснений. Мы можем поспорить о том, что в Javascript нет классов, есть конструкторы, и я с вами соглашусь, но, на деле, имеет ли этот спор смысл? Если конструктор выглядит как класс, плавает как класс, и крякает как класс, то это, наверное, и есть класс?

От лирики к делу. Итак, Матрешка создана в виде класса:
window.MK = window.Matreshka = Class({ ... });

Аргумент класса — прототип конструктора, который можно определить так:
var MyClass = Class({
  constructor: function() { ... }
});
… который затем и возвращается из функции Class. Если конструктор не определен, то им станет пустая функция.
Читать дальше →
Всего голосов 28: ↑22 и ↓6 +16
Комментарии 2

(Архив) Matreshka.js — Введение

Время на прочтение 10 мин
Количество просмотров 24K
Статья устарела. В новой документации содержится самая актуальная информация из этого поста. См. bindNode и on.

Приветствую всех читателей и писателей хабра.

Хочу познакомить вас с компактным фреймворком, который позволяет несколько изменить взгляд на структурирование приложений. В «Матрешку» вложено чуточку магии, раскрыть которую позволит серия статей, озаглавленных следующим образом:


Код для привлечения внимания:
mk.on( 'change:x', function() {
	alert( 'x is changed to ' + this.x );
});
mk.x = 2; // alerts "x is changed to 2"

И это работает в… IE8.

Что такое Матрешка?

Матрешка, как фреймворк
Компактный размер и легкая в изучении архитектура даёт возможность строить крупные расширяемые приложения. Этим сегодня никого не удивишь, но я постараюсь.
Матрешка, как библиотека
Если фичи, предоставляемые Матрешкой вам понравятся, то не обязательно менять свой код. Матрешкой можно пользоваться, как набором классов с интересными методами.
Матрешка, как платформа для создания собственного фреймворка
Матрешка — расширяемый фреймворк общего назначения, который не позиционируется, как MVC, MVVM или %your_design_pattern% фреймворк, поэтому программист имеет возможность реализовать собственную архитектуру, которая будет уметь желаемый набор шаблонов проектирования.

Зачем?

Мне часом надоело думать о представлении и о том, чтоб его менять написанным мной кодом. Все костыли синхронизации данных и представления в Javascript вызывают у меня негативные чувства, и амбициозной, направленной в будущее, целью Матрешки является возможность полностью забыть о том, что у нас есть UI, оперируя только данными. Конечно же, решить эту задачу невозможно на 100%, но мы, программисты, должны выжимать максимум из данных нам инструментам, дабы сделать код чище, короче и гибче. Пора встряхнуть свой код и стать злым.
Гифка для привлечения внимания

Читать дальше →
Всего голосов 66: ↑60 и ↓6 +54
Комментарии 52