Sacrificial Architecture

in modern web development

 

...Or How I Learned to Stop Worrying and Throw My Code Away!

What's the main purpose of Agile?

Embrace Change

Describe your average Software Architecture

It's hard to change

It's always hard to change

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!

Two levels

The whole project

Incremental

It's not a pattern

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

...and to manage it

Sacrificial Web Development

Modularity

Modularity

Modularity

Modularity

"duplication is far cheaper than the wrong abstraction."

Sandi Metz

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

UI Components

UI Components are Microservices for frontend development

Separate Logic

export default (param) => {
    //Do Something
};
import myLogicFunction from './myLogicFunction';

class DummyButton extends React.Component {
  render() {
    return (
      <div onClick={() => {myLogicFunction('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',(params) => {
            //DO SOMETHING
        });        
    }
};

"The only correct way to write JavaScript is whatever you were not doing last week."

Martin Fowler

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

Ego Slide

f.strazzullo@extrategy.net

@TheStrazz86

https://github.com/francesco-strazzullo

https://medium.com/@TheStrazz86

Thanks!