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

aviasales.ru

МЕТАПОИСК

ПРИЛОЖЕНИЕ

ПРИЛОЖЕНИЕ• единый codestyle

• одинаковый функционал

RAW JS• 20k SLOC

• 10+ custom components

• custom AMD

• 72 h/f

BACKBONE• 15k SLOC

• weak modules

• 60 h/f

ANGULAR JS• 5k SLOC

• DI

• 4 h/f

EMBER JS• beta

ANGULAR JS

ANGULAR JS

ANGULAR JS

ANGULAR JS

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

FIRST BUGS

SECOND BUGS

ИНТЕГРАЦИЯ

INTEGRATION

<script> (function(){ //… }());</script>

INTEGRATION

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

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

MODULE SYSTEM

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

ГИБКОСТЬ

$COOKIESTORE

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 )

NGROUTE

SOLUTION• использовать форк

• патчи в исходном коде

• постоянный мониторинг обновлений

DATA-BINDING

DATA-BINDING

DATA-BINDING

DATA-BINDING

MOAR!!! DATA-BINDING

NG-REPEAT

<div ng-repeat="(key, value) in myObj"> ... </div>

рекурсивно создает watchers на весь список в глубинунаш список - 5 тысяч билетов по 200 значений на билет.

NG-REPEAT• 5000 билетов

• 200 значений на билет

• 1 000 000 (миллион) watchers

QUICK-NG-REPEAT TO THE RESCUE

<div quick-ng-repeat=«(key, value) in myObj"> ... </div>

QUICK-NG-REPEAT• $watchCollection -> $watch

• $digest hack

• handmade updates

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

ANGULAR JS

• внутренние интерфейсы (аналитика, админки)

• B2B

• прототипы

WTF?

REACT JS

• stateful-приложение

• сложный DOM

• критичные к производительности приложения

CLOJURESCRIPT

• сверхкритичные к скорости приложения

• некритичные к размеру

• команда выше среднего

HANDMADE

• размер приложения критичен

• нужны низкоуровневые оптимизации

• команда выше среднего

Handmade (размер)

AngularJS (скорость разработки)

Clojurescript (производительность)

?

ВЫВОДЫ

• Стоит изначально понимать требования к проекту

• AngularJS применим, но с набором ограничений

• Иногда лучше попробовать что-то другое

ABOUT

АНТОН ПЛЕШИВЦЕВtwitter.com/allaud github.com/allaud

https://www.facebook.com/ant.pl.3

aviasales.ru