Dart: web components in action

Web Components is a new web standard being developed by Google. Some believe that it should become a trend soon. And I, having tried it in business, perhaps agree with this opinion.

Detailed description of the standard: habrahabr.ru/post/152001



The developers of Darth did not wait and began to implement support for web components right now. After I found out about this, my interest in dart intensified in twofold. After studying the article with examples , it seemed to me that with web components you can work wonders:

• the amount of code decreases,
• DOM manipulations are removed from the code,
• Only logic remains in the code.

I note that while this is not about native support of web components as a web standard, but about their implementation by means of Darth. Perhaps this implementation will be a kind of fallback for older browsers.

')

This post will not surprise those who are familiar with knockout.js . It is almost the same, but in native JS.

Real experience

I decided to try it. I just had a mini-project: a time tracker. I wrote it exclusively for myself in order to get acquainted with the gift more closely. (The acquaintance, by the way, was “so-so.” At that time, both the dart and its editor were very raw.)



Code: github.com/Leksat/time_tracker

Live version: leksat.me/sites/default/files/time_tracker/web/out/_main.html.html



The global timeTracker object serves as the starting point of the program. His main responsibilities are loading and saving tasks to localStorage. The tasks property contains a list of tasks, objects of type Task .



And here is the page code with the web components.



EDIT: The code is no longer relevant .

 <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> 

At first glance it looks like a regular template. But only at first.

• data-action="click:timeTracker.createNewTask" hangs onclick handler.
• data-bind="value:task.name" connects it associates the name property of the task object with the value of the value of the input element. The best part is that this is done bi-directionally. When the user changes the value in the browser, the property of the object in the program will be changed, and vice versa, if the property of the object changes in the program, the value of the input element is updated automatically. It is worth noting that the binding occurs to the object instance. The same is true for callbacks.
• Task . timeTracker.tasks " ". . .
  
  It turns out a very good perspective. All the main features of Darth have already been implemented to one degree or another. Now it’s only a matter of bug fixes, acceleration of the virtual machine and reduction of the generated javascript code.