Вообще я очень любвеобильный человек, особенно в плане различных плюшек. Но что-то во мне переворачивается, как только это вот (еще секунду назад мне искренне симпатичное) обретает ореол святости и становится предметом преклонения. В этот самый момент мой внутренний голос (да я слышу голоса) строго так мне говорит – «пойдем-ка мы отсюда!».
И такая вот хрень довольно часто происходит в нашем непростом, безумном, но весьма веселом мире технологий. В моем конкретном случае – в мире веб-разработки.
Позавчера был JQ. Ну полезная ей богу вещица. Но стали появляться специалисты искренне считающие, что JQ – это часть JavaScript и что без оного привязка событий к узлам вовсе невозможна (шепот в зале: потомушта там какие-то проблемы с кроссбраузерностью, цссс). И стали возводиться церкви с храмами, и стал JQ с икон на нас грешных смотреть, и книги писались с названием «Программируем JQuery» (JQ «программируем», Карл!).
А вчера был AngularJS. И был он великим, потому что стоит за ним… Ага он самый и стоит.
А сегодня вот ReactJS. Вообще наше все. Почему? Потому что он хороший, потому что он правильный, потому что он против прямого доступа к DOM. А почему? А потому что неправильно к DOM обращаться! А почему? Мальчик, иди в ж#пу!
Нет, Друзья, не подумайте – у меня вовсе не накипело – поверьте, я брал призовые места на конкурсах лояльности. Просто всему свое место и свое назначение. Палить из танка, пытаясь прихлопнуть муху – это как-то несерьезно. Но в какой-то момент мы начинаем именно это и наблюдать, когда под простенький проект подтягивается пол мегабайта JavaScript (с исходниками на TypeScript, потому что на JS уже никто не пишет и не спрашивайте «почему» — ответ был абзацем выше).
ReactJS действительно замечательная штукенция. И когда перед нами встала задача сделать приложение сблек джеком и шлю кучей виджетов с возможностью их тягать по рабочему столу (которых должно быть несколько), со всякими окошками, вкладками и прочей фигней, мы без колебаний выбрали ReactJS. Но если к нам приходит «просвещённый» заказчик с простеньким проектом и как бы намекает, что он (проект) должен быть на базе Angualr или ReactJS, то хочется всплакнуть, выпить, подраться и снова выпить в знак примирения. И знаете, почти всегда срабатывает, хотя в отдельных случаях приходится таки выписывать путевку в теплые края.
Меж тем мне с командой повезло. И как уже отмечалось в предыдущем посте, было мне позволено параллельно развивать простенький шаблонизатор. Хотя что-то мне подсказывает, что у компании на сей счет есть свои собственные сугубо эгоистичные интересы )).
В общем со времени его первого явления публики, а именно через пять месяцев, шаблонизатор претерпел существенные изменения. О чем и будет данная заметка (гул в зале: все расходимся, это не про ReactJS и даже не об Angular). Стойте! Я еще обязательно несколько раз скажу слово «React».
Итак, главное, что было сделано – большое объединение параллельных проектов. Теперь одна (немаленькая) библиотека объединяет в себе:
Я ни в коем случае не собираюсь Вас утомлять грудой сухого и скучного материала, а приведу лишь «пару» простых примеров, чтобы показать, о чем собственно речь.
Вот, например, нужна Вам банальная таблица. И есть у вас API некий, что данные в JSON выдает. Берем и рисуем отдельный HTML файлик с шаблоном. И стили нужные прикрепить не забываем.
Теперь, там, где сие необходимо, рендерим наш шаблон
Вот собственно и все (тута результат). И что особенно приятно, так это то, что шаблон можно открыть локально и отладить (спокойно, не спеша и не отвлекаясь) стили – ведь перед нами банальная HTML страница.
Конечно, можно данные и ручками ввести.
А можно прямо в разметку запихнуть – ничего не возбраняется, ведь главное, чтобы по любви.
С разметкой вообще довольно удобные вещи делать можно. Есть у Вас, к примеру, коллекция вкладок, весьма увесистая, как эта:
Поместив сие в шаблон, то есть в отдельный HTML файл:
В разметке (на странице) с этим шаблоном cможем делать так:
И читается легче и понятно интуитивно. Вкладки промо-сайта собственно так и сделаны.
Вся прелесть в том, что шаблоны все сохраняются локально на клиенте. То есть при повторной загрузки страницы, часть разметки этой самой страницы просто не будет загружена, а взята будет с клиента. Что также справедливо и для таких ресурсов как JS и CSS файлы. Исключительно в качестве эксперимента имеется и функция по полному кэшированию страницы, но это пока лишь эксперименты.
Еще можно, понятное дело, создавать свои контролеры под шаблон, наделяя его каким-то функционалом. Можно «на живую» менять значения внутри шаблона (в примере с таблицей – менять значения ячеек); модельки есть, события (непременно стандартные); ну и конечно, допускается получить доступ к DOM и наслаждаться им по мере знаний.
Много чего там можно делать, о чем почитать не возбраняется вот здесь (исключительно, если есть свободное время).
Однако отдельно замечу требования, которые выставлялись к Flex-Patterns при его разработке, что от части отражает возможности его использования.
Собственно, это и есть те три кита на которых базируется идея.
Ну и вновь о React’е (я ж обещал), ибо в прошлый раз было много к нему отсылок и «просьб» сравнить, хотя не сравниваются эти вещи, потому что разные весовые категории. Могу лишь поведать об отличиях.
А напоследок пара слов о будущем проекта (если кому интересно конечно). Проект вырос и его развитие все более и более трудоемкая задача. В ближайших планах – строгая диета, которая по моим оценкам позволит сбросить вес с ~200 кб до 120 – 170 кб (где первое есть голос оптимиста). Также в воздухе витает идея сделать тоже самое, но для JQ, что позволило бы получить на выходе библиотеку размером в 70 – 100 кб (не забывайте внутри не только шаблонизатор, а много еще чего, что по сути дублирует возможности JQ).
Однако без Вашей поддержки вряд ли обойтись. А! Испугались ))) Нет речь не о финансах. Просто мне выделят чуть больше времени под все это дело, если будут звездочки (я не вру, такое вот условие и выкатили). Для Вас – это клик, а для меня – дополнительная минутка на развитие этого создания. Спасибо заранее.
Счастья всем, добра и света.
ЗЫ. Учите React ;)
И такая вот хрень довольно часто происходит в нашем непростом, безумном, но весьма веселом мире технологий. В моем конкретном случае – в мире веб-разработки.
Позавчера был JQ. Ну полезная ей богу вещица. Но стали появляться специалисты искренне считающие, что JQ – это часть JavaScript и что без оного привязка событий к узлам вовсе невозможна (шепот в зале: потомушта там какие-то проблемы с кроссбраузерностью, цссс). И стали возводиться церкви с храмами, и стал JQ с икон на нас грешных смотреть, и книги писались с названием «Программируем JQuery» (JQ «программируем», Карл!).
А вчера был AngularJS. И был он великим, потому что стоит за ним… Ага он самый и стоит.
А сегодня вот ReactJS. Вообще наше все. Почему? Потому что он хороший, потому что он правильный, потому что он против прямого доступа к DOM. А почему? А потому что неправильно к DOM обращаться! А почему? Мальчик, иди в ж#пу!
Нет, Друзья, не подумайте – у меня вовсе не накипело – поверьте, я брал призовые места на конкурсах лояльности. Просто всему свое место и свое назначение. Палить из танка, пытаясь прихлопнуть муху – это как-то несерьезно. Но в какой-то момент мы начинаем именно это и наблюдать, когда под простенький проект подтягивается пол мегабайта JavaScript (с исходниками на TypeScript, потому что на JS уже никто не пишет и не спрашивайте «почему» — ответ был абзацем выше).
ReactJS действительно замечательная штукенция. И когда перед нами встала задача сделать приложение с
Меж тем мне с командой повезло. И как уже отмечалось в предыдущем посте, было мне позволено параллельно развивать простенький шаблонизатор. Хотя что-то мне подсказывает, что у компании на сей счет есть свои собственные сугубо эгоистичные интересы )).
В общем со времени его первого явления публики, а именно через пять месяцев, шаблонизатор претерпел существенные изменения. О чем и будет данная заметка (гул в зале: все расходимся, это не про ReactJS и даже не об Angular). Стойте! Я еще обязательно несколько раз скажу слово «React».
Итак, главное, что было сделано – большое объединение параллельных проектов. Теперь одна (немаленькая) библиотека объединяет в себе:
- Аналог RequireJS
- Загрузчик ресурсов (вроде CSS файлов)
- Контролер кэша
- Всякий базовый функционал (вроде AJAX запросов, инструментов по работе с DOM, CSS и прочее)
- Ну и шаблонизатор, речь то о нем
Я ни в коем случае не собираюсь Вас утомлять грудой сухого и скучного материала, а приведу лишь «пару» простых примеров, чтобы показать, о чем собственно речь.
Вот, например, нужна Вам банальная таблица. И есть у вас API некий, что данные в JSON выдает. Берем и рисуем отдельный HTML файлик с шаблоном. И стили нужные прикрепить не забываем.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Flex.Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="pattern.css" />
</head>
<body>
<table data-type="Demo.Table">
<tr>
<th>{{titles.column_0}}</th>
<th>{{titles.column_1}}</th>
<th>{{titles.column_2}}</th>
<th>{{titles.column_3}}</th>
</tr>
<tr {{[rows]}}>
<td>{{column_0}}</td>
<td>{{column_1}}</td>
<td>{{column_2}}</td>
<td>{{column_3}}</td>
</tr>
</table>
</body>
</html>
Теперь, там, где сие необходимо, рендерим наш шаблон
_patterns.get({
//Ссылка на шаблон
url : '/components/table.simple/component.html',
//Указание куда "крепить"
node : document.body,
//Собственно контент
hooks : {
titles : {
column_0: 'Column #0',
column_1: 'Column #1',
column_2: 'Column #2',
column_3: 'Column #3',
},
//Ссылка на данные для строк таблицы
rows: _patterns.url('/examples/json/table.json')
},
}).render();
Вот собственно и все (тута результат). И что особенно приятно, так это то, что шаблон можно открыть локально и отладить (спокойно, не спеша и не отвлекаясь) стили – ведь перед нами банальная HTML страница.
Конечно, можно данные и ручками ввести.
var data_source = [];
for (var i = 0; i < 100; i += 1) {
data_source.push({
column_0: (Math.random() * 1000).toFixed(4),
column_1: (Math.random() * 1000).toFixed(4),
column_2: (Math.random() * 1000).toFixed(4),
column_3: (Math.random() * 1000).toFixed(4),
});
}
_patterns.get({
url : '/patterns/table/single/pattern.html',
node : document.body,
hooks : {
titles: {
column_0: 'Column #0',
column_1: 'Column #1',
column_2: 'Column #2',
column_3: 'Column #3',
},
rows: data_source
}
}).render();
А можно прямо в разметку запихнуть – ничего не возбраняется, ведь главное, чтобы по любви.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--BEGIN: Patterns definitions-->
<link rel="pattern" name="my_table" src="/html/table/template.html" data-hooks="rows, c_0, c_1, c_2, c_3" />
<!--END: Patterns definitions-->
</head>
<body>
<my_table>
<rows>
<c_0>0.0</c_0> <c_1>0.1</c_1> <c_2>0.2</c_2> <c_3>0.3</c_3>
<c_0>1.0</c_0> <c_1>1.1</c_1> <c_2>1.2</c_2> <c_3>1.3</c_3>
<c_0>2.0</c_0> <c_1>2.1</c_1> <c_2>2.2</c_2> <c_3>2.3</c_3>
<c_0>3.0</c_0> <c_1>3.1</c_1> <c_2>3.2</c_2> <c_3>3.3</c_3>
<c_0>4.0</c_0> <c_1>4.1</c_1> <c_2>4.2</c_2> <c_3>4.3</c_3>
</rows>
</my_table>
</body>
С разметкой вообще довольно удобные вещи делать можно. Есть у Вас, к примеру, коллекция вкладок, весьма увесистая, как эта:
<div class="tabs-container">
<div class="tabs-buttons">
<a class="tab-button">Tab 0</a>
<a class="tab-button">Tab 1</a>
<a class="tab-button">Tab 2</a>
</div>
<div class="tabs-content">
<div class="tab-content">
<p class="tab-content">Tab content 0</p>
</div>
<div class="tab-content">
<p class="tab-content">Tab content 1</p>
</div>
<div class="tab-content">
<p class="tab-content">Tab content 2</p>
</div>
</div>
</div>
Поместив сие в шаблон, то есть в отдельный HTML файл:
<div class="tabs-container">
<div class="tabs-buttons">
<a class="tab-button" {{[buttons]}} onclick="{{@onClick}}">{{button}}</a>
</div>
<div class="tabs-content">
<div class="tab-content" {{[tabs]}}>{{tab}}</div>
</div>
</div>
В разметке (на странице) с этим шаблоном cможем делать так:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--BEGIN: Patterns definitions-->
<link rel="pattern" name="tabs" src="/html/tabs/template.html" data-hooks="buttons, tabs, button, tab" />
<!--END: Patterns definitions-->
</head>
<body>
<tabs>
<buttons>
<button>Tab 0</button>
<button>Tab 2</button>
<button>Tab 3</button>
</buttons>
<tabs>
<tab><p>Content of tab 0</p></tab>
<tab><p>Content of tab 1</p></tab>
<tab><p>Content of tab 2</p></tab>
</tabs>
</tabs>
</body>
И читается легче и понятно интуитивно. Вкладки промо-сайта собственно так и сделаны.
Вся прелесть в том, что шаблоны все сохраняются локально на клиенте. То есть при повторной загрузки страницы, часть разметки этой самой страницы просто не будет загружена, а взята будет с клиента. Что также справедливо и для таких ресурсов как JS и CSS файлы. Исключительно в качестве эксперимента имеется и функция по полному кэшированию страницы, но это пока лишь эксперименты.
Еще можно, понятное дело, создавать свои контролеры под шаблон, наделяя его каким-то функционалом. Можно «на живую» менять значения внутри шаблона (в примере с таблицей – менять значения ячеек); модельки есть, события (непременно стандартные); ну и конечно, допускается получить доступ к DOM и наслаждаться им по мере знаний.
Много чего там можно делать, о чем почитать не возбраняется вот здесь (исключительно, если есть свободное время).
Однако отдельно замечу требования, которые выставлялись к Flex-Patterns при его разработке, что от части отражает возможности его использования.
- первое и самое важное – только стандартный HTML, только текущий стандарт JS. То есть любой шаблон – это просто HTML файл и никаких прибул.
- это чистое front-end решение, и, хотя шаблоны можно монтировать в разметку, Flex-Pattern является клиентским решением, а не серверным.
- полная независимость от чего-либо. Достаточно подключить только Flex-Patterns, чтобы начать с ним работу и получить дополнительный базовый функционал (о котором было сказано выше).
Собственно, это и есть те три кита на которых базируется идея.
Ну и вновь о React’е (я ж обещал), ибо в прошлый раз было много к нему отсылок и «просьб» сравнить, хотя не сравниваются эти вещи, потому что разные весовые категории. Могу лишь поведать об отличиях.
- React нуждается в куче
обслуживающего персоналадополнительного окружения (для нормальной и комфортной работы). Flex-Patterns полностью самодостаточен (и это не считая возможности создавать модули, наличия базового функционала вроде того, что JQ имеет и иных плюшек) – подцепил и работай.
- React’у комфортно с npm, а Flex-Patterns даже не знает, что это такое.
- React использует нечто похоже на HTML, но не HTML. Flex-Patterns основывается только на HTML и не требует знаний о defaultValue.
- React в целом довольно недоверчив к разработчику и во многом его ограничивает (что, наверное, имеет свои плюсы). Flex-Patterns полностью доверяет тому, кто его
приютилподключил к странице.
- React работает шустрее. Flex-Patterns в целом на 25-35% медленнее, но «заметно» это на небольших шаблонах (скажем на таблице в 1000 строк), где скорость отрисовки у React 100 – 120 ms., а у Flex-Patterns 150 – 200 ms. Если же говорить об огромных объектах (вроде таблицы в 10 000 строк), то результат практически идентичен.
- Памяти «кушают» оба соизмеримо.
- React «мешает» разметку и логику, меж тем как Flex-Patterns настойчиво пытается ее разделить и раскидать по файликам (что может показаться неудобным), не допуская никакого кода внутри HTML.
- React доверяет кэширование браузеру, Flex-Patterns паранойдально кэширует шаблоны самостоятельно.
- Над React трудится «чуть» больше одного человека, над Flex-Patterns «чуть» меньше.
- В React есть святое понятие state, а Flex-Patterns атеист и грешить разрешает.
А напоследок пара слов о будущем проекта (если кому интересно конечно). Проект вырос и его развитие все более и более трудоемкая задача. В ближайших планах – строгая диета, которая по моим оценкам позволит сбросить вес с ~200 кб до 120 – 170 кб (где первое есть голос оптимиста). Также в воздухе витает идея сделать тоже самое, но для JQ, что позволило бы получить на выходе библиотеку размером в 70 – 100 кб (не забывайте внутри не только шаблонизатор, а много еще чего, что по сути дублирует возможности JQ).
Однако без Вашей поддержки вряд ли обойтись. А! Испугались ))) Нет речь не о финансах. Просто мне выделят чуть больше времени под все это дело, если будут звездочки (я не вру, такое вот условие и выкатили). Для Вас – это клик, а для меня – дополнительная минутка на развитие этого создания. Спасибо заранее.
Счастья всем, добра и света.
ЗЫ. Учите React ;)