Sacrificial Architecture in Angular2
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871951/logo_extrategy_fondo_blu_trasp_1_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/3126664/logo-transparent.png)
Ego Slide
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2779824/profilo001.jpg)
f.strazzullo@extrategy.net
@TheStrazz86
https://github.com/francesco-strazzullo
https://medium.com/@TheStrazz86
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871966/logo_extrategy_fondo_giallo_trasp.png)
https://slides.com/francescostrazzullo
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2424723/codingjam-header-big.png)
Code with us - The italian blog about software development where everybody can write!
What's the purpose of Agile methodologies?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871966/logo_extrategy_fondo_giallo_trasp.png)
Our highest priority is to satisfy the customer
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
Welcome changing requirements, even late in
development
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
Welcome changing requirements, even late in
development
Welcome changing requirements, even late in
development
Let's talk about Software Architecture...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871966/logo_extrategy_fondo_giallo_trasp.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
Try To Change This
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2619128/148t04.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
![](https://upload.wikimedia.org/wikipedia/commons/e/e2/Webysther_20150414193208_-_Martin_Fowler.jpg)
By Webysther Nunes (Own work) [CC BY-SA 4.0 ], via Wikimedia Commons
Martin Fowler
Introducing
Sacrificial Architecture
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871966/logo_extrategy_fondo_giallo_trasp.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
choosing a sacrificial architecture means accepting now that after some time you'll need to throw away what you're currently building.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
Design code that you can throw away!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/3119360/shitty_code.jpg)
It's not a pattern
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
It's a way to accept technical debt...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
...and to manage it
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
Sacrificial Architecture in Angular2
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871966/logo_extrategy_fondo_giallo_trasp.png)
Modularity
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871966/logo_extrategy_fondo_giallo_trasp.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
duplication is far cheaper than the wrong abstraction
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
Sandi Metz
UI Components
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871966/logo_extrategy_fondo_giallo_trasp.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
UI Components are Microservices for frontend development
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
Try to use @Input and @Output instead of Providers
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
Separate Logic
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871966/logo_extrategy_fondo_giallo_trasp.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
export default class Logger {
log(param){
console.log(param);
}
}
@Component({
selector: 'my-component',
template: require('./component.html')
})
export default class MyComponent {
constructor(private logger: Logger){}
onButtonClick(param) {
this.logger.log(param);
}
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
@Component({
selector: 'my-component',
template: require('./component.html')
})
export default class MyComponent {
constructor(private eventBus: EventBus){}
onButtonClick(param) {
this.eventBus.dispatch('LOG_SOMETHING',param);
}
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
@Injectable
export default class Logger{
constructor(private eventBus: EventBus){
this.eventBus.on('LOG_SOMETHING',(value) => {
console.log(value);
});
}
}
Angular2 is huge...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871966/logo_extrategy_fondo_giallo_trasp.png)
Choose wisely what features to use...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
export default class Logger {
log(param){
console.log(param);
};
}
@Component({
selector: 'my-component',
template: require('./component.html')
})
export default class MyComponent {
constructor(private logger: Logger){}
onButtonClick(param) {
this.logger.log(param);
}
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
export default {
log(param){
console.log(param);
};
}
import logger from './logger';
@Component({
selector: 'my-component',
template: require('./component.html')
})
export default class MyComponent {
constructor(){}
onButtonClick(param) {
logger.log(param);
}
}
Design your way out of a framework
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
TypeScript?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871966/logo_extrategy_fondo_giallo_trasp.png)
Martin Fowler
Sacrificial Architecture, sometimes it’s the fastest way to learn things
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
Thanks!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2872715/X_extrategy_2col_ist.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/2871951/logo_extrategy_fondo_blu_trasp_1_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/3126664/logo-transparent.png)