Transcript
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
top related