Лучший frontend-фреймворк, и почему вы его не хотите
TRANSCRIPT
МЕТАПОИСК
ПРИЛОЖЕНИЕ
ПРИЛОЖЕНИЕ• единый 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
NG-REPEAT
<div ng-repeat="(key, value) in myObj"> ... </div>
NG-REPEAT• 5000 билетов
• 200 значений на билет
• 1 000 000 (миллион) watchers
MOAR!!! DATA-BINDING
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