Sacrificial Architecture in Angular2

Ego Slide

f.strazzullo@extrategy.net

@TheStrazz86

https://github.com/francesco-strazzullo

https://medium.com/@TheStrazz86

https://slides.com/francescostrazzullo

Code with us - The italian blog about software development where everybody can write!

What's the purpose of Agile methodologies?

Our highest priority is to satisfy the customer

Welcome changing requirements, even late in
development

Welcome changing requirements, even late in
development

Welcome changing requirements, even late in
development

Let's talk about Software Architecture...

Try To Change This

By Webysther Nunes (Own work) [CC BY-SA 4.0 ], via Wikimedia Commons

Martin Fowler

Introducing

Sacrificial Architecture

choosing a sacrificial architecture means accepting now that after some time you'll need to throw away what you're currently building.​

Design code that you can throw away!

It's not a pattern

It's a way to accept technical debt...

...and to manage it

Sacrificial Architecture in Angular2

Modularity

duplication is far cheaper than the wrong abstraction

Sandi Metz

UI Components

UI Components are Microservices for frontend development

Try to use @Input and @Output instead of Providers

Separate Logic

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);
    }
}
@Component({
    selector: 'my-component',
    template: require('./component.html')
})
export default class MyComponent {
    constructor(private eventBus: EventBus){}

    onButtonClick(param) {
        this.eventBus.dispatch('LOG_SOMETHING',param);
    }
}
@Injectable
export default class Logger{
    constructor(private eventBus: EventBus){
        this.eventBus.on('LOG_SOMETHING',(value) => {
            console.log(value);
        });
    }
}

Angular2 is huge...

Choose wisely what features to use...

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

TypeScript?

Martin Fowler

Sacrificial Architecture, sometimes it’s the fastest way to learn things

Thanks!