Matreshka.js заполняет образовавшуюся за последние годы пропасть между джуном и сеньором
Вышла beta второй версии фреймворка Matreshka.js. Релиз выйдет через неделю (плюс пара дней) после последнего патча, отчет начинается с выходом этого поста. Версию можно считать стабильной, а статус beta — чистой формальностю, так как проект достаточно долго и без серьезных изменений пребывал в статусе prealpha/alpha и проверялся в реальных проектах.
» Репозиторий
» Сайт
Позиционирование фреймворка
Вместо наивного "JavaScript фреймворк для всех", Matreshka.js теперь позиционируется, как "Простой фреймворк для джунов". Позвольте мне, вместо дублирования текста с сайта, разместить ссылку на текст, объясняющий этот момент более детально.
Общие изменения
Фреймворк был переписан с нуля, с использованием ECMAScript 2015 и некоторых элементов синтаксиса, еще не вошедших в финальную спецификацию.
Все примеры так же переписаны на новый JavaScript.
Устранены все потенциальные утечки памяти.
Добавлена возможность импортировать только необходимые функции и классы. В документации к каждому статичному методу и классу указан и адрес модуля.
На этот раз вместо статьи было решено сделать видеоролик, объясняющий три немаловажные аспекта API Матрешки. Это пилотный ролик, и, если последует позитивная реакция от сообщества, в планах записать несколько видео туториалов, предположительно, в формате «Х за 60 секунд».
В ролике рассказывается о:
1. Методе реализующем одно/двусторонее связывание данных (bindNode).
2. Зависимостях одних данных от других (linkProps).
3. Возможности прослушивать изменения свойства для запуска произвольного кода.
Матрешку иногда критикуют за способ, который был выбран для связывания данных и представления. Если быть точнее, у разработчиков вызывает вопросы метод bindNode и использования селектора вместо новомодных компонентов или описания логики прямо в HTML коде.
this.bindNode('key', '.selector', binder);
В видео есть ответ на этот вопрос: вьюха — это ни более чем источник данных, событий и способ вывести данные в документ. Преимущество такого подхода в том, что вы не заморачиваетесь с представлением, а работаете с данными, не задумываясь, что произойдет, когда данные изменятся.
Читать дальше →
Дисклеймер: этот пост может показаться неинтересным для продвинутых 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, а так же пример простых модулей, использующих Матрешку.
Репозиторий сделан для всех, не только для пользователей Матрешки. Если вы не желаете использовать этот фрефмворк, просто не импортируйте его и удалите сответствующие файлы из /src/lib/.
Пример максимально упрощен для того, чтоб новичек сосредоточился на реализации, исключительно, JavaScript кода. CSS препроцессор, browserify, jspm и другие вещи не включены, а библиотеки, которые вы желаете подключить, можно копировать напрямую в папку /src/lib/.
Функциональность, событий в Матрешке стала настолько богатой, что она, без сомнения, заслужила отдельной статьи. Коротко об изменениях в новой версии я рассказывал в предыдущем посте. Теперь давайте разберемся подробно, почему Матрешка называется event-driven фрейморком.
Небольшой код для привлечения внимания:
var object = {a: {b: {c: {d: 1}}}};
MK.on(object, 'a.b.c@change:d', function(evt) {
alert('"d" изменилось на ' + evt.value);
});
object.a.b.c.d = 2; // "d" изменилось на 2
object.a.b = {c: { d: 42 }}; // "d" изменилось на 42
Напомню, возможности, описанные в этом посте, доступны, в том числе, в виде небольшой библиотеки MatreshkaMagic, на случай, если вам не нужны «фреймворковые» фичи.
