21 02 HappyDev-lite'14 Дмитрий Филимонов. Искусственный интеллект
Happydev presentation angular
-
Upload
ant-pl -
Category
Technology
-
view
621 -
download
0
description
Transcript of Happydev presentation angular
Лучшая 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