Лучшая 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 Bo...
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 directive
CoreController

SearchResultsController

SearchFormController

Form

History

Results

Filters

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

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

Tickets
{
sorting: ‘price’
ticke...
Много небольших работающих
приложений
Приложение «Список билетов»
TicketsController

TicketFactory

BaseTicket
FiltrableTicket
RoundTripTicket

OnewayTicket

To...
Шаблоны (было)
NANO("templates.searches.tickets.widgets.proposals", function(NANO){
return NANO.templates('<%= j render 'n...
Шаблоны (стало)
%li.proposal-carousel{'ng-repeat' => 'proposal in ticket.proposals_for_carousel()'}
%a.agency_offer{'ng-cl...
Unobtrusive javascript
layout.find(".yes").bind("click", function(){
self.toggle(layout, "yes");
});
layout.find(".no").bi...
Angular way
<form class="feedback" ng-submit="submit()">
<div class="yes" ng-click='success(true)'>Да</div>
<div class="no...
Итоги
• Теперь делать фиксы и фичи могут
все
• Ускорили разработку в разы
• Части приложения используются в
других проекта...
About
Антон Плешивцев
!

twitter.com/allaud
github.com/allaud
https://www.facebook.com/ant.pl.3
!

aviasales.ru
Happydev presentation angular
Upcoming SlideShare
Loading in...5
×

Happydev presentation angular

331

Published on

angular architecture

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
331
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Happydev presentation angular

  1. 1. Лучшая client-side архитектура Антон Плешивцев twitter.com/allaud github.com/allaud aviasales.ru
  2. 2. Что мы разрабатываем?
  3. 3. Frontend-приложение • • • • Поисковая форма Поисковая выдача (1000+ билетов) Фильтры (15 и более критериев) Календарь цен (цены на год)
  4. 4. Frontend-приложение
  5. 5. Legacy • Внутренний framework • 10 000 строк кода • Виджет ориентированная архитектура
  6. 6. Проблемы старого подхода • • • • • Много собственного кода Велосипеды Изобрели AMD Отсутствие тестов Высокий порог вхождения
  7. 7. «Жидкое приложение» Поисковая форма
  8. 8. «Жидкое приложение» Выдача Поиск Поисковая форма
  9. 9. «Жидкое приложение» Состояние Фильтры Выдача Поиск Фильтры Поисковая форма
  10. 10. «Жидкое приложение» Состояние Фильтры Выдача Фидбек Поиск Билеты Поисковая форма Агенства История
  11. 11. «Жидкое приложение» Состояние Фильтры Выдача Фидбек Поиск Календарь Билеты Поисковая форма Агенства История
  12. 12. «Жидкое приложение» Состояние Фильтры Выдача Фидбек Поиск Календарь Билеты Поисковая форма Агенства История
  13. 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. 14. Frontend frameworks • • • • • Google Closure library Backbone.js AngularJS EmberJS …
  15. 15. First try • • • • Backbone RequireJS HandleBars Jasmine
  16. 16. Выводы • • • • Стало лучше Порог вхождения понизился AMD-модули полезны Функций недостаточно
  17. 17. Next try • AngularJS • Удобные тесты • Почти нет кастомных решений • Очень высокая скорость разработки
  18. 18. Приложение aviasales. Как декомпозировать? • Разбить на виджеты • Разбить на модели • Разбить на отдельные приложения
  19. 19. Frontend-приложение
  20. 20. Как спроектировать? Поисковая форма Выдача Фильтры
  21. 21. Как спроектировать? Форма История поисков Календарь Цена Отели Время Билеты Авиакомпании
  22. 22. Как организовать общение между частями приложения? Календарь Цена Отели Время Билеты ? Авиакомпании
  23. 23. Как организовать общение между частями приложения? Календарь Цена Отели Время Билеты SERVICE Авиакомпании
  24. 24. Как организовать общение между частями приложения? «Выдача с фильтрами» Календарь Цена Отели Время Билеты Авиакомпании
  25. 25. Как организовать модули? Отели Календарь Время Цена Билеты
  26. 26. Как организовать модули? Календарь Отели Билеты Dependency Injection Цена Время
  27. 27. Как собрать воедино? Ядро Ядро Форма История поисков Календарь Цена Отели Время Билеты Авиаком Форма Поиска Выдача
  28. 28. Как собрать воедино? Ядро Выдача Форма Поиска Форма История поисков Билеты Фильтры Цена Запись Календарь Отели Список билетов Время …
  29. 29. ng-controller directive CoreController SearchResultsController SearchFormController Form History Results Filters Price Record Calendar Hotels Tickets Time …
  30. 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. 31. Много небольших работающих приложений
  32. 32. Приложение «Список билетов» TicketsController TicketFactory BaseTicket FiltrableTicket RoundTripTicket OnewayTicket TourTicket
  33. 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. 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. 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. 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. 37. Итоги • Теперь делать фиксы и фичи могут все • Ускорили разработку в разы • Части приложения используются в других проектах • Ядро поддерживает сообщество
  38. 38. About Антон Плешивцев ! twitter.com/allaud github.com/allaud https://www.facebook.com/ant.pl.3 ! aviasales.ru
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×