— Pixels Commander

[:en]Reliable web components with React.js and ReactiveElements[:ru]Веб компоненты уже сегодня с React.js и ReactiveElements[:]

[:en]Better composition and code reusing are top important topics of modern front-end development. Great solution for this is web-components technology but it requires few polyfills in order to work properly in modern browsers. This impacts performance and reliability. ReactiveElements allows to use React.js for web-components definition, avoid including most of polyfills and build project with web-components right now.

UPD: You may use MVC Elements in order to create Web Components of Angular and Backbone views.

There are a lot of MVC framevorks and every of them have pros and cons. Common con is impossibility to share code between them correctly. But what if you already have a codebase built with some framework and for current project would like to use another one? What if part of your project needs another approach comparing to what your current framework proposes?

Standradized solution for this could be web-component platform which allows to reuse code and compose at HTML specification level.

Basis for web-components is custom element specification which enpowers front-end with the possibility to use HTML tags having developer defined behaviour and content. They could be <touch-galery> tag which speaks for itself or <broadcast-list> for displaying TV schedule.

Custom elements is the most important part of web-components however few more features needed to make technology complete. They are Shadow DOM needed to keep component`s structure as a black box without influencing the rest of page. And there is HTML import to include web-components and their templates to a project.

We see that web-components technology consists of three parts:

• HTML Templates;
• Custom elements;
• Shadow DOM;
• HTML import.

Most of browsers do not support all three specifications and need few polyfills in order to work properly. Ofcourse using such amount of polyfills impact reliability and performance. This is the reason why web-components are not being used widely even taking into accout great interest of front-end community.

This weakness could be minimized by using Facebook React library for web-components definition.

Cons of React:

• React is designed to be component development framework;
• No manual DOM changes, React components are black boxes from DOM perspective;
• Virtual DOM tree and optimized rendering;
• Include via ordinary JS files linking.

This means that React allows to avoid using three of four polyfills. It allows to import components in well known manner and also makes using Shadow DOM useless because it manages DOM without a risk for other components be affected.

ReactiveElements is a tiny wrapper for React widgets which allows to use them as web-components. It uses only Custom Elements part of specification which could be easily achieved by using Mozilla X-Tag or Google Polymer and modern browsers have Custom Elements out of the box.

At the moment X-Tag and Polymer use same Custom Elements polyfill which could be used separately from this libraries. You can find standalone polyfill here https://github.com/Polymer/CustomElements

Creating reactive element is as easy as one line of code:

document.registerReact('tag-name', reactClass);

This example displays basic reactive elememnt and allows to manipulate it in few possible ways:

• Set properties via attribute of node;
• Set properties via HTML node object “prop” property;
• Executing React component methods via node object.

A bit more advanced is a component which represents TV schedule data. It requests server for a TV schedule data based on tag attributes. So setting for example “category” attribute to “action” will display  broadcasts from corresponding category in the list. There are also “start”, “end” properties to filter broadcasts by start / end time and region to specify country. Resulting application is tiny due to great ability for code reusing of web-components and power of ReactiveElements.

<body>
    <h1>Choose category</h1>
    <select onchange="changeCategory(value)">
        <option value="sport">Sport</option>
        <option value="documentary">Documentary</option>
        <option value="kids">Kids</option>
    </select>
    <broadcasts-list id="myBroadcastList" category="sport" region="IE"></broadcasts-list>
    <script>
        function changeCategory(value) {
            var myBroadcastList = document.getElementById('myBroadcastList');
            myBroadcastList.setAttribute('category', value);
            myBroadcastList.refreshData();
        }
    </script>
</body>

ReactiveElements на GitHub

UPD: You may convert Angular directives and Backbone views as well using BackboneElements and AngularElements MVC Elements project.[:ru]В современной JavaScript разработке довольно остро стоит вопрос повторного использования кода и композиции проектов. Замечательным способом композиции является использование web-components, однако на текущий момент это требует большого количества полифилов, что снижает надежность и быстродействие. ReactiveElements предлагает использовать React.js для описания веб-компонент, избавиться от большинства полифилов и использовать реактивные веб-компоненты уже сегодня.

UPD: Вы можете создавать веб-компоненты из Backbone и Angular вью с помощью  MVC Elements

Существует много MVC фреймворков, каждый со своими преимуществами или недостатками. Общим недостатком является закрытость, невозможность совместного использования с другими. А что если у вас уже есть база компонент на одном из фреймворков, а на текущем проекте необходимо использовать новый? А что если для части проекта вам нужен другой подход нежели предлагает текущий, основной фреймворк?

Стандартизированным решением проблемы композиции может стать платформа веб-компонент, предлагающая повторное использование кода на уровне спецификаций HTML.

Основа для веб-компонент — это возможность использовать пользовательские HTML теги. Содержимое и поведение таких тегов (веб-компонент) определяется их разработчиком. Это может быть тег <touch-galery> — галерея или тег <broadcast-list> — программа передач на ТВ.

Пользовательские теги — самый важный элемент веб-компонент, однако для полноценной работы недостаточно просто описать тип тега. Нужен удобный способ подключения тега в проект, загрузки его шаблона. Так же нужно быть уверенным, что тег является вещью в себе и при добавлении не изменяет соседние теги и содержимое страницы. Для этого в стандарт введены спецификации HTML import и Shadow DOM.

Итого веб — компоненты состоят из:

• HTML templates;
• Custom elements;
• Shadow DOM;
• HTML import.

Большинство современных браузеров не поддерживает все составляющих платформы и для работы веб-компонент необходимо добавлять несколько полифилов, что негативно сказывается на быстродействии, надежности решения и является причиной слабого распространения веб-компонент не смотря на большой интерес в обществе. Убрать этот недостаток может использование Facebook React для описания веб-компонент.

Сильные стороны React:

• React ориентирован на компонентную модель разработки;
• «реактивность» создаваемого интерфейса, отсутствие ручных DOM манипуляций;
• Наличие виртуального DOM дерева и оптимизация рендеринга;
• Всем знакомые механизмы загрузки шаблонов через подключение JavaScript файлов.

Таким образом использование React решает проблему импорта компонент и делает ненужным HTML Import и HTML Template polyfill`ы. Так же нам больше не нужен Shadow DOM — React управляет своей DOM структурой самостоятельно и весьма эффективно.

Для использования React виджетов, как веб — компонент разработан небольшой враппер ReactiveElements. Для корректной работы он требует только поддержку custom element части спецификации. Это легко обеспечить подключив в проект Mozilla X-Tag, Google Polymer, а в последнее время Custom Element довольно часто присутствует в браузерах «из коробки».

На текущий момент и X-Tag и Google Polymer используют один и тот же Custom Element полифилл https://github.com/Polymer/CustomElements

Для создания реактивного элемента из React компонента достаточно просто выполнить:

document.registerReact('tag-name', reactClass);

Этот пример отображает простейший ReactiveElement а так же проводит возможные манипуляции с элементом — задает свойства через аттрибуты тега и напрямую через ссылку на HTML элемент, так же через ссылку выполняет методы React класса.

Чуть более сложным примером является компонент — программа телепередач. В зависимости от выставленных атрибутов компонент запрашивает с сервера данные о передачах разной тематики, разного времени старта и так далее. Не смотря на большой объем логики конечное приложение получилось очень небольшим благодаря замечательной композиции, которую предоставляют веб — компоненты и ReactiveElements.

<body>
    <h1>Choose category</h1>
    <select onchange="changeCategory(value)">
        <option value="sport">Sport</option>
        <option value="documentary">Documentary</option>
        <option value="kids">Kids</option>
    </select>
    <broadcasts-list id="myBroadcastList" category="sport" region="IE"></broadcasts-list>
    <script>
        function changeCategory(value) {
            var myBroadcastList = document.getElementById('myBroadcastList');
            myBroadcastList.setAttribute('category', value);
            myBroadcastList.refreshData();
        }
    </script>
</body>

ReactiveElements на GitHub

UPD: Теперь вы можете создавать web-компоненты из Angular директив и Backbone views используя проект MVC Elements.[:]