angular architecture

1. Лучшая client-side
архитектура
Антон Плешивцев
twitter.com/allaud
github.com/allaud
aviasales.ru

2. Что мы разрабатываем?

3. Frontend-приложение
•
•
•
•
Поисковая форма
Поисковая выдача (1000+ билетов)
Фильтры (15 и более критериев)
Календарь цен (цены на год)

4. Frontend-приложение

5. Legacy
• Внутренний
framework
• 10 000 строк кода
• Виджет ориентированная
архитектура

6. Проблемы старого подхода
•
•
•
•
•
Много собственного кода
Велосипеды
Изобрели AMD
Отсутствие тестов
Высокий порог вхождения

7. «Жидкое приложение»
Поисковая
форма

8. «Жидкое приложение»
Выдача
Поиск
Поисковая
форма

9. «Жидкое приложение»
Состояние
Фильтры
Выдача
Поиск
Фильтры
Поисковая
форма

10. «Жидкое приложение»
Состояние
Фильтры
Выдача
Фидбек
Поиск
Билеты
Поисковая
форма
Агенства
История

11. «Жидкое приложение»
Состояние
Фильтры
Выдача
Фидбек
Поиск
Календарь
Билеты
Поисковая
форма
Агенства
История

12. «Жидкое приложение»
Состояние
Фильтры
Выдача
Фидбек
Поиск
Календарь
Билеты
Поисковая
форма
Агенства
История

13. Использовать jQuery-плагины?
JQuery jQueryUIJformer Hyjack SelectjQuery Sparkline
sasmSelect jQuery PluginjQuery Plugin BoilerplatejQuery Floater
PluginjQuery Queue plugin Apprise Jquery-toast message-plugin
Websanova Color Picker safeSubmit Plugin JratingjQuery Opineo
PluginFollow & Tweet WidgetjQuery Corner Gallery InputNotes
GmapPicNet Table FilterJquery UI datepickerActivity
IndicatorTitle AlertFix Scrollbar HeightBetter Check Boxes with
jQuery and CSSBetterTooltip

14. Frontend frameworks
•
•
•
•
•
Google Closure library
Backbone.js
AngularJS
EmberJS
…

15. First try
•
•
•
•
Backbone
RequireJS
HandleBars
Jasmine

16. Выводы
•
•
•
•
Стало лучше
Порог вхождения понизился
AMD-модули полезны
Функций недостаточно

17. Next try
• AngularJS
• Удобные тесты
• Почти нет кастомных
решений
• Очень высокая
скорость разработки

18. Приложение aviasales.
Как декомпозировать?
• Разбить на виджеты
• Разбить на модели
• Разбить на отдельные
приложения

19. Frontend-приложение

20. Как спроектировать?
Поисковая форма
Выдача
Фильтры

21. Как спроектировать?
Форма
История
поисков
Календарь
Цена
Отели
Время
Билеты
Авиакомпании

22. Как организовать общение между частями
приложения?
Календарь
Цена
Отели
Время
Билеты
?
Авиакомпании

23. Как организовать общение между частями
приложения?
Календарь
Цена
Отели
Время
Билеты
SERVICE
Авиакомпании

24. Как организовать общение между частями
приложения?
«Выдача с фильтрами»
Календарь
Цена
Отели
Время
Билеты
Авиакомпании

25. Как организовать модули?
Отели
Календарь
Время
Цена
Билеты

26. Как организовать модули?
Календарь
Отели
Билеты
Dependency
Injection
Цена
Время

27. Как собрать воедино?
Ядро
Ядро
Форма
История
поисков
Календарь
Цена
Отели
Время
Билеты
Авиаком
Форма Поиска
Выдача

28. Как собрать воедино?
Ядро
Выдача
Форма Поиска
Форма
История
поисков
Билеты
Фильтры
Цена
Запись
Календарь
Отели
Список
билетов
Время
…

29. ng-controller directive
CoreController
SearchResultsController
SearchFormController
Form
History
Results
Filters
Price
Record
Calendar
Hotels
Tickets
Time
…

30. Взаимодействие контроллеров
SearchResultsController
{
tickets: []
sort: function(){…}
}
Tickets
{
sorting: ‘price’
tickets: []
sort: function(){…}
}
{
filters: {}
tickets: []
}
{
Results
reset: function(){…}
filters: {}
Filters
}
Price
{
visible: [1000, 10 000]
reset: function(){}
filters: {}
}

31. Много небольших работающих
приложений

32. Приложение «Список билетов»
TicketsController
TicketFactory
BaseTicket
FiltrableTicket
RoundTripTicket
OnewayTicket
TourTicket

33. Шаблоны (было)
NANO("templates.searches.tickets.widgets.proposals", function(NANO){
return NANO.templates('<%= j render 'nano_ui_templates/searches/tickets/widgets/proposals' %>', {
"@data-ticket-id": "ticket.id",
"@data-source": "source",
".ticket_proposal": {
"gate<-proposals": {
".gate_name": "gate.name",
".gate_select_button a@href": "gate.url",
".gate_select_button a@data-gate": "gate.id",
".gate_price": "gate.price",
".gate_payment_methods .payment_method": {
"method<-gate.payment_methods": {
"@class+": " #{method}"
}
}
}
}
});
});

34. Шаблоны (стало)
%li.proposal-carousel{'ng-repeat' => 'proposal in ticket.proposals_for_carousel()'}
%a.agency_offer{'ng-click' => 'buy_ticket(ticket, proposal)'}
%span {{ proposal.name() | cut:15 }}
%span.price
%span {{ proposal.price() | current_price:search.currency }}

35. Unobtrusive javascript
layout.find(".yes").bind("click", function(){
self.toggle(layout, "yes");
});
layout.find(".no").bind("click", function(){
self.toggle(layout, "no");
});
layout.find("#new_feedback").submit(function(){
return self._submit();
});

36. Angular way
<form class="feedback" ng-submit="submit()">
<div class="yes" ng-click='success(true)'>Да</div>
<div class="no" ng-click='success(false)'>Нет</div>
...
</form>

37. Итоги
• Теперь делать фиксы и фичи могут
все
• Ускорили разработку в разы
• Части приложения используются в
других проектах
• Ядро поддерживает сообщество

38. About
Антон Плешивцев
!
twitter.com/allaud
github.com/allaud
https://www.facebook.com/ant.pl.3
!
aviasales.ru