We aim to present modularity patterns applied to solve a real world problem. We are going to present the itch, an use case to illustrate the requirements, the architectural approach and the decisions followed by a live hands-on-coding session. Warning: Don’t try this at home!

1. Software Modularity in Practice
– a story in 5 acts -

2. ACT I: Exposition

3. ACT II: Raising Action

4. There is a change…..

6. As a project manager
I want to be able to forecast an
opportunity
So that I know when can I kick off
a project

7. And what was ALL the project about?

9. Jamie

10. X Files

11. 1.
5/13/2014
As a talent manager
I want to see the distribution of skills for a
delivery unit employees
So that I know the most updated situation

12. 2.
5/13/2014
As a sales person
I want to add and update client
opportunities
So that I can win new business

13. 3.
5/13/2014
As a delivery director
I want to see the delta between skills used
in projects and skills demanded for new
opportunities
So that I know what people to hire

14. SIMPLICITY

15. 5/13/2014
VALUE FOR $$$

16. REUSABILITY

17. So let’s talk about software modularity…

18. ACT III: Climax

19. Decisions…

20. Initial design
I want to manage client opportunities
So that I can win new business
Module Reuse

21. I want to see the distribution of skills
So that I know the most updated situation
Acyclic
Dependencies

22. I want to see the skills gap
So that I know what people to hire
Module Façade

23. I want to forecast an opportunity
So that I know when can I start it
?
Separate
Abstractions
Minimize
Dependencies

24. Final Design

25. ACT IV: Falling Action

26. Decisions…

27. –Angular Modules
–Angular Components
–Dependency Management + Dependency
Injection
–MVC
–SPA Support (ngRoute)
Opinionated Framework …

28. function SampleController($scope) {
$scope.message = ‘Hi Everyone!’;
}
<div ng-controller=“SampleController”>
<p> {{message}} </p>
</div>
$scope
MVC
Model
ViewController

29. Module

30. 5/13/2014
Angular JS Module organization patterns
APP
TAXONOMY
FORECASTCOMMON
APP
CONTROLLERS
FILTERS
DIRECTIVES
SERVICES
Modules contain feature-specific
components
Modules contain feature-specific
components

31. 5/13/2014
APP
CONFIG
DIRECTIVES SZ-SLIDER
CONTROLLERS
TAXONOMY D3
INDEX
FORECAST
SERVICES WS CLIENT
FILTERS
ANGULAR
NG-ROUTE
NG-RESOURCE
File Structure &
Load Dependencies

32. 5/13/2014
Given this small proof of concept,
we easily reached 15 includes
We have to manually maintain this list and also have to keep an eye
on the inclusion order

33. Options
- Java/.NET JavaScript JavaScript +
AMD
JS - ES6
Modules in
deployable form
package/
assembly
.js file +
(function
expressions)
.js file +
enclosing
define(…)
function call
.js file +
export
keyword
Defining
Module
Dependencies
Package(impor
t)/
assembly
metadata
N/A array
parameter for
enclosing
define/require
function call
Import
keyword/
AMD style
System.import
Loading
Modules
handled by
JVM/CLR
<script>
(developer is
responsible
for
thoroughness
and includes
ordering)
require(…)
method call
Import
keyword /
AMD style
System.import

34. 5/13/2014
Require JS
• Dependency management
• JS Module Injector
• JS File loader

35. 5/13/2014
Require JS
1 ) define(<dep array>,
<factory fn(deps)>)
2 ) require(<dep array>,
<callback fn(deps)>)
3 ) require.config(<config object>)

36. Require JS
MAIN
APP
DIRECTIVES
SZ-SLIDER
CONTROLLERS
TAXONOMY
D3
INDEX FORECAST
SERVICES
WS CLIENT
FILTERS ANGULAR NG-ROUTE NG-RESOURCE
CONFIG

37. JS Require JS
<script src=“svc1.js”/>
<script src=“svc2.js”/>
<script src=“app.js”/>
<script src=“svcreg.js”/>
<script src=“config.js”/>
<script src=“main.js”/>
(list increases when adding
new modules)
<script data-main=“main”
src=“require.js”/>
(adding new modules requires no
extra script includes)
5/13/2014
Versus Plain JS

38. 5/13/2014
Site Map
Resourcing
App
Taxonomy
Employee
Distribution
Skill Deficit
Forecast

39. ACT V: Resolution
https://github.com/vichim/modularity
https://github.com/CosminSontu/resourcing-demo

40. Thank You!
The team:
Corneliu Rimboiu, Architect
Iavi Rotberg, Business Analyst
Victor Ichim, Design Lead
Cosmin Sontu, Design Lead