• Matreshka.js 2 — tl;dr

    • Tutorial

    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...


    Читать дальше →
  • Matreshka.js 2 — самый простой фреймворк во Вселенной

      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.

      Читать дальше →
    • Роутер для Matreshka.js 2

      • Tutorial

      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');
      Читать дальше →
      • +14
      • 9,9k
      • 1
    • (Архив) Matreshka.js — Три возможности

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

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

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



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

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

      В видео есть ответ на этот вопрос: вьюха — это ни более чем источник данных, событий и способ вывести данные в документ. Преимущество такого подхода в том, что вы не заморачиваетесь с представлением, а работаете с данными, не задумываясь, что произойдет, когда данные изменятся.
      Читать дальше →
    • (Архив) Matreshka.js ECMAScript.next boilerplate

      • Tutorial
      Пост устарел, 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 — фреймворк, использующийся по умолчанию.

      Читать дальше →
    • AdBlock похитил этот баннер, но баннеры не зубы — отрастут

      Подробнее
      Реклама
    • Matreshka.js 2: события

      • Tutorial

      image


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


      Всем привет!


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


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

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

      • Tutorial
      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 тех, кто с ними еще не знаком.
      Читать дальше →
    • (Архив) 10 причин попробовать Матрешку

        image

        1. Чистый JavaScript и HTML


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

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


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

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


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

        С Матрешкой всё намного проще. Вам нужно лишь однажды объявить привязку (в одном месте, а не в двух), затем работать с данными (как с обычными JavaScript объектами), забыв, что у нас вообще есть представление.
        Читать дальше →
      • Matreshka.js 2: От простого к простому

        • Tutorial

        image


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


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


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


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

          image
          Репозиторий на Github

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

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

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

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

          Читать дальше →
        Самое читаемое