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