Scalability and maintainability are the key points when writing huge software applications. We have the power of great frameworks, such as AngularJS, which enable us to develop applications really fast. But very often good software concepts and paradigms are thrown out of the window. These paradigms can give the answers to questions like: How to separate responsibilities? How to manage state? How to achieve component communication? Within this talk we will speak about how these questions can be answered within AngularJS applications.

1. FROM BIG TO MASSIVE
SCALABILITY IN ANGULARJS APPLICATIONS

2. GERNOT HÖFLECHNER & SEBASTIAN FRÖSTL
SMIMP.IO

3. WHAT MAKES CODE SCALABLE?

4. ▸ Separation of Concerns

5. ▸ Testability

6. ▸ Easy to add functionality

7. ▸ Reacts well to changing requirements

8. ANGULARJS DOES OFFER A LOT!

9. ▸ Directives
▸ Services
▸ Events
▸ Scope hierarchy
▸ 2 way data binding

10. BUT THIS IS ALSO PART OF THE PROBLEM!

12. HOW TO PROPERLY USE THESE COMPONENTS?

13. EXAMPLE
▸ Display and manage some items

14. .directive('myItems', function() {
return {
scope: {
items: '='
},
controller: function ($scope, $http) {
$scope.delete = function (item) {
$http
.delete(/* code */)
.then(function (resp) {
$scope.items.splice(/* code */);
});
}
}
};
});

15. .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
});
}
}
};
});

16. LOOKS CLEAN AND ENCAPSULATED, RIGHT?

17. .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
});
}
}
};
});

18. PROBLEMS

19. ▸ Stateful
▸ Not really reusable
▸ Too many responsibilities

22. WHAT CONCEPTS CAN HELP US?
▸ Micro-Services
▸ Functional programming
▸ Unidirectional data flow (flux)

24. LET'S DO IT BETTER!

25. .service('ItemStore', function() {
var items = {};
this.remove = remove;
function remove(item) {
delete items[item.id];
emit('remove', item);
}
});

26. .service('ItemRemoveService', function($http, ItemStore) {
this.remove = remove;
function remove(item) {
return $http
.delete(/* code */)
.then(function (res) {
ItemStore.remove(res.data);
});
}
});

27. .directive('myItems', function() {
return {
controller: function ($scope, ItemStore) {
ItemStore.on('remove', init); // Listen on store events
init();
function init() {
scope.items = ItemStore.getAll();
}
}
};
});

28. .directive('myItem', function() {
return {
controller: function ($scope, ItemRemoveService) {
$scope.remove = remove;
function remove() {
ItemRemoveService.remove($scope.item);
}
}
};
});

31. APPLIED TO ANGULARJS
▸ Injectable state and updates
▸ Injectable actions
▸ Directives that just use services and display data

34. OUTLOOK
▸ Make it all immutable
▸ Easier migration to Angular 2.0

35. THANK YOU!
GERNOT HÖFLECHNER & SEBASTIAN FRÖSTL
SMIMP.IO