Download to read offline
![Взаимодействие контроллеров
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: {}
}](https://image.slidesharecdn.com/happydevpresentationangular-131205064720-phpapp02/85/Happydev-presentation-angular-30-320.jpg)
Uploaded byАнтон Плешивцев
Happydev presentation angular
Документ обсуждает архитектуру клиентской стороны веб-приложения, разработанного Антоном Плешивцевым для компании Aviasales, включая проблемы старого подхода и шаги по улучшению. В документе представлены рекомендации по оптимизации разработки через использование современных фреймворков и модульную организацию кода. Также рассмотрены методы взаимодействия между различными частями приложения и внедрение тестирования для повышения качества кода.
Happydev presentation angular
- 1.
- 2.
- 3. Frontend-приложение • • • • Поисковая форма Поисковая выдача(1000+ билетов) Фильтры (15 и более критериев) Календарь цен (цены на год)
- 4.
- 5. Legacy • Внутренний framework • 10000 строк кода • Виджет ориентированная архитектура
- 6. Проблемы старого подхода • • • • • Многособственного кода Велосипеды Изобрели AMD Отсутствие тестов Высокий порог вхождения
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13. Использовать jQuery-плагины? JQuery jQueryUIJformerHyjack 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 Closurelibrary Backbone.js AngularJS EmberJS …
- 15.
- 16. Выводы • • • • Стало лучше Порог вхожденияпонизился AMD-модули полезны Функций недостаточно
- 17. Next try • AngularJS •Удобные тесты • Почти нет кастомных решений • Очень высокая скорость разработки
- 18. Приложение aviasales. Как декомпозировать? •Разбить на виджеты • Разбить на модели • Разбить на отдельные приложения
- 19.
- 20.
- 21.
- 22. Как организовать общениемежду частями приложения? Календарь Цена Отели Время Билеты ? Авиакомпании
- 23. Как организовать общениемежду частями приложения? Календарь Цена Отели Время Билеты SERVICE Авиакомпании
- 24. Как организовать общениемежду частями приложения? «Выдача с фильтрами» Календарь Цена Отели Время Билеты Авиакомпании
- 25.
- 26.
- 27.
- 28. Как собрать воедино? Ядро Выдача ФормаПоиска Форма История поисков Билеты Фильтры Цена Запись Календарь Отели Список билетов Время …
- 29.
- 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.
- 33. Шаблоны (было) NANO("templates.searches.tickets.widgets.proposals", function(NANO){ returnNANO.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.