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

Денис Босак

Содержание Веб компоненты

SPA (Single Page Applications)

Мобильные приложения

2

3

седло

кассета

педаль

тормозобод

покрышка

вилка

руль

рама

4

5

ссылки

фильтры

хлебныекрошки

подписка

продукт

мини корзинанавигация/категориисортировка/пагинация

6

Что-то может сломаться

Сложно работать командой

Сложно подключать js плагины

Сложности с переносом функционала

Много времени на введение нового человека

Множество соглашений и стандартов

Традиционный подход

7

Набор стандартов, которые позволяют создаватьизолированные и самодостаточные элементы интерфейса.

Веб-компонент имеет:

Персональный тегСвой JavaScriptИзолированные стилиСвою внутреннею структуру

Веб-компоненты

8

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

Веб-компоненты

9

Позволяют создавать пользовательские теги.

Основные возможности:

Можно создавать полностью новые теги<my-element></my-element>

Наследоваться от существующих<input is=“color-picker” />

Описывать их поведение

Доступен их жизненный цикл

Кастомные элементы (custom elements)

10

Позволяет создавать скрытую структуру элемента.

Прячем особенности реализацииЗащищаем его от внешних воздействийУдобно управляем содержимым

Теневая модель документа (shadow DOM)

11

Нужны нам для шаблонизации внутри элемента.

<div class=“hidden”> … </div>

Могут содержать стили и html

Контент шаблонов не отображается, пока он не клонирован

Используется ленивая загрузка (lazy load)

Шаблоны (template)

<template></template>

12

Используется для вставки другого HTML, CSS, JavaScriptвнутрь страницы.

Мы собираем все наши стили, JavaScript, и версткув один файл, и просто подключаем его одной строкой.

<link rel="import" href="/some-module.html“ />

HTML Imports

13

Небольшой пример: 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

Пока не очень хорошо

Поддержка браузерами

HTMLImports

CustomElements

ShadowDOM

Templates

Chrome

+

+

+

+

+

+

+

+

+

+/-

+/-

+/-

+

-

-

-

+/-

-

-

-

Opera Firefox Safari IE/Edge

16

Надстройка над спецификацией web components, которая предоставляет её поддержку актуальными версиями браузеров.

Webcomponents.js

HTMLImports

CustomElements

ShadowDOM

Templates

Chrome

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+/-

+/-

+

+

+

+

+

+

Opera Firefox Safari IE10 IE11+/Edge

17

Расширенная поддержка спецификаций web components

Есть библиотека готовых компонентов, к примеру:<google-map latitude="37.790" longitude="-122.390"></google-map>

Декларативный стиль создания компонентов

https://www.polymer-project.org/1.0/

Polymer ― полифилы от Google

18

Будут появляться репозитории с готовым компонентами (уже есть, но дальше будет больше)

Js плагины будут использоваться всё реже (например, вместо js плагина для карусели мы получим компонент с тегом <slide-carousel></slide-carousel> и т. п.)

HTML код станет более понятным и читаемым, как для человека, так и для робота

Существенно упростится добавление нового функционала с точки зрения frontend

Перспективы развития компонентного web

19

Высокая скорость отклика интерфейса

Возможность создать более интересный UI и UX

Возможность выбора архитектуры на стороне клиента

Более тестируемый frontend

Возможность делать крутые штуки, вроде изоморфных приложений, распределённых приложений и многое другое

SPA (Single Page Application)

20

ProductsProduct CategoriesProduct ImagesProduct WebsitesCustomersCustomer Addresses

InventorySales OrdersOrder ItemsOrder AddressesOrder Comments

Как это будет происходить?

Приложение MagentoRESTful API

Ресурсы:

21

React.js

Angular 2

Polymer

Frameworks (которые я считаю интересными)

22

Основные особенности:

Используется для представления (view)

Компоненты

Виртуальный DOM

Может выполняться и на сервере и на клиенте

Flux архитектура

jsx (JavaScript XML) – XML подобный синтаксис для описания компонента

React.js

23

Компоненты — это функции

Компоненты могут иметь древовидную структуру

Компоненты имеют состояния (states) и свойства (props)

Пример простого компонента:

React.js компоненты

24

Упрощенная схема работы flux:

Flux архитектура

Action Web API

Dispatcher

Store

View

25

Имеет мало общего с Angular

Компоненты как и в Polymer

Поддерживает shadow DOM

Type Script

Очень прост в освоении

Пока не production ready

Angular 2

26

Apache Cordova

Adobe PhoneGap

Ionic framework

React Native

Mobile apps

27

Особенности такой платформы:

Концепция «Write once, run anywhere»

Использует web view или браузер

Позволяет выполнять JavaScript приложение так, как если бы это было обычное приложение, написанное на родном для OS языке

Предоставляется мощный API для использования нативных функций мобильных устройств

Большие и сложные приложения теряют производительность, особенно на старых версиях OS

Cordova (PhoneGap, Ionic)

28

Особенности такой платформы:

Концепция «Learn once, write anywhere»

Используется нативная реализация компонентов для iOS и Android вместо WebView или браузера

Асинхронное выполнение приложения без потери производительности

Используются CSS подобные стили

React Native расширяем, можно создавать модули на родном для платформы языке и использовать их в своём приложении

React Native

29

React Native

30

Все современные JavaScript библиотеки имеют компонентную архитектуру и высокий уровень абстракции. Похоже, что компонентного веб нам не избежать

JavaScript с каждой своей версией становится всё более взрослым, а его синтаксис более выразительным. Задачи, выполняемые этим языком, будут всё более широкими

Развитие браузеров будет всё меньше влиять на возможности разработки

Что дальше?

31

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

Спасибо за внимание!

Вопросы?

Денис Босак

E-mail: denis@magecom.netSkype: denis.bosakВеб: magecom.net