Frontend for the win
0 likes609 views
Документ обсуждает использование AngularJS для создания веб-приложений, уделяя внимание архитектуре, модулям и взаимодействию компонентов. Упоминается о структуре кода, тестировании и функциональности, связанной с выдачей результатов поиска билетов. Приведены примеры реализации различных компонентов и их взаимодействия в рамках приложения.
![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 () {};
});](https://image.slidesharecdn.com/frontendforthewin-140417141854-phpapp02/85/Frontend-for-the-win-22-320.jpg)
![Выдача
Билеты Фильтры
{
filters: {}
tickets: []
}
{
tickets: []
filters: {}
sort: function(){…}
}
{
reset: function(){…}
filters: {}
tickets: []
}
Выдача Цена
{
sorting: ‘price’
tickets: []
filters: {}
sort: function(){…}
}
{
visible: [1000, 10 000]
reset: function(){}
filters: {}
tickets: []
}](https://image.slidesharecdn.com/frontendforthewin-140417141854-phpapp02/85/Frontend-for-the-win-30-320.jpg)
![Выдача
Билеты Фильтры
{
filters: {}
tickets: []
}
{
tickets: []
filters: {}
sort: function(){…}
}
{
reset: function(){…}
filters: {}
tickets: []
}
Выдача Цена
{
sorting: ‘price’
tickets: []
filters: {}
sort: function(){…}
}
{
visible: [1000, 10 000]
reset: function(){}
filters: {}
tickets: []
}](https://image.slidesharecdn.com/frontendforthewin-140417141854-phpapp02/85/Frontend-for-the-win-31-320.jpg)
![Выдача
Билеты Фильтры
Выдача Цена
$scope.filters.price = [1000, 15000]](https://image.slidesharecdn.com/frontendforthewin-140417141854-phpapp02/85/Frontend-for-the-win-32-320.jpg)
![Выдача
Билеты Фильтры
Выдача Цена
$scope.filters.price = [1000, 15000]
$scope.filters.price = [1000, 15000]](https://image.slidesharecdn.com/frontendforthewin-140417141854-phpapp02/85/Frontend-for-the-win-33-320.jpg)
![Выдача
Билеты Фильтры
Выдача Цена
$scope.filters.price = [1000, 15000]
$scope.filters.price = [1000, 15000]
onchange(‘filters.price’, function(){
update_tickets();
})](https://image.slidesharecdn.com/frontendforthewin-140417141854-phpapp02/85/Frontend-for-the-win-34-320.jpg)
![PITFALL
Выдача
Фильтры
Цена
$scope.filters = {
price: [100, 10000],
duration: [3600, 84600],
…
}](https://image.slidesharecdn.com/frontendforthewin-140417141854-phpapp02/85/Frontend-for-the-win-36-320.jpg)
Frontend for the win
- 1. FRONTEND FORTHE WIN! Антон Плешивцев, aviasales.ru
- 2. МЕТАПОИСК
- 3. МЕТАПОИСК
- 4. МЕТАПОИСК
- 5. МЕТАПОИСК
- 6. МЕТАПОИСК
- 9. LEGACY • кастомное решение • 10К строк кода без тестов • виджет-ориентированная архитектура
- 11. INTERFACE
- 12. NEW AGE • AngularJS • 3K строк кода • 80% покрытие тестами
- 13. СТРУКТУРА
- 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. Ядро
- 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], … }
- 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. ИТОГИ
- 48. ANGULARJS IS BETTERTHAN ANYTHING ELSE