from big to massive – scalability in angularjs applications
TRANSCRIPT
FROM BIG TO MASSIVESCALABILITY IN ANGULARJS APPLICATIONS
GERNOT HÖFLECHNER & SEBASTIAN FRÖSTLSMIMP.IO
WHAT MAKES CODE SCALABLE?
▸ Separation of Concerns
▸ Testability
▸ Easy to add functionality
▸ Reacts well to changing requirements
ANGULARJS DOES OFFER A LOT!
▸ Directives▸ Services▸ Events
▸ Scope hierarchy▸ 2 way data binding
BUT THIS IS ALSO PART OF THE PROBLEM!
HOW TO PROPERLY USE THESE COMPONENTS?
EXAMPLE▸ Display and manage some items
.directive('myItems', function() { return { scope: { items: '=' }, controller: function ($scope, $http) {
$scope.delete = function (item) { $http .delete(/* code */) .then(function (resp) { $scope.items.splice(/* code */); }); } } };});
.directive('myItems', function() { return { scope: { /* scope interface */}, controller: function ($scope, $http, NotificationService) { $scope.delete = function () { $http .delete(/* code */) .then(function () { $scope.items.splice(/* code */); //remove items $scope.$emit(/* event */) // emit to other components NotificationService.push(/* code */) // more code here }); } } };});
LOOKS CLEAN AND ENCAPSULATED, RIGHT?
.directive('myItems', function() { return { scope: { /* scope interface here */}, controller: function ($scope, $http, NotificationService) { $scope.delete = function () { $http .delete(/* code */) .then(function () { $scope.items.splice(); //remove items $scope.$emit() // emit to other components (or $rootScope) NotificationService.push(/* code */) // more code here }); } } };});
PROBLEMS
▸ Stateful▸ Not really reusable
▸ Too many responsibilities
WHAT CONCEPTS CAN HELP US?
▸ Micro-Services▸ Functional programming
▸ Unidirectional data flow (flux)
LET'S DO IT BETTER!
.service('ItemStore', function() { var items = {};
this.remove = remove;
function remove(item) { delete items[item.id]; emit('remove', item); }});
.service('ItemRemoveService', function($http, ItemStore) {
this.remove = remove;
function remove(item) { return $http .delete(/* code */) .then(function (res) { ItemStore.remove(res.data); }); }});
.directive('myItems', function() { return { controller: function ($scope, ItemStore) { ItemStore.on('remove', init); // Listen on store events
init();
function init() { scope.items = ItemStore.getAll(); } } };});
.directive('myItem', function() { return { controller: function ($scope, ItemRemoveService) { $scope.remove = remove;
function remove() { ItemRemoveService.remove($scope.item); } } };});
APPLIED TO ANGULARJS▸ Injectable state and updates▸ Injectable actions
▸ Directives that just use services and display data
OUTLOOK
▸ Make it all immutable▸ Easier migration to Angular 2.0
THANK YOU!
GERNOT HÖFLECHNER & SEBASTIAN FRÖSTLSMIMP.IO