- PVSM.RU - https://www.pvsm.ru -
Веб-компоненты — новый веб стандарт, разрабатываемый Google. Некоторые считают, что он должен стать трендом в ближайшее время. И я, попробовав его в деле, пожалуй соглашусь с таким мнением.
Подробное описание стандарта: habrahabr.ru/post/152001/ [1]
Разработчики дарта не стали ждать и начали реализовывать поддержку веб-компонентов уже сейчас. После того как я об этом узнал, мой интерес к дарту усилился в двойне. Изучив статью с примерами [2], мне показалось что с веб-компонентами можно творить чудеса:
Решил опробовать. У меня как раз был мини-проект: тайм трекер. Я написал его исключительно для себя с целью познакомиться с дартом поближе. (Знакомство, кстати, прошло «так себе». На то время и сам дарт и его редактор были очень сырыми.)
Код: github.com/Leksat/time_tracker [3]
Live версия: leksat.me/sites/default/files/time_tracker/web/out/_main.html.html [4]
В качестве стартовой точки программы служит глобальный объект timeTracker
. Главные его обязанности: загрузка и сохранение задач в localStorage. Свойство tasks
содержит список задач, объектов типа Task
.
А вот и код страницы с веб-компонентами.
<div id="main-wrapper" class="{{timeTracker.wrapperClass}}">
<div id="time-tracker">
<div id="tools">
<button data-action="click:timeTracker.createNewTask">New Task</button>
<button data-action="click:timeTracker.deleteAllTasks">Clear all</button>
</div>
<div id="tasks">
<template iterate='task in timeTracker.tasks'>
<div class="task">
<input class="name" type="text" data-bind="value:task.name" />
<input class="time" type="text" data-bind="value:task.time" disabled="{{task.working}}" />
<button data-action="click:task.toggleState">{{task.toggleStateLabel}}</button>
<button data-action="click:task.delete">Delete</button>
</div>
</template>
</div>
</div>
</div>
На первый взгляд выглядит как обычный шаблон. Но только на первый.
data-action="click:timeTracker.createNewTask"
навешивает onclick
обработчик.data-bind="value:task.name"
связывает связывает свойство name
объекта task
со значением свойства value
элемента input
. Самое приятное, что делается это двунаправленно. При изменении значения пользователем в браузере, свойство объекта в программе будет изменено, и так же наоборот, если свойство объекта изменится в программе, значение элемента input
обновится автоматически. Стоит заметить, что привязка происходит к конктеному экземпляру объекта. То же самое справелливо и для коллбэков.<template iterate='task in timeTracker.tasks'>
свяжет каждый элемент типа Task в списке со своим шаблоном. И будет следить за изменениями в timeTracker.tasks удаляя или добавляя новые элементы «на лету». Никаких больше лишних обработчиков событий. Все делается само.
Даже в самых простых моментах поведение сильно отличается от «шаблонного». Например, class="{{timeTracker.wrapperClass}}"
не просто присваивает аттрибуту class
значение. Если с помошью инструментов браузера добавить еще один класс, ничего не нарушится, добавленный класс будет «жить» рядом с изначальным. А изначальный будет меняться так же как и раньше. Попробуйте сами, если мое объяснение непонятно.
В итоге, в коде программы нет ни одного момента манипуляций с DOM-элементами. В качестве примера, вот кусок кода [5] который раньше создавал новую задачу. HTML код задачи копировался из шаблона, инициализировались значения input
элементов, навешивались onclick
и onchange
события. После перехода на веб-компоненты, все это было благополучно удалено.
Из неудобств можно отметить разве что необходимость компиляции шаблонов. Но, над автоматизацией этого уже работают.
Если сложить удачный опыт использования веб-компонентов с последними новостями [6], получается весьма хорошая перспектива. Все основные фичи дарта уже реализованны в той или иной степени. Теперь дело только за баг-фиксами, ускорением виртуальной машины и уменьшением генерируемого javascript кода.
Автор: Leksat
Источник [7]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/dart/20689
Ссылки в тексте:
[1] habrahabr.ru/post/152001/: http://habrahabr.ru/post/152001/
[2] статью с примерами: http://www.dartlang.org/articles/dart-web-components/
[3] github.com/Leksat/time_tracker: https://github.com/Leksat/time_tracker
[4] leksat.me/sites/default/files/time_tracker/web/out/_main.html.html: http://leksat.me/sites/default/files/time_tracker/web/out/_main.html.html
[5] вот кусок кода: https://gist.github.com/4112980
[6] последними новостями: http://habrahabr.ru/post/155069/
[7] Источник: http://habrahabr.ru/post/159567/
Нажмите здесь для печати.