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

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

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


full_horiz.svg


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


Если страница сломана, обновите её с помощью комбинации Ctrl + F5, чтобы очистить кеш.


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

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


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

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

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


Автоматизация процесса выпуска новых версий

Раньше, для выпуска нового релиза приходилось совершать несколько повторяющихся действий:


  • Изменение в коде, написание тестов
  • Коммит изменений
  • Сборка с помощью Grunt
  • Коммит, сообщающий о сборке
  • Изменение версии в package.json вручную
  • Публикация модуля на NPM
  • Пуш на Github
  • Создание релиза на Github
  • Обновление раздела «что нового» в русскоязычной версии сайта
  • Добавление нового пункта в документацию (если в релиз попадает новая фича)
  • Сборка сайта и деплой на сервер
  • Коммит в репозиторий сайта
  • Сообщение о выпуске новой версии в Twitter, VK, Facebook

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


Благодаря включению в проект semantic-release, использованию Travis CI и другим изменениям (например, удалению русскоязычного changelog), выпуск релизов происходит по очень простой схеме.


  • Изменение в коде, написание тестов
  • Пуш на Github
  • Добавление нового пункта в документацию (если в релиз попадает новая фича)
  • Коммит в репозиторий сайта (если в релиз попадает новая фича)

Причем, попадание новых фич в сам фреймворк — маловероятно (об этом ниже), поэтому последний и предпоследние пункты можно не учитывать.


После того, как коммит с префиксом fix или feat попадает на Github, происходит следующее:


  • CI вызывает тесты
  • semantic-release анализирует коммиты и меняет версию в package.json
  • Код компилируется в ES5 для NPM
  • Сборка с помощью Webpack
  • Публикация сборки в бранче gh-pages (т. е. больше нет грязных коммитов, типа «rebuild»)
  • Бот сообщает о новом релизе в Twitter
  • Публикация нового релиза на Github

Не удивляйтесь, если увидете несколько патчей, сделанных в один день (надеюсь, что такие случаи будут редки).


В свою очередь, при любом коммите в репозиторий сайта, Travis с помощью PM2 автоматически деплоит сайт на сервер.


Другие реформации
  • Добавлена версия документации на украинском.
  • Название у фреймворка теперь одно: Matreshka.js или, сокращенно — Matreshka (латиницей, с большой буквы).
  • Страницы в VK и Facebook закрыты из-за нерегулярности и шаблонности новостей, типа «вышла новая версия».
  • Все примеры и основные туториалы теперь живут в этом репозитории.
  • Запущена кампания по сбору средств на Patreon. Если ваша компания использует Matreshka.js, финансовая поддержка проекта будет являться гарантией того, что проект будет активно развиваться. Если вы индивидуальный разработчик, то и ваша помощь не менее важна. Надеюсь на вашу поддержку, ведь разработка такого крупного продукта и создание трехъязычной документации стоит сотен часов безвозмездной работы.

Изменения API

Самым крупным изменением стало удаление многих функций, которые были ни к селу, не к городу (например, функция trim).


Почему эти функции вообще существали? Мотивация была простой: они были нужны для внутренних механизмов работы фреймворка и, если эти функции и так есть, почему бы не добавить их в публичное API фреймворка?


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


Начиная со второй версии Matreshka.js включает в себя возможности специфичные для самого фреймворка, но не включает никаких «общих» функций. О конкретных причинах удаления некоторых методов, я писал на форуме.


Новые фичи, скорее, будут выходить в виде дополнительных плагинов и библиотек, чем попадать в сам фреймворк (хотя, последнее не исключено).


Изменения API описаны ниже очень кратко, дабы не дублировать текст документации.


(!!!) — ломающие изменения
(!) — ломающие изменения, которые, скорее всего, не повлияют на старые приложения


То, что было удалено


  1. (!!!) Matreshka.delay
  2. (!!!) Matreshka#delay
  3. (!!!) Matreshka.define
  4. (!!!) Matreshka#define
  5. (!!!) Matreshka.defineSetter
  6. (!!!) Matreshka#defineSetter
  7. (!!!) Matreshka.defineGetter
  8. (!!!) Matreshka#defineGetter
  9. (!!!) Matreshka#getAnswerToTheUltimateQuestionOfLifeTheUniverseAndEverything
  10. (!!!) Matreshka.trim
  11. (!!!) Matreshka.orderBy
  12. (!!!) Matreshka.noop
  13. (!!!) Matreshka.extend
  14. (!!!) Matreshka.each
  15. (!!!) Matreshka.bound
  16. (!!!) Matreshka#bound
  17. (!!!) Matreshka.$bound
  18. (!!!) Matreshka#$bound
  19. (!!!) Matreshka.boundAll
  20. (!!!) Matreshka#boundAll
  21. (!!!) Matreshka.randomString (теперь живет тут)
  22. (!!!) Matreshka.get
  23. (!!!) Matreshka#get
  24. (!!!) Matreshka.deepFind
  25. (!!!) Matreshka.setProto
  26. (!!!) Matreshka.toArray
  27. (!!!) Matreshka.version
  28. (!!!) Matreshka#sandbox
  29. (!!!) Matreshka#$sandbox
  30. (!!!) Matreshka.Object#toNative
  31. (!!!) Matreshka.Object#toObject
  32. (!!!) Matreshka.Array#toNative
  33. (!!!) Matreshka.Array#toArray
  34. (!!!) Matreshka.binders.file (теперь живет тут)
  35. (!!!) Matreshka.binders.dropFile (теперь живет тут)
  36. (!!!) Matreshka.binders.dragOver (теперь живет тут)
  37. (!!!) Matreshka.Array#each
  38. (!!!) Matreshka.Array#hasOwnProperty
  39. (!!!) Matreshka.Array#useBindingsParser
  40. (!!!) Matreshka.Object#hasOwnProperty
  41. (!!!) window.Class (используйте Matreshka.Class вместо глобальной переменной)
  42. (!!!) window.$b, Matreshka.$b
  43. (!!!) Matreshka.$
  44. (!!!) Библиотека matreshka-magic
  45. (!!!) Matreshka.binders.innerHTML
  46. (!!!) Matreshka.binders.innerText
  47. (!!!) Matreshka.binders.attribute
  48. (!!!) Matreshka.binders.property

Переименованные методы и свойства


  1. (!!!) Matreshka#linkProps → Matreshka#calc
  2. (!!!) Matreshka.to → Matreshka.toMatreshka
  3. (!!!) Matreshka#setClassFor → Matreshka#instantiate
  4. Matreshka.Object#jset → Matreshka.Object#setData (jset не убран)
  5. (!!!) Matreshka#isMK → Matreshka#isMatreshka
  6. (!!!) Matreshka.Object#isMKObject → Matreshka.Object#isMatreshkaObject
  7. (!!!) Matreshka.Array#isMKArray → Matreshka#isMatreshkaArray
  8. (!!!) Matreshka.useAs$ → Matreshka.useDOMLibrary

Изменения в методах bindNode и unbindNode


  1. (!!!) Синтаксис { key: [node, binder] } больше не поддерживается.
  2. (!!!) Синтаксис «куча аргументов» больше не поддерживается.
  3. Новый синтаксис ([{key, node, binder, event}], commonEventOptions).
  4. Новый синтаксис {key: { node, binder }} and {key: [{ node, binder }]}. (Эврика! Этот синтаксисс позволяет красиво навешать много байндингов одним вызовом bindNode).
  5. (!) События bind, bind:KEY вызываются на каждую привязанную ноду.
  6. (!) unbind, unbind:KEY вызываются на каждую отвязанную ноду.
  7. Флаг useExactBinder.
  8. (!!!) Флаг assignDefaultValue переименован в getValueOnBind.
  9. Флаг setValueOnBind.
  10. (!!!) Флаг debounce удален.
  11. (!) Флаг debounceSetValue.
  12. (!) Флаг debounceGetValue.
  13. Флаг debounceSetValueOnBind.
  14. Флаг debounceGetValueOnBind.
  15. Флаг debounceGetValueDelay.
  16. Флаг debounceSetValueDelay.
  17. (!!!) Флаг exactKey вместо deep.

За подробностями обратитесь к документации bindNode и unbindNode


Изменения в байндерах


  1. Новый метод байндера destroy.
  2. (!!!) Байндер className больше не поддерживает синтаксис с восклицательным знаком. Вместо этого, можно передать false в качестве второго аргумента.
  3. Аргумент bindingOptions для всех методов байндера (например, getValue(bindingOptions) {...}).

За подробностями обратитесь к документации bindNode и binders


Изменения в parseBindings


  1. Метод принимает eventOptions вторым аргументом
  2. {{штуки}} не заменяются элементом span.
  3. (!!!) Первый аргумент обязателен.
  4. Внутри {{ скобок }} можно использовать пробелы.

За подробностями обратитесь к документации parseBindings


Изменения в bindSandbox


  1. Теперь метод отвязывает предыдущую песочницу, прежде, чем привязать новую.

За подробностями обратитесь к документации bindSandbox


Изменения в методе calc (который раньше назывался linkProps)


  1. (!!!) Флаг debounce переименован в debounceCalc.
  2. (!) debounceCalc по умолчанию true.
  3. Флаг debounceCalcOnInit.
  4. Флаг exactKey.
  5. (!!!) Флаг skipLinks переименован в skipCalc для использования в методе set.
  6. (!!!) Синтаксис [inst, key, inst, key] убран.
  7. Новый синтаксис { target: {source, event, handler} } (Эврика! Можно вызывать метод calc один раз на много свойств).
  8. Новый синтаксис [{object, key}].
  9. Флаг debounceCalcDelay.

За подробностями обратитесь к документации calc


Изменения в Matreshka.Array


  1. (!!!) Флаг skipMediator переименован в skipItemMediator.
  2. (!) Метод pull поддерживает только объекты и числа.
  3. from и of теперь наследуются.
  4. (!!!) Объект события addone содержит добавленный объект под свойством addedItem вместо added.
  5. (!!!) Объект события removeone содержит удаленный объект под свойством removedItem вместо removed.
  6. (!) itemRenderer не оборачивается в span, если содержит несколько узлов; вместо этого генерируется исключение.
  7. Свойство useBindingsParser удалено.
  8. (!!!) Парсер байндингов включен по умолчанию.
  9. Метод includes.
  10. Метод find.
  11. Метод findIndex.
  12. Метод fill.
  13. Метод copyWithin.
  14. Метод keys.
  15. Метод values.
  16. Метод entries.

За подробностями обратитесь к документации Matreshka.Array, pull, from, of, itemRenderer, METHOD.


Изменения в Matreshka.Object


  1. Событие set, которое срабатывает при изменении свойств (но не удалении), отвечающих за данные.
  2. Метод jset переименован в setData (по просьбам сообщества, старое название по-прежнему будет присутствовать).
  3. Флаг replaceData для метода setData.
  4. Метод isDataKey.
  5. Метод values.
  6. Метод entries.

За подробностями обратитесь к документации Matreshka.Object, setData, isDataKey, values, entries


Изменения в Matreshka.Class


  1. Статичные методы наследуются.
  2. Свойства с именами типа symbol поддерживаются и в качестве свойств прототипа и в качестве статичных свойств.

За подробностями обратитесь к документации Matreshka.Class


Другие изменения


  1. Статичный метод chain.
  2. (!!!) Геттер и сеттер свойства sandbox генерируют исключение для всех объектов.
  3. (!!!) Геттер и сеттер свойства container генерируют исключение для экземпляров Matreshka.Array.
  4. (!!!) «Список ключей, разделенных пробелами» больше не поддерживается ни одним из методов.
  5. Исправлены некоторые неочевидные баги
  6. Все классы и функции можно импортировать в виде CommonJS модуля (import text from 'matreshka/binders/text')
  7. Понятные ошибки.

Проекты, которые появились благодаря работе над Matreshka.js
  • deploy-to-git — CLI тулза, позволяющая деплоить что-либо (в моём случае, результат сборки) на Git сервер.
  • github-embed — эмбеддинг кода с Github, используется на официальном сайте.
  • webpack-generate-umd-externals — приблуда для Webpack, решающая редкую задачу: создание плагина, поддерживающего UMD для чего-то, так же поддерживающего UMD (в данном случае, Matreshka.js), но с импортом CommonJS зависимостей без импорта всего фреймфорка (сложно, не вдумывайтесь).
  • cz-simple-conventional-changelog — упрощенный cz-conventional-changelog.
  • eslint-plugin-output-todo-comments — плагин для ESLint, который выводит комментарии, с заданным префиксом в виде варнингов или ошибок; используется в Matreshka.js, чтоб TODO комментарии не терялись.
  • babel-plugin-transform-object-spread-inline — транспайлит синтаксис object spread в быстрый цикл for вместо вызова Object.assign.
  • babel-plugin-nofn — транспайлит вызов мета функции в быстрый цикл for.
  • babel-plugin-transform-es2015-modules-simple-commonjs — упрощенный трансформер модулей ECMAScript 2015 в CommonJS для компактности результирующего кода.
  • uniquestring — генератор псевдослучайной строки (замена Matreshka.randomString).
  • makeelement — создание DOM элементов (замена Matreshka.$b.create).

Спасибо за внимание!

Комментарии (16)

  • 11 октября 2016 в 12:49 (комментарий был изменён)

    0

    ↑

    ↓

    Глядя на «ломающий» changelog, понимаешь, что ты и раньше без Matreshka.js нормально жил, и дальше хуже не станет.


    Даже если это все было внутренним, в документации это было описано как public, и люди могли использовать, не ожидая такой подставы

    • 11 октября 2016 в 12:51

      0

      ↑

      ↓

      Каждые несколько лет «ломать» можно, иначе накапливается критическая масса недоразумений, которые отталкивают и старых и потенциальных новых пользователей. Это касается любого open source проекта.

  • 11 октября 2016 в 12:56

    +5

    ↑

    ↓

    Я нихрена не понял, зачем это всё нужно. В описании сплошной маркетинг и светлое будущее. Не понятно даже, это «типа jquery?» или нет. И hellow world! на полтора экрана прокрутки. :)
    Самый простой ферймворк во вселенной. Вам даже не надо ничего писать! Просто добавьте его к сайту, и больше ничего не надо делать! От всё сделает сам!
    А теперь главное!!! В следующей версии его даже не надо добавлять к сайту!!! Никаких API! Никакого программирования! Только вселенная!

    • 11 октября 2016 в 12:59

      –1

      ↑

      ↓

      > Я нихрена не понял

      За две минуты вряд ли что-то можно понять.

      И нигде не написано о светдом будущем. Это фреймворк для новичков, не более.

      • 11 октября 2016 в 13:51

        +4

        ↑

        ↓

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

        Какие задачи? Это главный вопрос — для чего пригоден, а для чего не пригоден Ваш фреймворк. Ответа процитированное не дает.
        Меньше ошибок в коде

        Меньше по сравнению с чем? И почему меньше, за счет чего? За счет богатой библиотеки? Или за счет сокращения количества кода, который приходится писать? Или еще почему-то? Нет ответа.
        Возможность рефакторинга легаси приложений, без переписывания с нуля

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

        Поверим на слово. Но как насчет возможностей? Если цена простоты отсутствие возможностей, то зачем такой фреймворк нужен? А о возможностях мы до сих пор ничего не знаем…
        Одна из самых удобных документаций среди JavaScript библиотек

        А вот это уже претензия на исключительность, которую придется оправдать, иначе впечатление будет загублено окончательно. Вы уверены, что не выдаете желаемое за действительное?

        • 11 октября 2016 в 14:05 (комментарий был изменён)

          –1

          ↑

          ↓

          Я постарался очень кратко и лаконично объяснить, без излишних разглагольствований, в чем плюсы фреймворка. Дальше посетитель, если пожелает, изучит методы, примеры и прочие материалы (в меню есть ссылки на статьи на хабре) и сделает вывод.


          Какие задачи? Это главный вопрос — для чего пригоден, а для чего не пригоден Ваш фреймворк. Ответа процитированное не дает.

          Это фреймворк общего назначения для веба. Имеются в виду задачи, которые встречаются при разработке одностраничных веб приложений: работа с DOM элементами и данными. Основная сложность, которая возникает у начинающих программистов — это зависимость одного от другого, другого от третьего и пр.


          Меньше ошибок в коде

          С опытом разработик начинает писать код без ошибок, а Matreshka.js ускоряет этот процесс за счет того, что связывает одно с другим. Один раз задали правило «первое зависит от второго» и забыли. Это звучит очень абстрактно, посмотрите этот ролик. Он немного устарел (linkProps переименован в calc), но, в целом, отвечает на ваш вопрос.


          Эта возможность есть всегда и везде

          Скажем, если вы всё переписываете на Реакт, то придется переписать всё, без исключения. Иначе жизнь превращается в боль (по опыту знаю).


          Вы уверены, что не выдаете желаемое за действительное?

          Это не я сказал. Пользователи фреймворка раз документацию к фреймворку называли «лучшей документацией среди всех фреймворков».

          • 11 октября 2016 в 14:11

            0

            ↑

            ↓

            Под конец, в спешке, белиберду написал, сорри. Перефразирую: юзеры так считают, не я.

  • 11 октября 2016 в 13:44

    0

    ↑

    ↓

    Везде ES2015, но для модулей используете require, почему не import?

    • 11 октября 2016 в 13:49

      0

      ↑

      ↓

      Обновлю документацию, когда в V8 появится поддержка import. Это такой психолигический барьер: импорты еще ни одним движком не поддерживаются.

      В сорсах фреймворка, конечно же, используется import, вместо require.

  • 11 октября 2016 в 14:09

    0

    ↑

    ↓

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

  • 11 октября 2016 в 14:16

    0

    ↑

    ↓

    для больших и бесконечно расширяемых приложений

    Честно говоря, очень сомнительно. Я тут пару месяцев назад, выполняя ишъю, поковырялся немного в вашем фреймворке, много вопросов появилось и главный — это биндинги, которые сделаны таким образом, что при любом изменении вёрстки прийдётся каждый раз перепроверять все биндинги соответствующего вёрстке компонента. Есть какая-то уверенность, что в действительно большом проекте, над которым работают много разработчиков и который динамически дорабатывается, это начнёт настолько жёстко напрягать, что человека предложившего делать проект на матрёшке начнут просто избивать ногами)). Так же не понятно есть ли в матрёшке какая-то компонентная система? И если нет и нет какой-то альтернативы, то опять же непонятно о каких больших проектах вообще можно заикаться?
    На мой взгляд ниша фреймворка — маленькие представительские странички, но и в этой нише тот же angular-light явно выигрывает в удобстве.

    • 11 октября 2016 в 14:20 (комментарий был изменён)

      0

      ↑

      ↓

      Кстати, матрёшка в тесте предложенном в ишъю показала почти самый худший результат, хуже только Kefir.js. Во второй версии что-то изменилось?

      • 11 октября 2016 в 14:23

        0

        ↑

        ↓

        Да, там много всяких улучшений. Например calc и bindNode юзают debounce по умолчанию. Если обновите тест, буду благодарен.

        • 11 октября 2016 в 14:31

          0

          ↑

          ↓

          Ок, попозже обновлю)

    • 11 октября 2016 в 14:28

      0

      ↑

      ↓

      Ещё не понятно, что с условными биндингами? Например, в Rionite я могу написать так:



      Реально переписать на матрёшку?

      • 11 октября 2016 в 14:31

        0

        ↑

        ↓

        Условных байндингов в шаблонизаторе нету, иначе бы получился «очередной Ангуляр, но лучше». Байндинги должны быть в JavaScript коде (bindNode), за исключением самых простых (parseBinsings).

© Habrahabr.ru