- PVSM.RU - https://www.pvsm.ru -

Вышла первая версия фреймворка Matreshka.js

image [1]
Репозиторий на Github [2]

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

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

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

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

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

В первую очередь, о важных изменениях во фреймворке

Последняя волна переименований. Самое важное из них: bindElement из-за длинного имени (11 символов) был переименован в bindNode [3] (8 символов).

Поддержка всех без исключения полей ввода, включая элементы из спецификации HTML5. bindNode [3] больше не нуждается в третьем аргументе, в случае, если программист желает связать значение свойства объекта с каким-нибудь <input type="datetime-local" class="my-input">.

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

Поддержка цикла for..of для Matreshka.Array [4] и Matreshka.Object [5]. Если ваше приложение не нуждается в поддержке Internet Explorer либо если вы используете транспилер (например, Babel [6]), можно смело пробовать новый, крутой синтаксис циклов из ECMAScript 6.

for(let item of this) {
 ...
}

__this__ переименован в sandbox. Теперь ключ, отвечающий за привязку песочницы, так и называется “песочница”.

this.bindNode( 'sandbox', '.app' );

Появился новый кастомный селектор ‘:sandbox’. Раньше нужно было использовать не самый удобный синтаксис, если требовалось выбрать песочницу или элемент внутри песочницы.

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

Теперь это можно сделать намного элегантнее:

this.bindNode( 'x', ':sandbox .my-x-node' );

Появился новый селектор ‘:bound(KEY)’. В приложениях часто нужно привязывать элементы внутри других привязанных элементов, дабы не дублировать селекторы. Вот так это делалось раньше:

// Vanilla
this.bindNode( 'y', this.bound( 'x' ).querySelector( '.my-y-node' ) );

Или так:

// jQuery
this.bindNode( 'y', this.$bound( 'x' ).find( '.my-y-node' ) );

Теперь то же самое можно сделать так:

this.bindNode( 'y', ':bound(x) .my-y-node' );

Полное совпадение методов Matreshka.Array [4] со встроенными методами Array. По многочисленным просьбам push и unshift теперь возвращают длину массива, вместо ссылки на массив, как и в оригинальном Array.prototype. Единственный метод, который до сих пор отличается от встроенного — это forEach. Он возвращает “себя” вместо undefined.

Новые методы Matreshka.Array. При разработке приложений на базе Матрешки иногда требуется передать какие-нибудь данные в обработчик события изменения массива.

Так как все методы встроенного Array работают аналогично встроенным, у нас нет возможности передать еще один аргумент при вызове этих методов.

// каждый аргумент метода вставляется в массив
this.push( 1, 2, 3 );

Теперь каждый метод, изменяющий массив и позаимствованный из оригинального Array.prototype имеет двойника с именем МЕТОД_ [7]. Нижнее подчеркивание указывает на то, что последним аргументом являются произвольные данные для обработчика события или служебные флаги.

this.on( 'modify', function( evt ) {
	console.log( evt.customData );
});

this.push_( 1, 2, 3, {
	customData: 42
});

Если требуется вставить элемент, не вызывая обработчик, нужно передать специальный флаг silent: true в объект события.

this.push_( 1, 2, 3, {
	silent: true
});

Как следствие, методы silentPush, silentPop, silentSplice… были удалены из фреймворка из-за отсутствия в них необходимости.

Поддержка Babel [6]. После исправления единственного бага, связанного со строгим режимом, Матрешка стала доступна для использования вместе с компилятором Babel. Кроме общих синтаксических сладостей, Матрешка поддерживает циклы for..of, о которых писалось выше, и наследование с помощью классов из ECMAScript 6 (благодаря прототипному наследованию, используемого Матрешкой с первого коммита на Github), вместо наследования функцией Class [8], которая входит в комплект Матрешки.

Обратите внимание. Если приложение нуждается в поддержке Internet Explorer 8, использование функции Class обязательно. Функция использует специальные хаки, которые включают геттеры и сеттеры для объектов-экземпляров Матрешки.

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

Об остальных изменениях можно узнать на сайте [9].

Обновленная документация

Как показывает практика, камнем преткновения для любой библиотеки или фреймворка является документация. Скажем честно, документация, на момент выходя нулевых версий, была далеко не идеальной. Вещи, типа itemRenderer [10], не были описаны вовсе (был приведен малопонятный пример и более ничего).

Теперь в документации описаны все без исключения свойства и методы, а текст, кроме английского [1], доступен и на на русском языке [11].

С чего начинать?

Пытаясь изучить новый инструмент, включающий в себя много деталей, часто не понимаешь, с чего начать своё обучение. Этим грешит большинство фреймворков: огромное количество свойств, методов, функций, директив… может расстроить или вовсе отпугнуть новичка.

Эта проблема была решена очень просто: самые важные методы и свойства помечены красным флажком image. Те свойства и методы, которые не имеют такого флажка — необязятельны к изучению. Например, крутой метод linkProps [12], добавляющий зависимость одного свойства от других, можно вовсе не использовать, ограничившись прописанным вручную обработчиком события.

Адаптивная верстка и чтение оффлайн

image

Документацию теперь удобно использовать не только с настольных компьютеров и ноутбуков, но и с мобильных телефонов и планшетов. Сайт работает оффлайн, благодаря использованию HTML5 cache [13]. Эта страница теперь может стать полезным чтивом, в том числе, в дороге или при отсутствии интернета.

Репорт об опечатках

image

Сообщить об опечатке или ошибке можно было и раньше, но теперь у окна опечатки появился дизайн :) Можно выбрать сомнительный текст на сайте и нажать Ctrl+Enter. После этого откроется модальное окно с формой.
Подробнее о том, как сделать окно опечаток и ошибок на сайте, используя Google Forms, можно прочесть здесь [14].

Комментарии прямо в документации

image

У каждого элемента документации (класс, метод, свойство) есть кнопка “задать вопрос”, которая вызывает Muut Comments [15] (почему, расскажу ниже). Вам не нужно искать соответствующий форум или создавать тикет на Github, можно задать вопрос по части документации прямо из самой документации.

В первых двух версиях использовался Disqus [16], а, затем, Facebook Comments [17]. Обе системы, к сожалению, не оправдали возложенных на них ожиданий.

Disqus постоянно путает идентификаторы и адреса страниц, комментарии появляются не там, где нужно. Админпанель не позволяет удалять обсуждения, а изменение ссылок вручную не помогает. Это старая проблема Disquss, которую решить пока нельзя (разработчики рекомендуют убедиться в правильности объявленных переменных, которые часто просто-напросто игнорируются системой). Причина, скорее всего, кроется в том, что обсуждения находятся на одной странице, а Disquss с этим испытывает огромные проблемы. Как следствие, было решено перейти на другое бесплатное решение, от которого тоже пришлось отказаться.

Facebook Comments, на первый взгляд, показался неплохим решением задачи. Разработчик — многомиллиардная компания; многие зарегистрированы в этой соцсети; не нужно логиниться, чтобы написать комментарий; идентификаторы не путаются… Проблема одна: уведомления. Facebook Comments не умеет сообщать о новых комментариях модераторам (!). Для обхода был написан костыль, использующий Google Forms в качестве системы уведомлений. Но это полбеды. Самое неприятное — уведомления об ответах на комментарий совершенно неинформативны.

image
Упомянул в комментарии… В каком? Где?

В общем, пришлось покопаться еще…

IntenseDebate [18]

  • Саппорт не отвечает на вопросы.
  • Сам виджет выглядит устаревшим.
  • Создается впечатление, что проект больше не поддерживается.

Cackle [19]

  • Комментарии для каждого сайта стоят 500 рублей/год. Так как документации две, прийдется раскошелиться на два пакета. Если появится еще одна версия документации прийдется снова достать кошелек.
  • Название. Очень тяжело себя убедить пользоваться чем-то с названием “какл”.

SolidOpinion [20]

  • Саппорт не отвечает на вопросы.
  • Проект выглядит заброшенным.

В итоге, самым адекватным (но не идальным) решением оказался неизвестный мне ранее Muut. У них есть бесплатная подписка, хороший саппорт, нет проблем с идентификаторами (опять я о них). Единственный минус — всё те же уведомления об ответах. Они приходят только тогда, когда у подписавшегося пользователя не открыто ни одной вкладки с Muut. Кроме этого, уведомления для админа отсутствуют (хотя заявлены, даже флажок есть в настройках). Приходится подписываться на все комментарии вручную и, на всякий случай, следить за новыми комментариям, заходя в админку. Посмотрим, что из этого выйдет. Пока что, пытаюсь бороться с саппортом, чтоб исправили некоторые неприятные баги.

Всё подряд или по одному? *

* Классу, методу, свойству

image

Новый сайт Матрешки был создан после взвешивания всех плюсов и минусов документаций к другим популярным и не очень популярным фреймворкам. Первым вопросом, который требовалось решить был выбор между двумя подходами в структурировании документации: размещение всех материалов на одной странице, либо же разбиение статей на отдельные страницы. Решением стал переключатель режимов (в верхней части меню есть кнопки “Все подряд” и “По одному”), оставляющий выбор на усмотрение посетителя.

«Материальный» дизайн

На сайте используется CSS фреймворк Matreialize [21]. К сожалению, все анимации в этом фреймворке основывались на манипуляциях с DOM, которые не благотворно влияют на производительность страницы (особенно на мобильных устройствах), поэтому, был использован только CSS и только необходимые части. Код, отвечающий за анимации (например, за выезжающее меню) пришлось переписать. В следующих версиях Materialize, надеюсь, исправят большинство подобных недоразумений.

Другие новости

  • Вся документация была вынесена из js файлов в отдельный репозиторий [22]. Теперь .jsdoc файлы можно подключить в IDE отдельно.
  • Обновлен код TodoMVC и создана русскоязычная версия документации к коду, а исходник обрел собственный репозиторий [23].
  • Исходник к сайту и и генератору документации поменял своё местоположение [24].
  • Матрешка теперь размещена на двух CDN: cdnjs [25] и jsdelivr [26] (очень рекомендую этот CDN разработчикам библиотек и других скриптов, и спасибо jimaek [27], за помощь и быструю реакцию на вопросы).

Отдельное спасибо designiac [28] который разработал новый логотип и принимал участие в создании сайта и Rendol [29], который помогает развивать проект, внося свои идеи и сообщая о неочевидных проблемах.

Следите за новостями в блоге. В среду на Хабре выйдет краткий туториал к Матрешке.

Спасибо за внимание. Всем добра.

Автор: Finom

Источник [30]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/88023

Ссылки в тексте:

[1] Image: http://matreshka.io/

[2] Репозиторий на Github: https://github.com/finom/matreshka

[3] bindNode: http://ru.matreshka.io/#Matreshka-bindNode

[4] Matreshka.Array: http://ru.matreshka.io/#Matreshka.Array

[5] Matreshka.Object: http://ru.matreshka.io/#Matreshka.Object

[6] Babel: http://babeljs.io/

[7] МЕТОД_: http://ru.matreshka.io/#Matreshka.Array-METHOD_

[8] Class: http://ru.matreshka.io/#Class

[9] можно узнать на сайте: http://ru.matreshka.io/#whats-new

[10] itemRenderer: http://ru.matreshka.io/#Matreshka.Array-itemRenderer

[11] на русском языке: http://ru.matreshka.io/

[12] linkProps: http://ru.matreshka.io/#Matreshka-linkProps

[13] HTML5 cache: http://habrahabr.ru/post/71939/

[14] можно прочесть здесь: http://habrahabr.ru/post/234279/#typo

[15] Muut Comments: https://muut.com/

[16] Disqus: https://disqus.com/

[17] Facebook Comments: https://developers.facebook.com/docs/plugins/comments

[18] IntenseDebate: http://intensedebate.com/

[19] Cackle: http://cackle.ru/

[20] SolidOpinion: http://solidopinion.com/

[21] Matreialize: http://materializecss.com/

[22] отдельный репозиторий: https://github.com/finom/matreshka_docs

[23] собственный репозиторий: https://github.com/finom/matreshka_todomvc

[24] поменял своё местоположение: https://github.com/finom/matreshka_website

[25] cdnjs: https://cdnjs.com/libraries/matreshka

[26] jsdelivr: http://www.jsdelivr.com/#!matreshka

[27] jimaek: http://habrahabr.ru/users/jimaek/

[28] designiac: http://habrahabr.ru/users/designiac/

[29] Rendol: http://habrahabr.ru/users/rendol/

[30] Источник: http://habrahabr.ru/post/253909/