- PVSM.RU - https://www.pvsm.ru -
[1]
Репозиторий на Github [2]
Всем привет! Спешу сообщить радостную новость. Наконец, вышла первая (1.0) версия фреймворка Матрешка. В этом посте я расскажу о самых важных изменениях во фреймфорке, о новом сайте и русскоязычной документации.
Напомню, Матрешка — JavaScript фреймворк для создания одностраничных приложений, соблюдающий несколько важных принципов:
Матрешка реализует простой синтаксис двустороннего связывания данных и активно использует акцессоры (геттеры и сеттеры).
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].
Пытаясь изучить новый инструмент, включающий в себя много деталей, часто не понимаешь, с чего начать своё обучение. Этим грешит большинство фреймворков: огромное количество свойств, методов, функций, директив… может расстроить или вовсе отпугнуть новичка.
Эта проблема была решена очень просто: самые важные методы и свойства помечены красным флажком . Те свойства и методы, которые не имеют такого флажка — необязятельны к изучению. Например, крутой метод linkProps [12], добавляющий зависимость одного свойства от других, можно вовсе не использовать, ограничившись прописанным вручную обработчиком события.
Документацию теперь удобно использовать не только с настольных компьютеров и ноутбуков, но и с мобильных телефонов и планшетов. Сайт работает оффлайн, благодаря использованию HTML5 cache [13]. Эта страница теперь может стать полезным чтивом, в том числе, в дороге или при отсутствии интернета.
Сообщить об опечатке или ошибке можно было и раньше, но теперь у окна опечатки появился дизайн :) Можно выбрать сомнительный текст на сайте и нажать Ctrl+Enter. После этого откроется модальное окно с формой.
Подробнее о том, как сделать окно опечаток и ошибок на сайте, используя Google Forms, можно прочесть здесь [14].
У каждого элемента документации (класс, метод, свойство) есть кнопка “задать вопрос”, которая вызывает Muut Comments [15] (почему, расскажу ниже). Вам не нужно искать соответствующий форум или создавать тикет на Github, можно задать вопрос по части документации прямо из самой документации.
В первых двух версиях использовался Disqus [16], а, затем, Facebook Comments [17]. Обе системы, к сожалению, не оправдали возложенных на них ожиданий.
Disqus постоянно путает идентификаторы и адреса страниц, комментарии появляются не там, где нужно. Админпанель не позволяет удалять обсуждения, а изменение ссылок вручную не помогает. Это старая проблема Disquss, которую решить пока нельзя (разработчики рекомендуют убедиться в правильности объявленных переменных, которые часто просто-напросто игнорируются системой). Причина, скорее всего, кроется в том, что обсуждения находятся на одной странице, а Disquss с этим испытывает огромные проблемы. Как следствие, было решено перейти на другое бесплатное решение, от которого тоже пришлось отказаться.
Facebook Comments, на первый взгляд, показался неплохим решением задачи. Разработчик — многомиллиардная компания; многие зарегистрированы в этой соцсети; не нужно логиниться, чтобы написать комментарий; идентификаторы не путаются… Проблема одна: уведомления. Facebook Comments не умеет сообщать о новых комментариях модераторам (!). Для обхода был написан костыль, использующий Google Forms в качестве системы уведомлений. Но это полбеды. Самое неприятное — уведомления об ответах на комментарий совершенно неинформативны.
Упомянул в комментарии… В каком? Где?
В общем, пришлось покопаться еще…
IntenseDebate [18]
Cackle [19]
SolidOpinion [20]
В итоге, самым адекватным (но не идальным) решением оказался неизвестный мне ранее Muut. У них есть бесплатная подписка, хороший саппорт, нет проблем с идентификаторами (опять я о них). Единственный минус — всё те же уведомления об ответах. Они приходят только тогда, когда у подписавшегося пользователя не открыто ни одной вкладки с Muut. Кроме этого, уведомления для админа отсутствуют (хотя заявлены, даже флажок есть в настройках). Приходится подписываться на все комментарии вручную и, на всякий случай, следить за новыми комментариям, заходя в админку. Посмотрим, что из этого выйдет. Пока что, пытаюсь бороться с саппортом, чтоб исправили некоторые неприятные баги.
* Классу, методу, свойству
Новый сайт Матрешки был создан после взвешивания всех плюсов и минусов документаций к другим популярным и не очень популярным фреймворкам. Первым вопросом, который требовалось решить был выбор между двумя подходами в структурировании документации: размещение всех материалов на одной странице, либо же разбиение статей на отдельные страницы. Решением стал переключатель режимов (в верхней части меню есть кнопки “Все подряд” и “По одному”), оставляющий выбор на усмотрение посетителя.
На сайте используется CSS фреймворк Matreialize [21]. К сожалению, все анимации в этом фреймворке основывались на манипуляциях с DOM, которые не благотворно влияют на производительность страницы (особенно на мобильных устройствах), поэтому, был использован только CSS и только необходимые части. Код, отвечающий за анимации (например, за выезжающее меню) пришлось переписать. В следующих версиях Materialize, надеюсь, исправят большинство подобных недоразумений.
Отдельное спасибо 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/
Нажмите здесь для печати.