The document describes an architecture for building web and mobile apps with a shared core. It discusses breaking the core into small services, abstracting connections, using model factories, and protecting the core through unit testing, dependency management, and code reviews. Controllers interact with sub-services to update views. The connection manager handles API calls. Dependency management with Bower ensures apps get the right core version. Unit testing with Karma and code reviews catch bugs. Override modules and decorators allow customizing the core.

1. N(G)-Apps, One Core
Alan Hietala
@alanhietala
Sr Software Developer @ecobee
Core
ng-app
ng-app
ng-app
ng-app
ng-app

2. web apps
mobile apps
remote teams
!
on
!
1 API
A Puzzle of Paint - Brent Danley

3. Core Architecture

4. Connection Manager
• All ThermostatServices make their data calls here
• Facade created to our bare metal API’s.
• Hides details of authentication from the developer
• provides a clean interface for actions that are more
complicated within the API itself.

5. Thermostat Services
• Rely on connection manager for data
• master service that splits the api json into bits
• Thermostat Service contains many task specific
services that process those bits of json

6. Core Thermostat Services
• Thermostat service gets update
• Updates sub services
• Business Logic in sub services
PollData()
updateSubServices()
Thermostat
Service
updateData(data)
createVacation()
Vacation Service
updateData(data)
updateSomeSetting()
Settings Service
updateData(data)
changeSetPoint()
Setpoint Service

7. Model Factories
• Raw API data often not in the best format for data
binding
• Model Factories create angular specific models
• Our sub services use the factory to create the data
objects controllers watch.

8. Example ModelFactory
angular.module('myApp')
.factory('ScheduleModelFactory', function () {
return {
makeModel: function (rawData) {
// transform the raw data into a great model
return awesomeModel;
}
};
});

9. Service using a
ModelFactory
angular.module('myApp')
.factory('ScheduleService', function (ScheduleModelFactory) {
return {
scheduleModel: null, // controllers will watch this
update: function (rawData) {
this.scheduleModel = ScheduleModelFactory.makeModel(rawData);
}
};
});

10. Controllers Example
angular.module('myApp')
.controller('SetTemperatureCtrl', function ($scope, SetPointService) {
$scope.viewSetPoint = 23;
$scope.setPointService = SetPointService;
$scope.$watch(‘setPointService.setPoint’, function (newValue) {
$scope.viewSetPoint = newValue;
};
$scope.changeSetPoint = function (newSetPoint) {
$scope.setPointService.changeSetPoint(newSetPoint);
}
});
Inject sub service you need

11. Business logic? Ram it Down
Untitled - Etno Deos

12. Core enforces Business
Rules
• Throwing errors from core important for developers
down stream
• Downstream devs don’t have to know all the business
rules.
• We don’t rely on an API call failures business rules
client side ensure speed.

13. Overriding core
• What if core doesn’t quite meet an apps needs?
• Create override module
• Use a decorator

14. Override Module
!
!
angular.module(“myApp”, [“overrideModule”]);
!
!
!
!
!
!
Angular takes the last loaded version if two
modules have the same service defined.

15. Decorator
angular.module('myApp', ['myLibrary'])
.config(function ($provide) {
$provide.decorator(‘serviceName’, function ($delegate) {
var patchedFunction = function () {
// do something here
}
$delegate.functionToPatch = patchedFunction;
return $delegate;
});
});
Angular Sanctioned Monkey Patching

16. DI Makes this all simple
• All of the architecture above is based heavily on DI
• We create many interchangeable parts
• Each encapsulates a single idea
• If any part of an idea changes we update one area

17. Core is Sacred
Protected - Hartwig HKD
How do we Protect it?

18. Broken Window Theory
• if you don’t fix broken
windows people will break
more
• Applies to code bases too
• Refactoring when you find
problems becomes central

19. Unit tests
Make things better, not
worse
you won’t change
things you’re scared of
breaking

20. Tests are Documentation
• BDD style tests ensures they read like a spec
• If tests are up to date so is your software spec
describe(‘Vacation Service’, function () {
describe(‘updateVacation()’, function() {
it(‘should update a vacation with the new date and time’, function () {
// test details
});
!
it(‘should throw and error when the start date is after the end date’, function () {
// test details
});
});
});

21. Karma Advantages
• Run tests on all your target browsers
• Catch browser specific bugs Date.parse anyone?
• Good code coverage tools ties in with CI systems
easily

22. Code Review
gerrit
Review Board

23. Change Log
• V1.0.1 - Added net new feature
• V1.0.0 - changed business logic around thermostats

24. Problem
• How do we avoid breaking changes in core affecting
downstream code unexpectedly?
• Where we started wasn’t very ideal

25. Started with Sync Scripts
• With 2 apps had one copy services from the other
• As apps started to diverge the exclude list grew
• needed a better solution

26. Dependency Management
Bower

27. Bower to the rescue
• Bit the bullet and moved common services to it’s own
repo
• Set up bower in our applications to pull our new
tagged core repo.

28. How do we do it?
{
"name": "myApp",
"version": "1.0.0",
"dependencies": {
….
"mylibrary": “git@github.com:mycompany/mylibrary.git#v1.2.11",
….
}
}
In project bower.json
In core bower.json
{
"name": "mylibrary",
"private": "true",
"version": "1.2.11",
"main": “dist/mylibrary.min.js”
…
}
Tag in git
git tag -a v1.2.11 -m “mylibrary version message”

29. Other benefits
• Forces conversations about what goes into core
services more thinking time is a good thing
• Easy rollback if change breaks your app.
• Dev controls what core version to use and upgrade
timing

30. In Summary
• Broke core into small services
• Abstracted connections
• model factories transform API data for frontend use
• Protect core with Unit testing, Dependency
Management, Code Reviews
• Angular makes this all easy

31. Thanks!
!
!
Questions?

32. Covered
• Services
• Sub Services
• Model Factories
• Controller interaction
• Connection Manager
• Dependency
Management
• Unit testing with Karma
• Code Review Tools
• Override modules
• Decorators
• Change Logs