Matreshka.js 2 — найпростіший фреймворк у Всесвіті

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

» Репозиторій
» Сайт*
Якщо сторінка зламана, оновити її допомогою комбінації 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
    ).
Дякую за увагу!
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.