Лучшая client-side архитектура

Антон Плешивцев

Transcript

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 SearchFormController SearchResultsController Form History Record Results Filters Price Time … Calendar Hotels Tickets
30. Взаимодействие контроллеров SearchResultsController Results Filters Price Tickets { filters: {} tickets: [] } { reset: function(){…} filters: {} } { visible: [1000, 10 000] reset: function(){} filters: {} } { tickets: [] sort: function(){…} } { sorting: ‘price’ tickets: [] sort: function(){…} }
31. Много небольших работающих приложений
32. Приложение «Список билетов» TicketsController BaseTicket FiltrableTicket TicketFactory 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