Download as PDF, PPTX
![INTEGRATION
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});](https://image.slidesharecdn.com/codefestangularjsdirtyfinal-150329142342-conversion-gate01/85/CodeFest-dirty-facts-about-AngularJS-18-320.jpg)
![MODULE SYSTEM
angular.module('myApp', [])
.controller('MyController', ['$scope', function ($scope) {
$scope.greetMe = 'World';
}]);](https://image.slidesharecdn.com/codefestangularjsdirtyfinal-150329142342-conversion-gate01/85/CodeFest-dirty-facts-about-AngularJS-20-320.jpg)
Uploaded byАнтон Плешивцев
CodeFest dirty facts about AngularJS
Документ обсуждает использование AngularJS для разработки приложений, описывая как его возможности, так и ограничения. Автор делится примерами интеграции, управления данными и производительности, а также предлагает альтернативы для проектов с специфическими требованиями. В заключение подчеркивается важность понимания требований к проекту перед выбором технологии.
CodeFest dirty facts about AngularJS
- 1. ГРЯЗНЫЕ ПОДРОБНОСТИ ЖИЗНИС ANGULARJS Антон Плешивцев aviasales.ru
- 2.
- 3.
- 4. ПРИЛОЖЕНИЕ • единый codestyle •одинаковый функционал
- 5. RAW JS • 20kSLOC • 10+ custom components • custom AMD • 72 h/f
- 6. BACKBONE • 15k SLOC •weak modules • 60 h/f
- 7. ANGULAR JS • 5kSLOC • DI • 4 h/f
- 8.
- 9.
- 10.
- 11.
- 12.
- 13. FIRST BUGS спустякакое-то время мы с удивлением обнаружили, что ангуляр неидеален
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20. MODULE SYSTEM angular.module('myApp', []) .controller('MyController',['$scope', function ($scope) { $scope.greetMe = 'World'; }]);
- 21.
- 22.
- 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.
- 25. SOLUTION • использовать форк •патчи в исходном коде • постоянный мониторинг обновлений
- 26.
- 27.
- 28.
- 29.
- 30.
- 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.
- 38. REACT JS • stateful-приложение •сложный DOM • критичные к производительности приложения
- 39. CLOJURESCRIPT • сверхкритичные кскорости приложения • некритичные к размеру • команда выше среднего
- 40. HANDMADE • размер приложениякритичен • нужны низкоуровневые оптимизации • команда выше среднего
- 41.
- 42. ВЫВОДЫ • Стоит изначальнопонимать требования к проекту • AngularJS применим, но с набором ограничений • Иногда лучше попробовать что-то другое
- 43.