What's the main purpose of Agile?

Embrace Change

Describe your average Software Architecture

It's hard to change

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

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