1. FRONTEND FORTHE WIN!
Антон Плешивцев, aviasales.ru

2. МЕТАПОИСК

3. МЕТАПОИСК

4. МЕТАПОИСК

5. МЕТАПОИСК

6. МЕТАПОИСК

9. LEGACY
• кастомное решение
• 10К строк кода без тестов
• виджет-ориентированная архитектура

10. ЖИДКОЕ ПРИЛОЖЕНИЕ
Поисковая
форма
Поиск
Выдача
Билеты
ФильтрыСостояние
Агенства
Фидбек
История
Календарь

11. INTERFACE

12. NEW AGE
• AngularJS
• 3K строк кода
• 80% покрытие тестами

13. СТРУКТУРА

14. СТРУКТУРА
Поисковая форма
Билеты Фильтры

15. СТРУКТУРА
Поисковая форма
Билеты Фильтры
Форма
История
поисков
Календарь
Отели
Билеты
Цена
Время
Вылет
…

16. ВЗАИМОДЕЙСТВИЕ
ЧАСТЕЙ

17. ВЗАИМОДЕЙСТВИЕ
Билеты
Календарь
Отели
Билеты Фильтры
Цена
Время
Вылет
…
?

18. ВЗАИМОДЕЙСТВИЕ
Билеты
Календарь
Отели
Билеты Фильтры
Цена
Время
Вылет
…
service

19. ВЗАИМОДЕЙСТВИЕ
Билеты Фильтры
Календарь
Отели
Билеты
Цена
Время
Вылет
…
«Выдача с фильтрами»

20. МОДУЛИ

21. MODULE PATTERN
var testModule = (function () {
!
var counter = 0;
!
return {
!
incrementCounter: function () {
return counter++;
},
!
resetCounter: function () {
console.log( "counter value prior to reset: " + counter );
counter = 0;
}
};
!
})();

22. AMD MODULE
//Calling define with a dependency array and a factory function
define(['dep1', 'dep2'], function (dep1, dep2) {
!
//Define the module value by returning a value.
return function () {};
});

23. DEPENDENCY INJECTION
function MyController($scope, greeter) {
!
$scope.test = true;
!
$scope.check = function(){
greeter.check($scope.test);
};
!
}

24. Ядро

25. Ядро
Форма
поиска
Выдача

26. Ядро
Форма
поиска
Выдача
Форма История Билеты Фильтры

27. Ядро
Форма
поиска
Выдача
Форма История Билеты Фильтры
Поиск
Календарь Отели Выдача
Цена Время

28. Ядро
Форма
поиска
Выдача
Форма История Билеты Фильтры
Поиск
Календарь Отели Выдача
Цена Время

29. Ядро
Форма
поиска
Выдача
Форма История Билеты Фильтры
Поиск
Календарь Отели Выдача
Цена Время
у

30. Выдача
Билеты Фильтры
{
filters: {}
tickets: []
}
{
tickets: []
filters: {}
sort: function(){…}
}
{
reset: function(){…}
filters: {}
tickets: []
}
Выдача Цена
{
sorting: ‘price’
tickets: []
filters: {}
sort: function(){…}
}
{
visible: [1000, 10 000]
reset: function(){}
filters: {}
tickets: []
}

31. Выдача
Билеты Фильтры
{
filters: {}
tickets: []
}
{
tickets: []
filters: {}
sort: function(){…}
}
{
reset: function(){…}
filters: {}
tickets: []
}
Выдача Цена
{
sorting: ‘price’
tickets: []
filters: {}
sort: function(){…}
}
{
visible: [1000, 10 000]
reset: function(){}
filters: {}
tickets: []
}

32. Выдача
Билеты Фильтры
Выдача Цена
$scope.filters.price = [1000, 15000]

33. Выдача
Билеты Фильтры
Выдача Цена
$scope.filters.price = [1000, 15000]
$scope.filters.price = [1000, 15000]

34. Выдача
Билеты Фильтры
Выдача Цена
$scope.filters.price = [1000, 15000]
$scope.filters.price = [1000, 15000]
onchange(‘filters.price’, function(){
update_tickets();
})

35. PITFALL

36. PITFALL
Выдача
Фильтры
Цена
$scope.filters = {
price: [100, 10000],
duration: [3600, 84600],
…
}

37. BEFORE
Выдача
Фильтры
Цена $scope.filters
$scope.filters
$scope.filters

38. AFTER
Выдача
Фильтры
Цена $scope.filters
$scope.filters
$scope.filters

39. TEMPLATES

40. UNOBTRUSIVE
NANO("templates.searches.tickets.widgets.proposals", function(NANO){
return NANO.templates(‘ticket.html’, {
"@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}"
}
}
}
}
});
});

41. DECLARATIVE
<li class="proposal-carousel"
ng-repeat="proposal in ticket.proposals_for_carousel()">
<a class="agency_offer"
ng-click="buy_ticket(ticket, proposal)"></a>
<span>{{ proposal.name() | cut:15 }}</span>
<span class="price">
<span>{{ proposal.price() | current_price:search.currency }}</span>
</span>
</li>

42. UNOBTRUSIVE
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();
});
<form class="feedback">
<div class="yes">Да</div>
<div class="no">Нет</div>
...
</form>
+

43. DECLARATIVE
<form class="feedback" ng-submit="submit()">
<div class="yes" ng-click='success(true)'>Да</div>
<div class="no" ng-click='success(false)'>Нет</div>
...
</form>

44. ИТОГИ

45. COMPOSITE ARCHITECTURE
IS POWERFUL

46. PROTOTYPE INHERITANCE IS
GOOD

47. DECLARATIVE ALWAYS
BETTERTHEN IMPERATIVE

48. ANGULARJS IS BETTERTHAN
ANYTHING ELSE

49. ABOUT
АНТОН ПЛЕШИВЦЕВ
!
twitter.com/allaud
github.com/allaud
https://www.facebook.com/ant.pl.3
!
aviasales.ru