ПОРТАЛЫ НА JAVASCRIPTpublic.jugru.org/holyjs/2016/spb/day_1/track_2/druzhinin.pdfПОРТАЛЫ НА JAVASCRIPT ЗАЧЕМ, КАК И НАДО ЛИ ОНО HolyJS.ru –Михаил

www.luxoft.com

1

ПОРТАЛЫ НА JAVASCRIPTЗАЧЕМ, КАК И НАДО ЛИ ОНО

HolyJS.ru – Михаил Дружинин @ Luxoft - Июнь 2016

www.luxoft.com

2

ОБО МНЕ

Сейчас Technical Manager / Software Architect

10 лет в IT / 5 лет в Luxoft

Тренер по архитектуре и Java разработке

Опыт управления проектами в роли Team Lead и PM

Участвовал в многих проектах в роле архитектора

www.luxoft.com

3

ЧТО МЫ ДЕЛАЕМ

«Поток» проектов для банковской сферы

Типовые проекты

- Разработка UI

- Интеграция с API, который делается другими командами

- AngularJS, REST API

Агрессивные рамки выхода проектов

www.luxoft.com

4

ПОРТАЛЬНЫЙ ПРОЕКТ

Линейка продуктов

Продукт А Продукт B Продукт C

Единый интерфейс

www.luxoft.com

5

www.luxoft.com

6

www.luxoft.com

7

www.luxoft.com

8

О ЧЁМ ЭТО МЫ?

Приложение с одним «общим»

пользовательским интерфейсом

Большой проект

- состоящий из большого количества модулей

- которые слабо связаны с друг другом

www.luxoft.com

9







Разный «жизненный цикл» модулей

- даты релизов

- разные команды разработки

1

13

2

4

3

www.luxoft.com

10










Модули взаимодействуют между собой

1

13

2

4

3

www.luxoft.com

11

А В С

www.luxoft.com

12

А В С

www.luxoft.com

14

А В С

www.luxoft.com

15

А В С

www.luxoft.com

16










Модули взаимодействуют между собой

1

13

2

4

3

1

13

2

4

3

www.luxoft.com

17

ВАРИАНТЫ

Статическая вёрстка и сборка - все счастливы

Генерация на сервере

Компоновка на клиенте

www.luxoft.com

18

ЦЕЛЬ

Уйти с пониманием что и когда использовать

- Рассмотреть какие подходы можно использовать, чтобы сделать «портальное»

решение используя только браузер и JavaScript

- Обозначить плюсы и минусы каждого подхода

- Поднять «подводные камни» на поверхность

Обсудить какие ещё подходы возможны для решения тех же проблем

www.luxoft.com

19

НАЧНЁМ?

www.luxoft.com

20

ВАРИАНТЫ

Монолит

Сильная связнностьСлабая связнность

IFrames

F2 CoApp*

Сл

ож

но

еП

ро

сто

е

www.luxoft.com

21

КРИТЕРИИ СРАВНЕНИЯ

Возможность взаимодействия между модулями

Возможность раздельного выпуска модулей

Тестируемость

Безопасность отдельных модулей

Сложность разработки

Сложность развёртывания

www.luxoft.com

22

МОНОЛИТ

www.luxoft.com

23

КАК ОНО ВЫГЛЯДИТ

Отдельные компоненты и модули в рамках общей кодовой базы

Все собирается в общий пакет для поставки

http://app.com <Web Server>

A

B

C

А В С

www.luxoft.com

24

ПЛЮСЫ / МИНУСЫ - КОГДА ИСПОЛЬЗОВАТЬ И КОГДА НЕТ

Плюсы

- Простой и понятный

- Любые варианты взаимодействия

между модулями

Когда использовать

- Всегда когда можете

- Когда необходимо взаимодействие

между модулями

Минусы

- Выкатывать в live нужно целиком

- Изменения в одном модуле могут

затронуть другие

Когда стоит отказываться

- Необходим раздельный выпуск модулей

- Необходима работа нескольких, не связанных друг с другом команд

www.luxoft.com

25

IFRAMES

www.luxoft.com

26

А В С

www.luxoft.com

27


Проект «обёртка» который просто открывает пункт меню в IFrame

Несколько отдельных приложений, которые разрабатываются и

развёртываются независимо

Общая авторизация

www.luxoft.com

28


http://b.com <Web Server>

http://a.com <Web Server>

A

B

А В С

http://c.com <Web Server>

C


Container1

SSO

www.luxoft.com

29




A

B

А В С


C


Container

<<Reverse Proxy>>

http://app.com/a

http://a.com

SSO

www.luxoft.com

30


Плюсы

- Простота

- Нет влияния изменений одного

модуля на другие


- Приложения независимы – нужна

только общая авторизация

Минусы

- Не возможно какое либо

взаимодействие приложений

- Поддержка истории


- Необходимо взаимодействие

между приложениями

www.luxoft.com

31

COAPP

www.luxoft.com

32

А В С

www.luxoft.com

33


Проект «контейнер»

Каждое приложение собирается в два файла app.js и app.css

- Скрипты приложений, загружаются с того же ресурса через прокси

- Приложения после загрузки по сути представляют из себя одно AngularJS

приложение

Набор правил именования, чтобы не было коллизий имен

www.luxoft.com

34




A

B

А В С


C


Container

<<Reverse Proxy>>

http://app.com/a

http://a.com

SSO

www.luxoft.com

35


<html>

<head>

<link href="/appA/app.css" rel="stylesheet" type="text/css">

<link href="/appA/app.css" rel="stylesheet" type="text/css">

</head>

<body>

<div ng-app=“App"> <ui-view></ui-view> </div>

<script src="/appA/app.js"></script>

<script src="/appB/app.js"></script>

</body>

</html>

www.luxoft.com

36


<div>

<coapp-list-widget select-event=‘’’listSelected’’’></coapp-list-widget>

<div class="row">

<div class="col-xs-6">

<appA-price-widget update-event=‘’’listSelected’’’></appA-price-widget>

</div>

<div class="col-xs-6">

<appB-volume-widget update-event=‘’’listSelected’’’></appB-volume-widget>

</div>

</div>

</div>

www.luxoft.com

37


Плюсы

- Полный свобода в том, что отдельные модули могут делать друг с другом


- Нужна раздельная поставка модулей

- Нужен комплексный UI из нескольких модулей

Минусы

- Изменения одного модуля могут затронуть другие – сложно тестировать

- Модули не защищены друг от друга


- Важна безопасность отдельных модулей

- Изменения модулей не должны влиять друг на друга

www.luxoft.com

38

F2

www.luxoft.com

39

ЧТО ЭТО

https://www.openf2.org

Фреймворк для загрузки в одну страницу контента с разных ресурсов

Предоставляет функции для взаимодействия между контейнером и

приложениями и между приложениями внутри контейнера

https://www.openf2.org/

www.luxoft.com

40

А В С

www.luxoft.com

41


Проект «контейнер»

Модули-«приложения» для контейнера, которые загружаются с

произвольных ресурсов

- Каждый модуль имеет «манифест», по которому F2 его загружает

Модули могут «общаться» посредством событий

- F2.Events.emit / F2.Events.on

www.luxoft.com

42

МАНИФЕСТ

F2_jsonpCallback_ru_jug_appA_widget({

"scripts": [ "//localhost:9001/appA/widget.js“ ],

"styles": [],

"apps": [ {

"html":

'<div ng-app=“ru.jug.appA. widget">' +

'<ru:jug:appA:widget></ru:jug:appA:widget>' +

'</div>'

}],

"inlineScripts": [

"angular.bootstrap($('.ru_jug_appA_widget'),

[‘ru.jug.events', ‘ru.jug.appA.widget']);"

]

})

www.luxoft.com

43

КОНТЕЙНЕР

<div

data-f2-autoload

data-f2-appid

=“ru_jug_appA_widget"

data-f2-manifesturl

="//localhost:9001/appA/f2.manifest.js">

</div>

www.luxoft.com

44

КОММУНИКАЦИЯ

F2.Events.emit(‘event_name’, value);

F2.Events.on(‘event_name’, function(value){

doSomething(value);

});

www.luxoft.com

45




A

B

А В С


C


Container1

SSO

www.luxoft.com

46


Плюсы

- Загрузка модулей с различных ресурсов

- Нет влияния изменений одного модуля на другие

- Event модель взаимодействия


- Нужно целевую страницу собирать

«из кусочков»

«Минусы»

- Ограниченная модель взаимодействия через события

- Один уровень контейнер-приложение


- Событийной модели взаимодействия недостаточно

- Концепция приложений ограничивает требуемый UI

www.luxoft.com

47

ЧТО ВЫБИРАЕМ?

www.luxoft.com

48


1. Используем инструмент, подходящий под цели проекта

2. Чем проще – тем лучше

www.luxoft.com

49


Если можно – делаем одно монолитное приложение.

Забываем про IFrames – используем F2 где нужен контент и

«приложения» с различных ресурсов

Если ничего не помогло – делаем велосипед

www.luxoft.com

50

О ЧЁМ НУЖНО НЕ ЗАБЫТЬ ПРИ ВЫБОРЕ

Как будем тестировать?

Модель взаимодействия между модулями?

Как узнать в каком приложении есть нужная функциональность?

Откуда модули будут брать данные (API, same origin, etc…)?

www.luxoft.com

51

УХОДИМ С LEGACY

www.luxoft.com

52

КАК ИДТИ К СЧАСТЬЮ

1. Выделяем кусочек

2. Делаем его независимым

3. Переписываем

4. Повторить пункт 1, пока не наступило счастье

www.luxoft.com

53

ВОПРОСЫ? ПРЕДЛОЖЕНИЯ?

www.luxoft.com

54

СПАСИБО ЗА ВНИМАНИЕ

Михаил ДружининEmail: [email protected]

mailto:[email protected]

Documents

ПОРТАЛЫ НА JAVASCRIPTpublic.jugru.org/holyjs/2016/spb/day_1/track_2/druzhinin.pdfПОРТАЛЫ НА JAVASCRIPT ЗАЧЕМ, КАК И НАДО ЛИ ОНО HolyJS.ru –Михаил