Документ рассматривает технологии и инструменты для фронтенд-разработки на базе Magento, включая веб-компоненты и SPA. Описаны особенности использования кастомных элементов, теневого DOM и шаблонов HTML, а также представлены преимущества создания компонентов. Рассматриваются также компоненты для мобильных приложений и тенденции развития компонентного веба, включая React.js и Angular.

1. Front-end в Magento
и не только
(Перспективы, технологии, инструменты)
Денис Босак

2. Содержание Веб компоненты
SPA (Single Page Applications)
Мобильные приложения
2

3. 3

4. седло
кассета
педаль
тормоз
обод
покрышка
вилка
руль
рама
4

5. 5

6. ссылки
фильтры
хлебные
крошки
подписка
продукт
мини корзина
навигация/категории
сортировка/пагинация
6

7. Что-то может сломаться
Сложно работать командой
Сложно подключать js плагины
Сложности с переносом функционала
Много времени на введение нового человека
Множество соглашений и стандартов
Традиционный подход
7

8. Набор стандартов, которые позволяют создавать
изолированные и самодостаточные элементы интерфейса.
Веб-компонент имеет:
Персональный тег
Свой JavaScript
Изолированные стили
Свою внутреннею структуру
Веб-компоненты
8

9. Кастомные элементы
Теневая модель документа
Шаблоны
HTML импорт
Веб-компоненты
9

10. Позволяют создавать пользовательские теги.
Основные возможности:
Можно создавать полностью новые теги
<my-element></my-element>
Наследоваться от существующих
<input is=“color-picker” />
Описывать их поведение
Доступен их жизненный цикл
Кастомные элементы (custom elements)
10

11. Позволяет создавать скрытую структуру элемента.
Прячем особенности реализации
Защищаем его от внешних воздействий
Удобно управляем содержимым
Теневая модель документа (shadow DOM)
11

12. Нужны нам для шаблонизации внутри элемента.
<div class=“hidden”> … </div>
Могут содержать стили и html
Контент шаблонов не отображается, пока он не
клонирован
Используется ленивая загрузка (lazy load)
Шаблоны (template)
<template></template>
12

13. Используется для вставки другого HTML, CSS, JavaScript
внутрь страницы.
Мы собираем все наши стили, JavaScript, и верстку
в один файл, и просто подключаем его одной строкой.
<link rel="import" href="/some-module.html“ />
HTML Imports
13

14. Небольшой пример: Mini cart
<link rel="import" href="components/mini-cart.html"/>
<mini-cart cart-url="/cart" checkout-url="/checkout">
<cart-item url="/product1" remove-url="/cart/?re-
move=product1">
<product-image>image.jpg</product-image>
<name>Product Example</name>
<qty>1</qty>
<price>$120</price>
</cart-item>
<cart-item url="/product2" remove-url="/cart/?re-
move=product2">
<product-image>image2.jpg</product-image>
<name>Product Example 2</name>
<qty>2</qty>
<price>$250</price>
</cart-item>
<total>$620</total>
</mini-cart>
https://github.com/a2ntis/webcomponent-minicart-example
14

15. Компоненты защищены от внешних воздействий и сами
компоненты тоже не смогут ничего поломать
Готовые компоненты легко использовать
Работать командой будет легче — каждый разработчик делает свой
компонент и не мешает другим
Возможность больше времени уделить разработке каждого
компонента и "довести его до ума"
Компоненты делают из сложной верстки – простую и понятную
структуру
Больше свободы в выборе технологий и языков
Преимущества:
15

16. Пока не очень хорошо
Поддержка браузерами
HTML
Imports
Custom
Elements
Shadow
DOM
Templates
Chrome
+
+
+
+
+
+
+
+
+
+/-
+/-
+/-
+
-
-
-
+/-
-
-
-
Opera Firefox Safari IE/Edge
16

17. Надстройка над спецификацией web components, которая
предоставляет её поддержку актуальными версиями браузеров.
Webcomponents.js
HTML
Imports
Custom
Elements
Shadow
DOM
Templates
Chrome
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/-
+/-
+
+
+
+
+
+
Opera Firefox Safari IE10 IE11+/Edge
17

18. Расширенная поддержка спецификаций web components
Есть библиотека готовых компонентов, к примеру:
<google-map latitude="37.790" longitude="-122.390"></google-map>
Декларативный стиль создания компонентов
https://www.polymer-project.org/1.0/
Polymer ― полифилы от Google
18

19. Будут появляться репозитории с готовым компонентами
(уже есть, но дальше будет больше)
Js плагины будут использоваться всё реже (например,
вместо js плагина для карусели мы получим компонент с
тегом <slide-carousel></slide-carousel> и т. п.)
HTML код станет более понятным и читаемым, как для
человека, так и для робота
Существенно упростится добавление нового функционала
с точки зрения frontend
Перспективы развития компонентного web
19

20. Высокая скорость отклика интерфейса
Возможность создать более интересный UI и UX
Возможность выбора архитектуры на стороне клиента
Более тестируемый frontend
Возможность делать крутые штуки, вроде изоморфных
приложений, распределённых приложений и многое
другое
SPA (Single Page Application)
20

21. Products
Product Categories
Product Images
Product Websites
Customers
Customer Addresses
Inventory
Sales Orders
Order Items
Order Addresses
Order Comments
Как это будет происходить?
Приложение Magento
RESTful API
Ресурсы:
21

22. React.js
Angular 2
Polymer
Frameworks (которые я считаю интересными)
22

23. Основные особенности:
Используется для представления (view)
Компоненты
Виртуальный DOM
Может выполняться и на сервере и на клиенте
Flux архитектура
jsx (JavaScript XML) – XML подобный синтаксис для
описания компонента
React.js
23

24. Компоненты — это функции
Компоненты могут иметь древовидную структуру
Компоненты имеют состояния (states) и свойства (props)
Пример простого компонента:
React.js компоненты
24

25. Упрощенная схема работы flux:
Flux архитектура
Action Web API
Dispatcher
Store
View
25

26. Имеет мало общего с Angular
Компоненты как и в Polymer
Поддерживает shadow DOM
Type Script
Очень прост в освоении
Пока не production ready
Angular 2
26

27. Apache Cordova
Adobe PhoneGap
Ionic framework
React Native
Mobile apps
27

28. Особенности такой платформы:
Концепция «Write once, run anywhere»
Использует web view или браузер
Позволяет выполнять JavaScript приложение так, как если
бы это было обычное приложение, написанное на родном
для OS языке
Предоставляется мощный API для использования
нативных функций мобильных устройств
Большие и сложные приложения теряют
производительность, особенно на старых версиях OS
Cordova (PhoneGap, Ionic)
28

29. Особенности такой платформы:
Концепция «Learn once, write anywhere»
Используется нативная реализация компонентов для iOS и
Android вместо WebView или браузера
Асинхронное выполнение приложения без потери
производительности
Используются CSS подобные стили
React Native расширяем, можно создавать модули на
родном для платформы языке и использовать их в своём
приложении
React Native
29

30. React Native
30

31. Все современные JavaScript библиотеки имеют
компонентную архитектуру и высокий уровень
абстракции. Похоже, что компонентного веб нам не
избежать
JavaScript с каждой своей версией становится всё более
взрослым, а его синтаксис более выразительным. Задачи,
выполняемые этим языком, будут всё более широкими
Развитие браузеров будет всё меньше влиять на
возможности разработки
Что дальше?
31

32. https://developer.mozilla.org/en-US/docs/Web/
Web_Components
http://webcomponents.org/
http://component.kitchen/
https://elements.polymer-project.org/
https://facebook.github.io/react/
https://angular.io/
https://facebook.github.io/react-native/
https://facebook.github.io/flux/
https://github.com/kriasoft/react-starter-kit
Полезные ссылки:
32

33. Спасибо за внимание!
Вопросы?
Денис Босак
E-mail: denis@magecom.net
Skype: denis.bosak
Веб: magecom.net