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

Let's talk about Software Architecture...

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

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