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', либо изменив значение поля, и все остальные изменения произойдут автоматически.

• Примеры
• Репозиторий

Краткий обзор простого фреймворка для создания одностраничных приложений 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...

tl;dr

С node-direct можно заливать серверные .js файлы и обращаться к ним так же, как к .php скриптам: example.com/foo.srv.js.

1. Установка.

   
   

   npm install -g node-direct

   
   

2. Конфигурация nginx.

   
   

   location ~ \.srv\.js$ {
           root <path_to_website_files>;
           proxy_pass http://localhost:<port>;
           proxy_set_header X-Requested-File-Path $document_root$uri;
   }

   
   

3. Запуск.

   
   

   node-direct --port=<port>

   
   

4. Скрипт foo.srv.js, где req и res созданы сервером express.

   
   

   module.exports = function(req, res) {
           const someModule = require('some-module');
           res.send('Hello world!');
   }

   
   

Введение

Когда NodeJS стал более-менее популярным, мне было нелегко осознать, что с ним всё не так просто, как с PHP. Используя последний, можно было создать .php файл, залить его на сервер, обратиться по адресу example.com/путь/имяфайла.php и радоваться. Такая простота развертывания скриптов служила одной из причин, почему "пых" стал таким популярным.

В свою очередь, NodeJS, независимо от сложности приложения, заставляет очень многие вещи делать руками.

• Гоняй каждое приложение на собственном порту
• Определи роуты самостоятельно
• Настрой деплой
• Убедись, что приложение работает и после перезагрузки сервера
• Не забудь сделать так, чтоб при изменении файлов, NodeJS сервер перезагружался
  

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.

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');

document.querySelector('.selector');

$('.selector');

// selects one node matched given selector
function $(selector, ctx) {
	return (ctx || document).querySelector(selector);
}

// selects all nodes matched given selector
function $$(selector, ctx) {
	return [].slice.call((ctx || document).querySelectorAll(selector));
}

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

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

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

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

Всем привет!

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

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

• Matreshka.js: От простого к простому
• 10 причин попробовать Матрешку
• Matreshka.js 1.1: еще больше крутостей
• Matreshka.js: события

// 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!';

• Matreshka.js: От простого к простому
• 10 причин попробовать Матрешку
• Matreshka.js 1.1: еще больше крутостей
• Matreshka.js: события

1. Чистый JavaScript и HTML

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

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

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

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

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

• Никакой логики в HTML
• Минимум сущностей
• Произвольная архитектура

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

• donut.js — микро-библиотека, рисующая бубликовые (donut chart) и круговые диаграммы
• Балалайка
• Функция procrastinate
• Противный зловред
• Идея: mousedown вместо click
• Совет: меньше используйте CDN
• Редактор SuitUp и чистка WYSIWYG от мусора
• Простейший полифил для addEventListener
• Репорт об опечатках на сайте
• vanillatree — ванильная замена jstree
• Немного опросов

donut.js — микро-библиотека, рисующая бубликовые (donut) и круговые диаграммы

var myDonutDiv = donut(options);

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

• Введение
• Наследование
• MK.Object
• MK.Array
• Matreshka.js v0.1
• Matreshka.js v0.2
• Реализация TodoMVC

• Введение
• Наследование
• MK.Object
• MK.Array
• Matreshka.js v0.1
• Matreshka.js v0.2
• Реализация TodoMVC

• Введение
• Наследование
• MK.Object
• MK.Array
• Matreshka.js v0.1
• Matreshka.js v0.2
• Реализация TodoMVC

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

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

• Введение
• Наследование
• MK.Object
• MK.Array
• Matreshka.js v0.1
• Matreshka.js v0.2
• Реализация TodoMVC

var mkObject = new MK.Object();
mkObject.jset( 'a', 1 );
console.log( mkObject.toJSON() ); // { a: 1 }

• Введение
• Наследование
• MK.Object
• MK.Array
• Matreshka.js v0.1
• Matreshka.js v0.2
• Реализация TodoMVC

window.MK = window.Matreshka = Class({ ... });

var MyClass = Class({
  constructor: function() { ... }
});