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


    Читать дальше →
  • node-direct — один NodeJS сервер на несколько сайтов

    • Tutorial

    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 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
    • bala.js — убийца jQuery в менее чем 400 символах кода *

      • Tutorial
      * Это шутка.

      image
      (картинка позаимствована где-то в интернете)

      [ Репозиторий ]

      Всем привет.

      Уже давно прошли времена обязательной поддержки 6, 7, 8 Ослов и неизбежного использования jQuery, DOM API постепенно приводится к единому виду, но я всё так же часто встречаю на просторах интернета утверждения о том, что VanillaJS — это длинная колбаса.

      Мол, зачем мне писать вот так:
      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));
      }
      

      Это касается крошечных скриптов. Для крупных проектов, конечно, нужно юзать какой-нибудь фреймворк, который берет на себя все манипуляции над DOM.
      Читать дальше →
    • (Архив) 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 — фреймворк, использующийся по умолчанию.

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