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

aviasales.ru

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

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

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

Legacy• Внутренний

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

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

«Жидкое приложение»

Поисковая форма

«Жидкое приложение»

Поисковая форма

Поиск

Выдача

«Жидкое приложение»

Поисковая форма

Поиск

Выдача

Фильтры

ФильтрыСостояние

«Жидкое приложение»

Поисковая форма

Поиск

Выдача

Билеты

ФильтрыСостояние

Агенства

Фидбек

История

«Жидкое приложение»

Поисковая форма

Поиск

Выдача

Билеты

ФильтрыСостояние

Агенства

Фидбек

История

Календарь

«Жидкое приложение»

Поисковая форма

Поиск

Выдача

Билеты

ФильтрыСостояние

Агенства

Фидбек

История

Календарь

Использовать 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

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

First try• Backbone • RequireJS • HandleBars • Jasmine

Выводы

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

Next try

• AngularJS

• Удобные тесты

• Почти нет кастомных решений

• Очень высокая скорость разработки

Приложение aviasales. Как декомпозировать?

• Разбить на виджеты • Разбить на модели • Разбить на отдельные приложения

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

Как спроектировать?

Поисковая форма

Выдача Фильтры

Как спроектировать?Форма История

поисков

Календарь

Отели

Билеты

Цена

Время

Авиакомпании

Как организовать общение между частями приложения?

Календарь

Отели

Билеты

Цена

Время

Авиакомпании?

Как организовать общение между частями приложения?

Календарь

Отели

Билеты

Цена

Время

АвиакомпанииSERVICE

«Выдача с фильтрами»

Как организовать общение между частями приложения?

Календарь

Отели

Билеты

Цена

Время

Авиакомпании

Как организовать модули?

Календарь

Отели

Билеты

Цена

Время

Как организовать модули?

Календарь

Отели

Билеты

Цена

Время

Dependency Injection

Как собрать воедино?Ядро

Форма История поисков

Календарь

Отели

Билеты

Цена

Время

Авиаком

Ядро

Форма Поиска Выдача

Как собрать воедино?Ядро

Форма Поиска Выдача

Форма История поисков

Запись

Билеты Фильтры

Цена Время …

Календарь Отели Список билетов

ng-controller directiveCoreController

SearchFormController SearchResultsController

Form History

Record

Results Filters

Price Time …

Calendar Hotels Tickets

Взаимодействие контроллеровSearchResultsController

Results Filters

PriceTickets

{ filters: {} tickets: [] }

{ reset: function(){…} filters: {} }

{ visible: [1000, 10 000] reset: function(){} filters: {} }

{ tickets: [] sort: function(){…} }

{ sorting: ‘price’ tickets: [] sort: function(){…} }

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

Приложение «Список билетов»TicketsController

BaseTicket

FiltrableTicket

TicketFactory

RoundTripTicket OnewayTicket TourTicket

Шаблоны (было)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}" } } } } }); });

Шаблоны (стало)

%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 }}

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(); });

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>

Итоги

• Теперь делать фиксы и фичи могут все

• Ускорили разработку в разы • Части приложения используются в других проектах

• Ядро поддерживает сообщество

About

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