Sacrificial Architecture

Ego Slide

f.strazzullo@extrategy.net

@TheStrazz86

https://github.com/francesco-strazzullo

https://medium.com/@TheStrazz86

https://slides.com/francescostrazzullo

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 Frontend Development

Frameworks

Choose your framework as you will need to change it after six months

Choose wisely what features to use of a framework

app.factory('getUsers',['$http',function($http){
    return $http.get('api/v1/users');
});
app.controller('home',[
    '$scope',
    'getUsers',
    function(
        $scope,
        getUsers){
            getUsers().then(function(response){
                $scope.users = response.data;
            });
}]);
export default () => {
    return fetch('api/v1/users').then(function (response) {
        return response.json();
    });
};
import getUsers from './getUsers';

app.controller('home',[
    '$scope',
    function(
        $scope){
            getUsers().then(function(users){
                $scope.users = users;
            });
}]);

Design your way out of a framework

Modularity

duplication is far cheaper than the wrong abstraction

Sandi Metz

UI Components

UI Components are Microservices for frontend development

Separate Logic

export default (param) => {
    console.log(param);
};
import logger from './logger';

class DummyButton extends React.Component {
  render() {
    return (
      <div onClick={() => {logger('This is a Value!'}}>
        Click Me Bro!
      </div>
    );
  }
}
import EventBus from 'EventBus';

class DummyButton extends React.Component {
  onButtonClick() {
    EventBus.dispatch('SOMETHING_HAPPENED','This is a Value!');
  }
  
  render() {
    return (
      <div onClick={() => {onButtonClick()}}>
        Click Me Bro!
      </div>
    );
  }
}
import EventBus from 'EventBus';

export default {
    init:{
        EventBus.on('SOMETHING_HAPPENED',(param) => {
            console.log(param);
        });        
    }
};

When?

Complex Vs Complicated

Cynefin Framework

 /ˈkʌnᵻvɪn/

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

In The End Software...

It's All About People...

And People Are Complex

So use the "Right Practices" for the Job

Martin Fowler

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

Thanks!