happydev presentation angular
DESCRIPTION
angular architectureTRANSCRIPT
![Page 1: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/1.jpg)
Лучшая client-side архитектураАнтон Плешивцев twitter.com/allaud github.com/allaud
aviasales.ru
![Page 2: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/2.jpg)
Что мы разрабатываем?
![Page 3: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/3.jpg)
Frontend-приложение• Поисковая форма • Поисковая выдача (1000+ билетов) • Фильтры (15 и более критериев) • Календарь цен (цены на год)
![Page 4: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/4.jpg)
Frontend-приложение
![Page 5: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/5.jpg)
Legacy• Внутренний
framework • 10 000 строк кода • Виджет - ориентированная архитектура
![Page 6: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/6.jpg)
Проблемы старого подхода• Много собственного кода • Велосипеды • Изобрели AMD • Отсутствие тестов • Высокий порог вхождения
![Page 7: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/7.jpg)
«Жидкое приложение»
Поисковая форма
![Page 8: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/8.jpg)
«Жидкое приложение»
Поисковая форма
Поиск
Выдача
![Page 9: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/9.jpg)
«Жидкое приложение»
Поисковая форма
Поиск
Выдача
Фильтры
ФильтрыСостояние
![Page 10: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/10.jpg)
«Жидкое приложение»
Поисковая форма
Поиск
Выдача
Билеты
ФильтрыСостояние
Агенства
Фидбек
История
![Page 11: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/11.jpg)
«Жидкое приложение»
Поисковая форма
Поиск
Выдача
Билеты
ФильтрыСостояние
Агенства
Фидбек
История
Календарь
![Page 12: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/12.jpg)
«Жидкое приложение»
Поисковая форма
Поиск
Выдача
Билеты
ФильтрыСостояние
Агенства
Фидбек
История
Календарь
![Page 13: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/13.jpg)
Использовать 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
![Page 14: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/14.jpg)
Frontend frameworks• Google Closure library • Backbone.js • AngularJS • EmberJS • …
![Page 15: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/15.jpg)
First try• Backbone • RequireJS • HandleBars • Jasmine
![Page 16: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/16.jpg)
Выводы
• Стало лучше • Порог вхождения понизился • AMD-модули полезны • Функций недостаточно
![Page 17: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/17.jpg)
Next try
• AngularJS
• Удобные тесты
• Почти нет кастомных решений
• Очень высокая скорость разработки
![Page 18: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/18.jpg)
Приложение aviasales. Как декомпозировать?
• Разбить на виджеты • Разбить на модели • Разбить на отдельные приложения
![Page 19: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/19.jpg)
Frontend-приложение
![Page 20: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/20.jpg)
Как спроектировать?
Поисковая форма
Выдача Фильтры
![Page 21: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/21.jpg)
Как спроектировать?Форма История
поисков
Календарь
Отели
Билеты
Цена
Время
Авиакомпании
![Page 22: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/22.jpg)
Как организовать общение между частями приложения?
Календарь
Отели
Билеты
Цена
Время
Авиакомпании?
![Page 23: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/23.jpg)
Как организовать общение между частями приложения?
Календарь
Отели
Билеты
Цена
Время
АвиакомпанииSERVICE
![Page 24: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/24.jpg)
«Выдача с фильтрами»
Как организовать общение между частями приложения?
Календарь
Отели
Билеты
Цена
Время
Авиакомпании
![Page 25: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/25.jpg)
Как организовать модули?
Календарь
Отели
Билеты
Цена
Время
![Page 26: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/26.jpg)
Как организовать модули?
Календарь
Отели
Билеты
Цена
Время
Dependency Injection
![Page 27: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/27.jpg)
Как собрать воедино?Ядро
Форма История поисков
Календарь
Отели
Билеты
Цена
Время
Авиаком
Ядро
Форма Поиска Выдача
![Page 28: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/28.jpg)
Как собрать воедино?Ядро
Форма Поиска Выдача
Форма История поисков
Запись
Билеты Фильтры
Цена Время …
Календарь Отели Список билетов
![Page 29: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/29.jpg)
ng-controller directiveCoreController
SearchFormController SearchResultsController
Form History
Record
Results Filters
Price Time …
Calendar Hotels Tickets
![Page 30: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/30.jpg)
Взаимодействие контроллеровSearchResultsController
Results Filters
PriceTickets
{ filters: {} tickets: [] }
{ reset: function(){…} filters: {} }
{ visible: [1000, 10 000] reset: function(){} filters: {} }
{ tickets: [] sort: function(){…} }
{ sorting: ‘price’ tickets: [] sort: function(){…} }
![Page 31: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/31.jpg)
Много небольших работающих приложений
![Page 32: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/32.jpg)
Приложение «Список билетов»TicketsController
BaseTicket
FiltrableTicket
TicketFactory
RoundTripTicket OnewayTicket TourTicket
![Page 33: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/33.jpg)
Шаблоны (было)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}" } } } } }); });
![Page 34: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/34.jpg)
Шаблоны (стало)
%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 }}
![Page 35: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/35.jpg)
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(); });
![Page 36: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/36.jpg)
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>
![Page 37: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/37.jpg)
Итоги
• Теперь делать фиксы и фичи могут все
• Ускорили разработку в разы • Части приложения используются в других проектах
• Ядро поддерживает сообщество
![Page 38: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/38.jpg)
About
Антон Плешивцев !twitter.com/allaud github.com/allaud https://www.facebook.com/ant.pl.3 !aviasales.ru
![Page 39: Happydev presentation angular](https://reader034.vdocuments.net/reader034/viewer/2022051609/548043f8b479596f578b4644/html5/thumbnails/39.jpg)