Some experience about using large AngularJS application in production. About its bottlenecks and pitfalls.

1. ГРЯЗНЫЕ ПОДРОБНОСТИ ЖИЗНИ С
ANGULARJS
Антон Плешивцев
aviasales.ru

2. МЕТАПОИСК

3. ПРИЛОЖЕНИЕ

4. ПРИЛОЖЕНИЕ
• единый codestyle
• одинаковый функционал

5. RAW JS
• 20k SLOC
• 10+ custom components
• custom AMD
• 72 h/f

6. BACKBONE
• 15k SLOC
• weak modules
• 60 h/f

7. ANGULAR JS
• 5k SLOC
• DI
• 4 h/f

8. EMBER JS
• beta

9. ANGULAR JS

10. ANGULAR JS

11. ANGULAR JS

12. ANGULAR JS

13. FIRST BUGS спустя какое-то время мы с удивлением
обнаружили, что ангуляр неидеален

14. FIRST BUGS

15. SECOND BUGS

16. ИНТЕГРАЦИЯ

17. INTEGRATION
<script>
(function(){
//…
}());
</script>

18. INTEGRATION
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});

19. ПЕРЕНОСИМОСТЬ

20. MODULE SYSTEM
angular.module('myApp', [])
.controller('MyController', ['$scope', function ($scope) {
$scope.greetMe = 'World';
}]);

21. ГИБКОСТЬ

22. $COOKIESTORE

23. NGROUTE
$routeProvider
.when('/searches/new',
templateUrl: 'empty.html'
controller: 'EmptyController'
)
.when('/',
templateUrl: 'empty.html'
controller: 'EmptyController'
)
.when('/:encoded_search',
templateUrl: 'search_results.html'
controller: 'SearchResultsController'
reloadOnSearch: false
)

24. NGROUTE

25. SOLUTION
• использовать форк
• патчи в исходном коде
• постоянный мониторинг обновлений

26. DATA-BINDING

27. DATA-BINDING

28. DATA-BINDING

29. DATA-BINDING

30. MOAR!!! DATA-BINDING

31. NG-REPEAT
<div ng-repeat="(key, value) in myObj"> ... </div>
рекурсивно создает watchers на весь
список в глубину
наш список - 5 тысяч билетов по 200
значений на билет.

32. NG-REPEAT
• 5000 билетов
• 200 значений на билет
• 1 000 000 (миллион) watchers

33. QUICK-NG-REPEAT
TOTHE RESCUE
<div quick-ng-repeat=«(key, value) in myObj"> ... </div>

34. QUICK-NG-REPEAT
• $watchCollection -> $watch
• $digest hack
• handmade updates

35. КУДА НАМ ПЛЫТЬ

36. ANGULAR JS
• внутренние интерфейсы (аналитика, админки)
• B2B
• прототипы

37. WTF?

38. REACT JS
• stateful-приложение
• сложный DOM
• критичные к производительности приложения

39. CLOJURESCRIPT
• сверхкритичные к скорости приложения
• некритичные к размеру
• команда выше среднего

40. HANDMADE
• размер приложения критичен
• нужны низкоуровневые оптимизации
• команда выше среднего

41. Handmade
(размер)
AngularJS
(скорость разработки)
Clojurescript
(производительность)
?

42. ВЫВОДЫ
• Стоит изначально понимать требования к
проекту
• AngularJS применим, но с набором ограничений
• Иногда лучше попробовать что-то другое

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